Slide Show dengan easySlider1.5 jQuery

Demo

'Slide Show' dengan 'easySlider1.5 jQuery' ini lebih simpel dibanding dengan 'jQuery Slider'. Dengan fungsi easySlider1.5 jQuery ini penampilan 'slide show' menjadi lebih dinamis untuk menampilkan beragam image (image gallery) yang dapat bergantian secara otomatis, dan memiliki fasilitas tombol untuk menggerakkan ke kiri dan ke kanan. Penggunaan dari 'easySlider1.5' ini juga bisa difungsikan sebagai Content Slider.

Konsep 'Slide Show' dengan 'easySlider1.5 jQuery' ini dikembangkan oleh CSS Globe, tapi belum dilengkapi dengan pergantian image secara otomatis, sehingga saya memperoleh source tambahan agar image dapat bergerak secara otomatis dari weblog yang juga menggunakan easySlider1.5, dan dengan sedikit penyesuaian saya mencoba menerapkan "Slide Show easySlider1.5" di "template blogger".

Penerapan Slide Show dengan easySlider1.5 jquery di Blogger Template

1. Javascript

a. Masukan script jQuery berikut sebelum </head> (jika telah memiliki script atau source jQuery ini tidak perlu dimasukan kembali) :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

b. Masukan javascript jQuery easySlider1.5 berikut dibawah script jQuery tadi.

<!-- JS easySlider -->
<script src='http://choenblogspot.googlecode.com/files/easySlider1.5.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){    
$(&quot;#slider&quot;).easySlider({
auto: true,
continuous: true
});
});
</script>
<!-- End JS easySlider -->

2. CSS (Cascading Style Sheets)

Masukkan kode CSS berikut di dalam bagian CSS, atau diatas ]]></b:skin> :

/* CSS easySlider */

#containerSlider {
width:210px;
height:110px;
margin:0 40px;
padding:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
padding:0;
text-indent:-8000px;
}
#slider ul, #slider li {
list-style:none;
margin:0;
padding:0;
text-indent:0;
}
#slider, #slider li {
overflow:hidden;
width:210px;
height:110px;
margin:0 auto;
}
#slider {
margin-left:0;
background:#ccc;
border:1px solid #999;
}
#prevBtn, #nextBtn {
display:block;
height:34px;
left:-20px;
position:absolute;
top:38px;
width:31px;
}
#nextBtn {
left:200px;
}
#prevBtn a, #nextBtn a {
background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVC6KWDI/AAAAAAAACbI/PPeBfsVUs30/s800/prev.gif) no-repeat scroll 0 0;
display:block;
height:34px;
width:31px;
}
#nextBtn a {
background:transparent url(http://lh3.ggpht.com/_dfnTVAxeWMI/SsiVVAwivSI/AAAAAAAACbM/rWvFhU-sWa0/s800/next.gif) no-repeat scroll 0 0;
}
#slider img {
background:#ccc;
padding:5px;
width:200px;
height:100px;
}

Catatan: image pada demo berukuran 200x100px, jika anda ingin menggunakan ukuran image yang berbeda anda perlu memperbaiki width dan height pada kode CSS diatas.

3. HTML (Hyper Text Markup Language)

Terakhir yaitu kode HTML, pada demo 'slide show' ini ditempatkan di 'sidebar' untuk itu masuk ke 'Page Elements', klik 'Add a Gadget' pada sidebar, dan masukan kode berikut di "HTML/JavaScript".

<div id="containerSlider">
<!-- START CONTENT SLIDER -->
<div id="contentSlider">
<!-- START SLIDER -->
<div id="slider">
<ul>                
<li><a href="http://deconstructioncode.blogspot.com/2009/09/blogger-template-grid-system.html"><img alt="free blogger template grid system" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SsAW5zoNvgI/AAAAAAAACZE/8mj28hj3Zh4/960gridblogger.gif"/></a></li>
<li><a href="http://deconstructioncode.blogspot.com/2009/08/nge-grunge-dengan-sifr-20-free-blogger.html"><img alt="free blogger template sifr2.0 grunge" src="http://lh3.ggpht.com/_dfnTVAxeWMI/SohU0LuKBBI/AAAAAAAAB00/WQuzkblfkXc/grungesifr3.jpg"/></a></li>
<li><a href="http://deconstructioncode.blogspot.com/2009/05/free-blogger-templates-dengan-sentuhan.html"><img alt="jquery blogger template" src="http://lh3.ggpht.com/_dfnTVAxeWMI/SkAJydDNFaI/AAAAAAAABFI/4yjcqePU3JI/jquery-blogger1.gif"/></a></li>
<li><a href="http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html"><img alt="jquery blogger template" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SkAJyWnnF9I/AAAAAAAABFM/zRspioeFe_I/jquery-blogger2.gif"/></a></li>
<li><a href="http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html"><img alt="jquery blogger template" src="http://lh3.ggpht.com/_dfnTVAxeWMI/SlFl54V6-zI/AAAAAAAABWg/Az4thdpf2lQ/Typo-Cufon2.jpg"/></a></li>
<li><a href="http://deconstructioncode.blogspot.com/2009/07/ini-minimal-kah-free-blogger-template.html"><img alt="Ini minimaliskah" src="http://lh4.ggpht.com/_dfnTVAxeWMI/Sm06ecjVfUI/AAAAAAAABqs/agXqPs4SfyA/minimalkahtemp.gif"/></a></li>
<li><a href="http://deconstructioncode.blogspot.com/2009/07/bukan-template-coklat.html"><img alt="bukan template coklat" src="http://lh5.ggpht.com/_dfnTVAxeWMI/SnKJT_g3pHI/AAAAAAAABtI/U2saMvjILl8/template-coklat.gif"/></a></li>
</ul>
</div>
<!-- END SLIDER -->
</div>
<!-- END CONTENT SLIDER -->
</div>
<!-- END CONTAINER SLIDER -->

catatan:
Alamat image dan link tujuan disesuaikan dengan yang anda butuhkan.

4. Sip selesai.

Posted in: jQuery,Penerapan jQuery