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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถามโค้ดแสดงรูปภาพขนาดใหญ่(Javascript)

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

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

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

Amdev 27-10-2009 16:34:05

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

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

ninenik 28-10-2009

ความคิดเห็นที่ 2

[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]

amdev 28-10-2009 16:23

ความคิดเห็นที่ 3

www.uppicweb.com/show.php

amdev 28-10-2009 16:24

ความคิดเห็นที่ 4

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

ตัวอย่าง

ninenik 28-10-2009

ความคิดเห็นที่ 5

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

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

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

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

amdev 29-10-2009 08:34

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน