Membuat Expand dan Collapse Pada Gambar dengan jQuery

Expand dan Collapse merupakan efek untuk menampilkan gambar keseluruhan dan mengembalikannya ke kondisi semula (hide/tidak menampilkan gambar secara penuh). Konsep ini terinspirasi dari Orkut.com, dimana ketika gambar diupdate ditampilkan sebagian (collapse) pada halaman web.

Untuk membuat fitur expand dan collapse pada gambar kita akan menggunakan bantuan jQuery.

Langkah 1 – HTML

Buatlah kerangka HTML untuk menampilkan gambar beserta link. Misal index.html

<div class="outerGambar">
<div class="gambar"><img src="flower.jpg"/>
<div class="showHideLink">
<span class="link">Tampilkan</span></div>
</div>
</div>

Langkah 2 – jQuery

Kemudian, gunakan perintah jQuery untuk mengontrol gambar yang telah disiapkan. Anda bisa menempatkan perintah ini di file index.html ataupun di file lainnya.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gambar").css(‘max-height’,’110px’); // Awalnya, gambar hanya ditampilkan sebagian saja. Disini kita menampilkan gambar sebesar 110px

$(".gambar").mouseover(function(){
$(".showHideLink").show();
}).mouseout(function(){
$(".showHideLink").hide();
});

$(".link").click(function(){ // Ketika link Tampilkan di klik, maka gambar akan ditampilkan secara penuh
if($(this).html()==’Tampilkan’){
$(".gambar").css(‘max-height’,”);
$(this).html(‘Sembunyikan’);
}else{
$(".gambar").css(‘max-height’,’100px’);
$(this).html(‘Tampilkan’);
}
});

});
</script>

Jalankan file index.html yang telah dibuat untuk melihat hasilnya. Selamat Mencoba.