Print View,Thaimisc.Com : ทำ Pop up สไลด์สำหรับโชว์รูปภาพ ทำ Pop up สไลด์สำหรับโชว์รูปภาพ
Today's Tips
Poj , Date 22-10-2007

ทำ Pop up สไลด์สำหรับโชว์รูปภาพ โดยเมื่อคลิกจะแสดง Popup ขึ้นมา สามารถคลิกเลือกดูทีละภาพหรือตั้งเลือก Auto เพื่อแสดงภาพวนไปเรื่อยๆก็ได้ ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<link rel="stylesheet" href="backbox.css" type="text/css" />
<script type="text/javascript" src="js/prototype.compressed.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/dhtmlHistory.js"></script>
<script type="text/javascript" src="js/customsignsheader.js"></script>



2. โหลดไฟล์ backboxfiles.zip เสร็จแล้วแตกไฟล์ออก แล้วนำไปไว้ใน Floder กับไฟล์ที่ต้องการแสดงภาพโดยไฟล์ backboxfiles.zip จะมีทั้งโค้ด Javascript และรูปภาพตัวอย่าง ซี่งสามารถเปลียนได้ตามต้องการแต่ต้องแก้ไขชื่อไฟล์ภาพให้ตรงกันด้วย

3.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ โดยการกำหนดลิงค์และรูปภาพในคำสั่ง <div>..</div> ส่วนรูปภาพอื่นที่ต้องการให้โชว์เอาใส่ไว้ด้านนอกคำสั่ง
<div>..</div> และให้กำหนดค่าใส่โค้ด rel="lightbox[slide]" ในลิงค์ภาพที่ต้องการโชว์ ส่วน caption="A Bunch of Grapes"  คือชื่อรูปภาพที่จะแสดงเวลาโชว์ภาพ

<div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
<a href="images/babyhand.jpg" rel="lightbox[slide]" caption="A Bunch of Grapes">
<img src="images/sunset.jpg" alt="lime" width="400" height="300" border="0" /></a>
</div>
<a href="images/desert.jpg" rel="lightbox[slide]" caption="Sunflower"></a>
<a href="images/beech.jpg" rel="lightbox[slide]" caption="Dolphin"></a>
<a href="images/lime.jpg" rel="lightbox[slide]" caption="Waterfall"></a>

<script type="text/javascript" src="js/customsignsfooter.js"></script>



Credit : javascriptkit