วันศุกร์ที่ 11 พฤษภาคม พ.ศ. 2555

สอนทำ Slide แสดงรูปภาพแบบเลื่อนบน-ล่าง ด้วย jQuery

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

6 ความคิดเห็น :

  1. ขอบคุณมากค่ะ จะลองนำไปปรับใช้ดูนะคะ ^^

    ตอบลบ
  2. @pokky : ด้วยความยินดีครับ ^^

    ตอบลบ
  3. ไม่ระบุชื่อ7 กันยายน 2555 เวลา 09:56

    ถ้าจะทำหลายๆ slide ในหน้าเดียว ทำได้มั้ยครับ
    แล้วถ้าจะใส่ลูกศร เลื่อนซ้าย-ขวา ในภาพใหญด้วยต้องทำยังไงครับ
    ขอบคุณครับ

    ตอบลบ
    คำตอบ
    1. โค๊ดนี้ไม่รองรับหลายๆ slide ในหน้าเดียวครับ
      ถ้าต้องการใส่ลูกศรเลื่อนซ้าย-ขวาด้วย
      ต้องปรับโค๊ดอีกนิดหน่อยครับ

      ลบ
  4. ต้องการดึงรูปจากฐานข้อมูลมาแสดงได้มั้ยค่ะ หลายๆ รูป หมายถึง สินค้านึงมีหลายรูปอ่ะ แสดงหลายรูปในหน้า detail อ่ะค่ะ

    ตอบลบ
    คำตอบ
    1. ดึงมาแสดงหลายๆรูปได้ครับ ลองประยุกต์ดูนะครับ ทำได้แน่นอน!!

      ลบ