Membuat Thumbnail Gambar dengan Menggunakan jQuery

Membuat thumbnail dari sebuah gambar yang berdimensi cukup besar terkadang diperlukan dalam membuat sebuah halaman web. Untuk membuat thumbnail dari sebuah gambar, ada banyak cara. Namun yang akan saya coba bahas di sini adalah cara membuat thumbnail dari sebuah gambar dengan melakukan cropping pada gambar tersebut sesuai dengan ukuran yang kita inginkan, sehingga yang akan ditampilkan hanyalah sebagian dari gambar aslinya. Idenya adalah dengan menyembunyikan gambar asli di belakang sebuah elemen div yang ukurannya lebih kecil dibandingkan dengan gambar tersebut. Misalnya kita mempunyai sebuah gambar berikut: Gambar tersebut akan saya beri id thumb_image, dan saya akan mencoba membuat thumbnail dari gambar tersebut menggunakan jQuery.

$(document).ready(function() {
$("#thumb_image").wrap('<div class="thumb-img"><div class="thumb-inner"></div></div>');
});

Fungsi dari script di atas adalah untuk membungkus gambar tersebut dengan dua buah elemen div, masing-masing pembungkus bernama thumb-img dan thumb-inner. Agar kedua pembungkus itu berfungsi sesuai dengan yang kita inginkan, kita memerlukan stylesheet yang akan mengatur tampilan dari kedua div tersebut. Berikut adalah stylesheet yang saya gunakan.

.thumb-img {
border-top:1px solid #CCC; border-left:1px solid #CCC; border-bottom:1px solid #AAA; border-right:1px solid #AAA;
position:relative;
width:150px; height:150px;
margin:10px; padding:6px;
background:#FFF;
}
.thumb-inner {
position:relative; overflow:hidden; width:100%; height:100%;
}
.thumb-img img {
border:0;
}

Hasilnya adalah seperti berikut: Pada contoh gambar di atas menampilkan potongan gambar dari gambar aslinya. Namun terlihat kurang menarik bukan? karena bagian yang ditampilkan hanya bagian pojok kiri atas dari gambar aslinya. Agar lebih menarik, kita bisa sedikit memodifikasi script yang kita gunakan agar potongan gambar yang ditampilkan tepat di tengah-tengah dari gambar aslinya.

$(document).ready(function() {
$("#thumb_image").wrap('<div class="thumb-img"><div class="thumb-inner"></div></div>')
.each(function() {
 var posX = parseInt($(this).width()) / 2;
 var posY = parseInt($(this).height()) / 2;
 $(this).css('position', 'absolute' );
 $(this).css('margin-left', '50%' );
 $(this).css('margin-top', '50%' );
 $(this).css('left', '-' + posX + 'px' );
 $(this).css('top', '-' + posY + 'px' );
});
});

Maka hasilnya akan tampak seperti berikut: Cukup menarik bukan?! cara ini dapat bekerja dengan baik pada Mozilla Firefox dan IE 7>. Sedangkan pada Chrome dan Safari tampilan yang dihasilkan masih belum cukup bagus karena kedua browser tersebut sepertinya tidak bisa mendukung nilai style left dan top dengan nilai awal pada saat pertama kali gambar dimuat, kecuali gambar tersebut sudah terdapat dalam cache-nya terlebih dahulu. Saya juga sampai saat ini sedang mencari cara bagaimana agar dapat membuat tampilan thumbnail yang serupa pada Chrome dan Safari. Sedangkan untuk Opera saya belum coba sih, soalnya ga' nginstal opera... :p. Tetapi harusnya pada tidak terjadi masalah pada Opera karena cara penanganannya mirip dengan Firefox. Sekian... Selamat mencoba... ;) nb: Cara ini saya adaptasi dari http://joanpiedra.com/jquery/thumbs/ Contoh live: http://angggabastian.net84.net/examples/jquery-thumbnail/