Image Slidershow dengan Thumbnail Carousel

Membuat Image Slider dengan Carousel Thumbnail

Slideshow atau Image Slider dengan Carousel Thumbnail ini juga salah satu jenis Slideshow jQuery dengan desain yang berbeda. Sebelumnya Tutorial Problogiz membagi panduan membuat Membuat Slide Show jQuery Carousel Keren di Blogger, kali ini masih menggunakan plugin jQuery yang sama caroudFredSel tapi dengan konfigurasi dan skin yang berbeda. Image Slider dengan thumbnail ini menggunakan Main Page (gambar utama) dan Thumbnail, yang sama-sama bergeser secara otomatis. Mari ikuti tutor selengkapnya cara Membuat Image Slidershow dengan Carousel Thumbnail berikut.

Image Slidershow dengan Carousel Thumbnail

Untuk skin Image Slidershow ini menggunakan file PSD yang dapat Anda unduh dibawah, sesuai design slider (sources : favbulous.com) plugin carousel jQuery perlu dikonfigurasi sebagai berikut:

Previous and next navigation
Thumbnail carousel
Main Image carousel

DEMO IMAGE SLIDER THUMBNAIL CAROUSEL

jQuery Plugin

Masih menggunakan carouFredsel plugin yang memungkinkan kita untuk membuat layout yang berbeda dengan mudah. Ada banyak demo dan contoh online bagi kita untuk mencoba dan menemukan konfigurasi Carousel yang tepat. Kali ini, kita akan menggunakan contoh Slideshow dengan thumbnail bergulir (scroll) horizontal. Untuk itu kita membutuhkan javascript sebagai berikut:

$(function() {
 /* Attached an unique class name to each thumbnail image */
 $('#thumbs .thumb a').each(function(i) {
  $(this).addClass( 'itm'+i );
  
  /* add onclick event to thumbnail to make the main 
  carousel scroll to the right slide*/
  $(this).click(function() {
   $('#images').trigger( 'slideTo', [i, 0, true] );
   return false;
  });
 });
 
 /* Highlight the first item on first load */
 $('#thumbs a.itm0').addClass( 'selected' );
 
 /* Carousel for the main slideshow */
 $('#images').carouFredSel({
  direction: 'left',
  circular: true,
  infinite: false,
  items: 1,
  auto: true,
  scroll: {
   fx: 'directscroll',
   onBefore: function() {
    /* Everytime the main slideshow changes, it check to 
     make sure thumbnail and page are displayed correctly */
    /* Get the current position */
    var pos = $(this).triggerHandler( 'currentPosition' );
    
    /* Reset and select the current thumbnail item */
    $('#thumbs a').removeClass( 'selected' );
    $('#thumbs a.itm'+pos).addClass( 'selected' );

    /* Move the thumbnail to the right page */
    var page = Math.floor( pos / 3 );
    $('#thumbs').trigger( 'slideToPage', page );
   }
  }
 });
 
 /* Carousel for the thumbnails */
 $('#thumbs').carouFredSel({
  direction: 'left',
  circular: true,
  infinite: false,
  items: 3,
  align: false,
  auto: false,
  prev: '#prev',
  next: '#next'
 });
 
});

Struktur HTML

Yang perlu diperhatikan pada markup HTML adalah tag <a> dan <img> untuk main carousel maupun thumbnail, tag <a> harus berada dalam posisi diatas (top) dari image. Sehingga memungkinkan memberi efek "glare" atau berkilau pada masing-masing gambar.

<div id="gallery">
 <!-- HTML for main carousel -->
 <div id="main">
  <div id="images">
   <div class="slide">
    <a href=""></a>
    <img src="images/large/large-image.jpg" alt="Main Image Title" width="400" height="210" />
   </div>
   ......
   ......
   ......
  </div>
 </div>
 <!-- HTML for thumbnail carousel -->
 <div id="thumbs">
  <div class="thumb">
   <a href="#">Thumbnail Title</a>
   <img src="images/small/samll-image.jpg" alt="Thumbnail Title" width="72" height="38" />
  </div>
  ......
  ......
  ......
 </div>
 <!-- Previous and next button -->
 <a href="#" class="thumbs" id="prev">Previous</a>
 <a href="#" class="thumbs" id="next">Next</a>
</div>
<!-- clear float -->
<div class="clear"></div>

PSD File

