Thumbnail Gallery, Heading dan Caption dengan Effect jQuery

Demo

'Thumbnail Gallery' dengan effect jQuery pada bagian 'heading' dan 'caption' ini salah satu pilihan terbaik untuk menambah kreasi. Tutorial thumbnail dengan jQuery ini dikembangkan oleh Queness, salah satu pengembang fanatik jQuery.

Tutorial Thumbnail dari Queness ini sangat mudah diterapkan, demikian juga di blogger template, saya sekedar mendokumentasikan kembali, sehingga ketika saya butuh saya dapat dengan mudah menerapkannya.

Tahapan Thumbnail Gallery , Heading dan Caption dengan Effect jQuery

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:

<!-- Thumbnail Gallery -->
<script src='http://choenblogspot.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script>
$(document).ready(function () {

// transition effect
style = &#39;easeOutQuart&#39;;

// if the mouse hover the image
$(&#39;.photo&#39;).hover(
function() {
//display heading and caption
$(this).children(&#39;div:first&#39;).stop(false,true).animate({top:0},{duration:200, easing: style});
$(this).children(&#39;div:last&#39;).stop(false,true).animate({bottom:0},{duration:200, easing: style});
},

function() {
//hide heading and caption
$(this).children(&#39;div:first&#39;).stop(false,true).animate({top:-50},{duration:200, easing: style});
$(this).children(&#39;div:last&#39;).stop(false,true).animate({bottom:-60},{duration:200, easing: style});
}
);

});
</script>

:: untuk script ini anda dapat modifikasi angka 'top -50' dan 'bottom -60' ini, seperti pada 'bottom -60' aslinya dari tutorialnya 'bottom -50', tapi karena pas saya terapkan kurang kebawah saya tambah jadi 60.

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

<div class="photo">
<div class="heading"><span>Bukan Template Coklat</span></div>
<a href="http://bukantemplatecoklat.blogspot.com/"><img alt="" src="http://1.bp.blogspot.com/_dfnTVAxeWMI/Snl-0DulohI/AAAAAAAABvQ/sTRn2qXumsk/template-coklat.jpg"/></a>
<div class="caption"><span>Bukan Template Coklat - Free Blogger Template Bukan Template Coklat. </span></div>
</div>

:: alamat image dan url diatas yang perlu anda rubah sesuai yang anda inginkan.

4. Masukan kode CSS berikut, pastinya di dalam kode css sesudah <b:skin><![CDATA[ atau sebelum ]]></b:skin> :

/*  Trumb Gallery  */
.post .photo img {
/* Ini khusus kode CSS di postingan, perlu disesuaikan dengan template anda*/
padding: 0;
border: 0;
margin-top: -34px;
line-height: 0;
}

.photo {
/* relative position, so that objects in it can be positioned inside this container */
position:relative;
font-family:arial;

/* hide those extra height that goes beyong the size of this container */
overflow:hidden;
border:5px solid #000;
width:250px;
height:190px;
}

.photo .heading, .photo .caption {
/* position inside the container */
position:absolute;
background:#000;
height:50px;
width:250px;

/* transparency for different browsers */
/* i have shared this in my CSS tips post too */
opacity:0.6;
filter:alpha(opacity=60);
-moz-opacity:0.6; 
-khtml-opacity: 0.6;

}

.photo .heading {

/* hide it with negative value */
/* it's the height of heading class */
top:-50px;
}

.photo .caption { 
/* hide it with negative value */
/* it's the height of bottom class */
bottom:-60px;
}

/* styling of the classes*/
.photo .heading span {

color:#26c3e5;
top:-50px;
font-weight:bold;
display:block;
padding:5px 0 0 10px;
}

.photo .caption span{
color:#999;
font-size:9px;
display:block;
padding:5px 10px 0 10px;
}

:: untuk '.photo .heading { top:-50px;}' dan '.photo .caption { bottom:-60px;}' angkanya di sesuaikan seperti Javascript diatas.

5. Sip selesai.

Posted in: jQuery,Penerapan jQuery