ถามโค้ดแสดงรูปภาพขนาดใหญ่(Javascript)

จากบทความนี้นี้ครับ

ผมอยากให้มันแสดงอยู่ในจออะครับ เพราะว่าแสดงตกขอบตลอดเลยครับ

 

 ถ้ามีตัวอย่างรูปผลลัพธิ์ จะสามารถแก้ปัญหาได้ถูกจุด  เดี๋ยวจะลองปรับโค้ต แล้วจะเอามาตอบ  พร้อมตัวอย่าง

[url=http://www.uppicweb.com/show.php?id=d2a828af1c253913fa3b6ee6c24ebf03][img]http://www.uppicweb.com/i/is/outlet.png[/img][/url]
[SIZE=1]Thanks: [url=http://www.upload.in.th]ฝากไฟล์ฟรี[/url] [url=http://www.insurebroker.net]ประกันภัยรถยนต์[/url] [url=http://www.pgp.co.th]คอนโด[/url][/SIZE]

www.uppicweb.com/show.php

เพิ่มฟังก์ชันรอการโหลดรูป แล้วค่อยแสดง น่าจะได้ตำแหน่งที่ถูกต้อง ลองตามโค้ตด้านล่าง คล้าย ตัวเดิมแต่เพิ่มใน javascript อีก 1 ฟังก์ชัน และเปลี่ยนการเรียกใช้ฟังก์ชันจาก showPic() เป็น setPic() ในโค้ด HTML

CSS Code

<style type="text/css">    
/* css code สำหรับรูปแบบของภาพที่ต้องการแสดง */  
div.bigGallPic{   
    position:fixed;   
    margin:auto;   
    top:150px;   
    left:150px;   
    padding:3px;   
    text-align:center;   
    background-color:#FFFFFF;   
    border:5px solid #666666;   
    display:none;   
    cursor:pointer;   
}   
</style>  

Javascript Code

<script type="text/javascript">    
function setPic(imgShow){   
    var showBig=document.getElementById('bigGallDiv');   
    showBig.style.display='block';   		
	showBig.style.visibility='hidden';   
    showBig.innerHTML="<img src='"+imgShow+"' title='คลิกที่รูปเืพื่อปิด' >";   
	setTimeout("showPic()",500);
} 
function  showPic(){
	var showBig=document.getElementById('bigGallDiv');   
    var LeftVal=0;   	
    if(showBig.innerHTML!=""){   
		LeftVal=showBig.offsetWidth;      					
		LeftVal=(gWH().width-LeftVal)/2;   	
    }   
	showBig.style.left=LeftVal "px";   
	showBig.style.visibility='visible';   	
}
function gWH(){ // ฟังก์ชันหาความกว้างและความสูงของหน้าเพจ   
    var e = window, a = 'inner';   
    if ( !( 'innerWidth' in window ) ){   
        a = 'client';   
        e = document.documentElement || document.body;   
    }   
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }   
}  
</script>  

HTML Code

<div class="bigGallPic" id="bigGallDiv" onclick="this.style.display='none'"></div>  
<!--รูปแบบการใช้งานคือการส่งค่ารูปภาพขนาดใหญ่เข้าไปใน ฟังก์ชัน showPid('ตำแหน่งของรูปภาพขนาดใหญ่');-->  
<a href="javascript:setPic('big_img.jpg');"><img src="thumb_img.jpg" border="0" /></a>  

ตัวอย่าง

ขอบคุณมากครับ ได้แล้วครับ

รบกวนหลายเรื่องเลย

เพิ่มเติมครับ ผมลองไปเซต css ตรง top จาก 150px เป็น 0 ครับ

เพราะว่าในกรณีที่ภาพใหญ่มากมันจะตกไปด้านล่างครับ