PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

22 March 2009 By
javascript รูปภาพ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ 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>  

ตัวอย่าง







Tags:: javascript รูปภาพ






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง