สอนทำ Slide แสดงรูปภาพแบบเลื่อนบน-ล่าง ด้วย jQuery
สำหรับคุณสมบัติที่แจ่มขั้นเทพของมัน คือ สามารถเลื่อนขึ้น-ลงไปยังตำแหน่งของรูปถัดไปอัตโนมัติ โดยที่เอาเมาส์ไปวาง ซึ่งจะไม่เหมือนกับสไลด์แบบแรกที่ได้สอนไปแล้ว ที่จะต้องคลิกเพื่อเลื่อนไปยังดูรูปถัดไป และเมื่อคลิกที่รูปขนาดเล็ก(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 อ่ะค่ะ
ตอบลบดึงมาแสดงหลายๆรูปได้ครับ ลองประยุกต์ดูนะครับ ทำได้แน่นอน!!
ลบ