Slide Show dengan Caption - jQuery

Demo

Tutorial 'Slide Show dengan Caption - jQuery' dikembangkan oleh serie3 dot info, dengan nama 's3Slider jQuery plugin'. Tahapan tutorial tersebut sangat mudah diterapkan, dan saya mencoba mendokumentasi tutorial 'Slide Show dengan Caption - jQuery' ini di blogger template.

Penerapan Slide Show dengan Caption - jQuery di Blogger Template

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

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

2. Masukan javascript berikut dibawah script jQuery tadi:

<!-- begin s3Slider jQuery plugin -->
<script src='http://choenblogspot.googlecode.com/files/s3Slider.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#s3slider&#39;).s3Slider({
timeOut: 4000
});
});
</script>

3. Kode HTML berikut dapat anda masukkan di berbagai tempat, baik itu di postingan, gadget (html/javascript), atau langsung di edit HTML.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<a href="http://jquerybloggertemplate.blogspot.com/"><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoKzm2f0hbI/AAAAAAAABwk/JMGaOAIMv2c/template-jQ1.jpg"/></a>
<span>Free Blogger Template, jQuery I</span>
</li>
<li class="s3sliderImage">
<a href="http://typo-cufon.blogspot.com/"><img src="http://lh3.ggpht.com/_dfnTVAxeWMI/SoK0ZiKiiJI/AAAAAAAABwo/5ac17qT9_pM/template-cufon.jpg"/></a>
<span>Free Blogger Template with Cufón to Replace Heading Title</span>
</li>
<li class="s3sliderImage">
<a href="'http://bukantemplatecoklat.blogspot.com/"/><img src="http://lh6.ggpht.com/_dfnTVAxeWMI/SoK1ueDCUrI/AAAAAAAABws/q6aFadO-7QU/template-coklat.jpg"/></a>
<span>Free Blogger Template "Bukan Template Coklat"</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

>> catatan: ganti setiap alamat image dan keterangannya, sesuai dengan kebutuhan.

4. Masukan kode CSS berikut, di dalam kode css sesudah <b:skin><![CDATA[ atau sebelum ]]></b:skin> (lihat setiap keterangannya):

/* s3Slider jQuery plugin */
#s3slider {
border:5px solid #000;
width:250px; /* important to be same as image width */
height:190px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
margin: 0px; padding:0px;
width:250px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
text-indent: 0px;  /* reset blogger */
font: 10px Arial, Helvetica, sans-serif;
padding: 10px 13px;
margin: 0;
width:225px; /* need edit to be same as image width or wider */
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: block; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

>> catatan: width:250px dan height:190px dapat anda rubah sesuai dengan ukuran image yang anda ingin tampilkan, dan jangan lupa disesuaikan juga width:225px; pada .s3sliderImage span.

5. Sip selesai.

:: lihat juga:
- Thumbnail Gallery, Heading dan Caption dengan Effect jQuery
- Kumpulan SlideShow / Image Galery - jQuery

Posted in: jQuery,Penerapan jQuery