Ada beberapa file PSD dari little galery dibawah ini yang dapat digunakan sebagai cover (skin) Slideshow. Css sprite untuk tombol navigasi dengan efek hover. Untuk gambar efek glare (berkilau) pada main image dan thumbnail sebenarnya file PNG transparan, contoh dibawah saya beri background hitam agar tampak oleh Anda gambar berkilau. Berikut file yang dapat Anda copy url image-nya nantinya dan pasang sebagai background dalam CSS.

carousel_glare.png

carousel_glare_small.png

carousel_nav.png

carousel_shadow.png

CSS

Setelah kita telah mempunyai Javascript, Html, dan gambar cover diatas, sekarang waktunya memberi style pada slideshow tersebut, berikut kode CSS:

#gallery {
 width: 432px;
 height: 280px;
 position:relative;
 margin:0 auto;
}   
/* Styling for the main carousel */
#gallery #main {
 width:432px;
 height:220px;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLLNcuRGzUe_pfYMq3daoFAsY_ciMZ-OW87ZBCN2ql1ktliUcSDkGOhH9pfXYoiuj-p-cpCrzNta_EpZPPAL61NnudIYevtMeclzE5-tiornxQdXi0rOwV9oLkBQSKSmD27krNYN7fyqM5/s320/carousel_shadow.png') no-repeat center bottom;
 position:relative;
 text-align:center; 
}
#gallery #images, #gallery #thumbs {
 overflow: hidden;
}
#gallery #images {
 width:400px;
 height:210px;
 margin:0 auto;
 position:absolute;
 left:16px;
 top:0;
}  
 #gallery #images .slide {
  width: 400px;
  height:210px;
  position:relative;
  float:left;
 }   
 #gallery #images .slide a {
  display:block;
  position:absolute;
  top:0;
  left:0;
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_wwnTXVRmBqhWJpS_5vTQR6VBtVdSh6jjEzued1U06WpVMcQUb-VvOqJ_u1Y6_uykfwYT4dLaRI-_Oakc2SmWvmOJBvzx13W6j1ZpRmYs-LAUX_MYVXsqbwFKUN5DdZdjp1yFKK3Iqua/s320/carousel_glare.png') no-repeat 0 0;
  width: 400px;
  height:210px;
  text-indent:-999em; 
  border-radius:5px; 
  -webkit-border-radius:5px;
  -moz-border-radius:5px; 
 }
 #gallery #images .slide img {
  border-radius:5px;     
  -webkit-border-radius:5px;
  -moz-border-radius:5px;     
 }

/* styling for the thumbnail carousel */ 
#gallery #thumbs {
 width: 330px;
 height:40px;
 margin:10px 0 0 73px;
}
 #gallery #thumbs .thumb {
  width:72px;
  height:40px;
  float: left;
  position:relative;
  margin:0 30px 0 0;
 } 
 #gallery #thumbs .thumb img {
  border-radius:5px;    
  -webkit-border-radius:5px;
  -moz-border-radius:5px;          
 }
 #gallery #thumbs .thumb a {
  display:block;
  position:absolute;
  top:0;
  left:0;
  background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs8KFtRQcC31FfuoDn20ZrpVvA3ENnk47FMZTWeGVPVlZq16FMc8TIEtaGdds-qDpygKOxRUFVQbqF9QCyYliJMULe733kMXN-5qlVK1IQmT-WiCC55UN_WZSIdbYFvZeTvYmsa0uPy8MN/s1600/carousel_glare_small.png') no-repeat 0 0;
  width: 70px;
  height:36px; 
  border:2px solid #ddd;
  text-indent:-999em;
  border-radius:5px;      
  -webkit-border-radius:5px;
  -moz-border-radius:5px;      
 } 
  #gallery #thumbs .thumb a.selected, #gallery #thumbs .thumb a:hover {
   border:2px solid #aaa;
  } 
    
/* styling for previous and next button */   
#gallery #prev, #gallery #next {
 text-indent:-999em;
 position: absolute;
 display:block;
 width:19px;
 height:20px;
 background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVWju42iNmhqeaQw8eM-Ndi-3_mrjnh2tyedfCTG7bjaTfuuxaUnH7MupF1w1wPcgheqmcqr0F4vU5xRWoyxiv-YUNRNPSHNtqKC-RSv8T05EnTst4As2PhqMozqT5myQ9mFC-6Bcs5CvU/s1600/carousel_nav.png') no-repeat 0 0;
 bottom:20px;
}
 /* Set the position according to the sprite */
 #gallery #prev {
  background-position: 0 0;
  left: 25px;
 }
 #gallery #next {
  background-position: -19px 0;
  right: 25px;
 }   
 #gallery #prev:hover { 
  background-position: 0 -20px;    
 }
 #gallery #next:hover {
  background-position: -19px -20px;    
 }
 #gallery #prev.disabled, #gallery #next.disabled {
  display: none !important;
 }

