สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย

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>  

ตัวอย่าง