สำหรับคุณสมบัติที่แจ่มขั้นเทพของมัน คือ สามารถเลื่อนขึ้น-ลงไปยังตำแหน่งของรูปถัดไปอัตโนมัติ โดยที่เอาเมาส์ไปวาง ซึ่งจะไม่เหมือนกับสไลด์แบบแรกที่ได้สอนไปแล้ว ที่จะต้องคลิกเพื่อเลื่อนไปยังดูรูปถัดไป และเมื่อคลิกที่รูปขนาดเล็ก(Thumbnail)ที่แสดงผลแบบสไลด์ทางขวามือ รูปจะแสดงผลเป็นรูปขนาดใหญ่(Large)ตรงกลาง มาดูโค๊ดกันเลยครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="../js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $.fn.tslideimage = function() { var _w=$(this).height(),objMain=$(this),cacheImg=''; $(this).find('.items').live('click',function(){//คลิกที่รูปใดๆในช่องScrollด้านขวา $_showImgLarge($(this));//เรียกฟังกชั่นแสดงรูปขยาย return false;//ไม่ให้ redirect link }); $(this).find('.thumb').bind('mousemove',function(e){//เหตุการณ์ mousemove ที่ Thumb image var _TOP = parseInt($(this).offset().top);//หาตำแหน่งบนสุด var h_scroll = parseInt($(this).find('.scroll').height());//ความสูงของ scroll var top_scroll = Math.round((_TOP - e.pageY) * (h_scroll-$(this).height())/$(this).height());//ใช้สูตรระดับไอสไตน์ $('.scroll').animate({top:top_scroll}, { queue:false, duration:1000});//animate เลื่อนบน-ล่าง }); $_showImgLarge=function(obj){//ฟังก์ชั่นแสดงรูปขยาย var largeImg=''; if(obj==undefined){//ตอนเพจโหลดครั้งแรก largeImg=objMain.find('a:first').attr('href');//เอารูปแรกสุดมาโชว์ก่อน objMain.find('.items:first').addClass('active');//เพิ่ม Class "active" ให้มันซะ }else{//กรณีที่เกิดจากการคลิกที่ Thumb Image ใดๆ largeImg=obj.find('a').attr('href');//เอารูปที่คลิกมาโชว์ objMain.find('.items').removeClass('active');//remove Class "active" ก่อนน๊ะจ๊ะ obj.addClass('active');//add Class "active" เฉพาะ Thumb Image ที่คลิกเท่านั้นจ่ะ } if(cacheImg!=largeImg){//หากรูปมันโชว์อยู่ก่อนแล้ว แต่ดันทะลึ่งไปกดซ้ำอีก เราก็จะไม่ให้มันทำงานใน if var objLarge=objMain.find('.large'); objLarge.html('<img src="'+largeImg+'" id="imgLarge"/>').css('display','none'); //ไม่มีไรมากแสดงรูปที่เลือกและซ่อนไว้ก่อน เพราะเราจะใส่effect "fadeIn" ในบรรทัดล่าง $('img#imgLarge').load(function(){//เมื่อรูปภาพโหลดเสร็จเรียบร้อยแล้ว objLarge.fadeIn('slow'); //Effect "fadeIn" ทำงานโลด!!! }); cacheImg=largeImg;//เก็บชื่อไฟล์รูปไว้ในตัวแปร cacheImg เพื่อตรวจสอบการคลิกชือรูปซ้ำในครั้งต่อไป } } $_showImgLarge();//เพจโหลดครั้งแรก จะทำงานฟังก์ชั่นนี้ก่อน } $(document).ready(function(){ $('.photo').tslideimage();//วิธีเรียกใช้ }); </script> <title>สอนทำ Gallery ขั้นเทพ ด้วย jQuery</title> <style type="text/css"> body{ font-size:14px; font-family:Tahoma, Geneva, sans-serif; color:#333; } .photo{ float:left; width:750px; height:550px; padding:2px; border:1px solid #333; overflow:hidden; position:relative; } .photo .large{ float:left; width:590px; height:100%; background-color:#E2E2E2; border:1px dashed #C3C3C3; overflow:hidden; } .photo .thumb{ float:right; height:550px; width:150px } .photo .thumb .scroll{ float:left; position:relative; background-color:#D1D1D1; } .photo .thumb .items{ float:left; margin:2px; border:1px dashed #333; } .photox .thumb .items a{ text-decoration:none; } .photo .thumb .items:hover{ border:2px dashed #F00; } .photo .thumb .active{ border:2px solid #F00; } </style> </head> <body > <div class="photo"> <div class="large"> </div> <div class="thumb"> <div class="scroll"> <div class="items"><a href="photo/1.jpg"><img src="photo/1s.jpg" border="0" /></a></div> <div class="items"><a href="photo/2.jpg"><img src="photo/2s.jpg" border="0" /></a></div> <div class="items"><a href="photo/3.jpg"><img src="photo/3s.jpg" border="0" /></a></div> <div class="items"><a href="photo/4.jpg"><img src="photo/4s.jpg" border="0" /></a></div> <div class="items"><a href="photo/5.jpg"><img src="photo/5s.jpg" border="0" /></a></div> <div class="items"><a href="photo/6.jpg"><img src="photo/6s.jpg" border="0" /></a></div> </div> </div> </div> </body> </html>วิธีเรียกใช้ ให้ใช้คำสั่งตอนหน้าเว็บถูกโหลดเรียบร้อยแล้ว ดังนี้
$(document).ready(function(){
$('.photo').tslideimage();
});
$(‘.photo’) คือ ชื่อ Class Attribute เป็นการเรียกTag <div class="photo"> ซึ่งเป็นTagแสดงรูปภาพให้ทำงานแบบสไลด์นั่นเองครับ ส่วนอื่นๆ ขอให้ท่านอ่านศึกษาในคอมเม้นท์ ที่ผมได้เขียนเอาไว้เอง ก็แล้วกันนะครับ บทความนี้ขอเขียนแบบง่ายๆหน่อยครับ หวังว่าคงมีประโยชน์แก่ผู้แสวงหาความรู้ไม่มากก็น้อยครับ ผิดพลาดตรงไหน หรืออยากให้เพิ่มจุดไหน สามารถแจ้งบอกผมได้จากกล่องคอมเม้นท์ด้านล่างเลยนะครับ ^^
ตัวอย่าง ->http://pluto.host22.com/slideUpDown/slideshow.php
ขอบคุณมากค่ะ จะลองนำไปปรับใช้ดูนะคะ ^^
ตอบลบ@pokky : ด้วยความยินดีครับ ^^
ตอบลบถ้าจะทำหลายๆ slide ในหน้าเดียว ทำได้มั้ยครับ
ตอบลบแล้วถ้าจะใส่ลูกศร เลื่อนซ้าย-ขวา ในภาพใหญด้วยต้องทำยังไงครับ
ขอบคุณครับ
โค๊ดนี้ไม่รองรับหลายๆ slide ในหน้าเดียวครับ
ลบถ้าต้องการใส่ลูกศรเลื่อนซ้าย-ขวาด้วย
ต้องปรับโค๊ดอีกนิดหน่อยครับ
ต้องการดึงรูปจากฐานข้อมูลมาแสดงได้มั้ยค่ะ หลายๆ รูป หมายถึง สินค้านึงมีหลายรูปอ่ะ แสดงหลายรูปในหน้า detail อ่ะค่ะ
ตอบลบดึงมาแสดงหลายๆรูปได้ครับ ลองประยุกต์ดูนะครับ ทำได้แน่นอน!!
ลบ