Memasang Image Slider dengan Carousel Thumbnail di Blogger

Langkahnya sama dengan artikel sebelumnya Cara Membuat Slide Show jQuery Carousel (Anda bisa lihat kembali untuk lebih detailnya). Yang pertama tentu meletakkan jQuery library dan carouFredSel-plugin jquery dibawah ini tepat sebelum tag</head>.

<script type="text/javascript" src="https://problogizjs.googlecode.com/files/jquery.carouFredSel-5.2.3-packed.js"></script>

Untuk jQuery library kalau belum ada ditemplate Anda bisa menggunakan jQuery terbaru jquery-1.9.1.min.js, kalau sudah ada versi lainnya lewati saja jangan pasang lagi.

Langkah kedua, copy code CSS diatas dan letakkan tepat sebelum tag ]]></b:skin>

Langkah ketiga, jika Anda ingin Slidershow ini dipakai sebgai widget di bawah Judul Blog, ikuti langkah berikut:

Pilih Tata Letak Blogger > Tambahkan Gadget > pilih HTML/JavaScript > pastekan semua kode dibawah > Simpan

Code HTML + plugin carouFredSel :

<div id="gallery">
<div id="main">
<div id="images">
<div class="slide">
<a href="#"></a>
      <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/walle.jpg" width="400" />
     </div>
<div class="slide">
<a href="#"></a>
      <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/toystory.jpg" width="400" />
     </div>
<div class="slide">
<a href="#"></a>
      <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/up.jpg" width="400" />
     </div>
<div class="slide">
<a href="#"></a>
      <img alt="" height="210" src="http://favbulous.com/demo/style-a-image-slider/images/large/nemo.jpg" width="400" />    
     </div>
</div>
</div>
<div id="thumbs">
<div class="thumb">
<a href="#"></a>
     <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/walle.jpg" width="72" />
    </div>
<div class="thumb">
<a href="#"></a>
     <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/toystory.jpg" width="72" />
    </div>
<div class="thumb">
<a href="#"></a>
     <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/up.jpg" width="72" />
    </div>
<div class="thumb">
<a href="#"></a>
     <img alt="" height="38" src="http://favbulous.com/demo/style-a-image-slider/images/small/nemo.jpg" width="72" />    
    </div>
</div>
<a class="thumbs" href="#" id="prev">Previous</a>
   <a class="thumbs" href="#" id="next">Next</a>
  </div>
<div class="clear">
</div>
<script type="text/javascript">
$(function() {
 /* Attached an unique class name to each thumbnail image */
 $('#thumbs .thumb a').each(function(i) {
  $(this).addClass( 'itm'+i );
  
  /* add onclick event to thumbnail to make the main 
  carousel scroll to the right slide*/
  $(this).click(function() {
   $('#images').trigger( 'slideTo', [i, 0, true] );
   return false;
  });
 });
 
 /* Highlight the first item on first load */
 $('#thumbs a.itm0').addClass( 'selected' );
 
 /* Carousel for the main slideshow */
 $('#images').carouFredSel({
  direction: 'left',
  circular: true,
  infinite: false,
  items: 1,
  auto: true,
  scroll: {
   fx: 'directscroll',
   onBefore: function() {
    /* Everytime the main slideshow changes, it check to 
     make sure thumbnail and page are displayed correctly */
    /* Get the current position */
    var pos = $(this).triggerHandler( 'currentPosition' );
    
    /* Reset and select the current thumbnail item */
    $('#thumbs a').removeClass( 'selected' );
    $('#thumbs a.itm'+pos).addClass( 'selected' );

    /* Move the thumbnail to the right page */
    var page = Math.floor( pos / 3 );
    $('#thumbs').trigger( 'slideToPage', page );
   }
  }
 });
 
 /* Carousel for the thumbnails */
 $('#thumbs').carouFredSel({
  direction: 'left',
  circular: true,
  infinite: false,
  items: 3,
  align: false,
  auto: false,
  prev: '#prev',
  next: '#next'
 });
 
});
</script>

source image: favbulous.com

Selesai!!

Ini adalah salah satu cara untuk memberi cover (skin) pada image slidershow dengan berkas/file PSD gratis. Jika Anda ingin mencoba sendiri menggunakan file PSD yang berbeda, Anda bisa mencobanya.

Selamat Mencoba widget Slider Image dengan Thumbnail di blog Anda, Sob!!