Image thumbnail dengan javascript
Anda mungkin pernah melihat suatu halaman web yang menampilkan gambar dalam bentuk thumbnail, kemudian ketika gambar itu di klik, maka akan di tampilkan ukuran gambar yang lebih besar. Untuk membuat halaman seperti ini secara on the fly, artinya perubahan akan segera di lakukan ketika focus gambar berubah, bisa menggunakan javascript. Javascript merupakan bahasa pembuat web yang bersifat client side, artinya request dari client akan di olah di sisi client, sehingga proses load data lebih cepat.
Berikut adalah contoh pembuatan halaman Image Thumbnail.
Langkah pertama adalah siapkan beberapa gambar yang akan di tampilkan. Tempatkan gambar-gambar tersebut dalam satu folder dengan file web.
Buat sebuah file html yang menampilkan gambar.
<html>
<head>
<title>Image Thumbnail</title>
</head>
<body >
<img src=”” name=”gbr” width=”500″ style=”display:none”> <br><br>
<img src=”pic/1.jpg” onclick=”changepic(’1.jpg’);” width=”80″>
<img src=”pic/2.jpg” onclick=”changepic(’2.jpg’);” width=”80″>
<img src=”pic/3.jpg” onclick=”changepic(’3.jpg’);” width=”80″>
<img src=”pic/4.jpg” onclick=”changepic(’4.jpg’);” width=”80″>
</body>
</html>
Perhatikan baris berikut
<img src=”pic/1.jpg” onclick=”changepic(’1.jpg’);” width=”80″>
Pada objek image (img) terdapat atribut onclick sebagai event handler yang akan menjalankan perintah tertentu ketika di klik. Pada contoh diatas, event handler akan menjalankan fungsi changepic() dengan parameter ‘1.jpg’. Nilai dari parameter inilah yang nanti akan di kirim melalui event handler kemudian diolah sebagai parameter masukan untuk fungsi changepic().
Selain menggunakan event handler seperti diatas, kita juga bisa menggunakan link sebagai pemicunya.
<a href=”javascript:void(0)” onClick=”javascript:changepic(’1.jpg’);”>
<img src=”pic/1.jpg” width=”80″></a>
<a href=”javascript:void(0)” onClick=”javascript:changepic(’2.jpg’);”>
<img src=”pic/2.jpg” width=”80″></a>
<a href=”javascript:void(0)” onClick=”javascript:changepic(’3.jpg’);”>
<img src=”pic/3.jpg” width=”80″></a>
<a href=”javascript:void(0)” onClick=”javascript:changepic(’4.jpg’);”>
<img src=”pic/4.jpg” width=”80″></a>
Hampir sama dengan event handler, hanya saja disini event handler nya kita masukkan sebagai atribut dalam link.
Selanjutnya kita perlu membuat fungsi changepic();
Sisipkan script berikut diantara tag <head>…</head><script>
function changepic(gambar){
document.gbr.src=’pic/’+gambar;
document.gbr.width=500;
document.gbr.style.display=’block’;
}
</script>
Pada script diatas kita buat sebuah fungsi dengan nama changepic() dengan parameter gambar sebagai parameter masukan.
Perhatikan script berikut
document.gbr.src=’pic/’+gambar;
Perintah tersebut akan mengubah source/sumber gambar pada objek image, dalam hal ini saya menggunakan nama gbr. Nama ini adalah nama yang diberikan pada objek image untuk menampung nilai balik dari fungsi changepic() yang akan mengubah nilai properties src. Untuk alasan managemen data, dalam contoh ini, file-file gambar tersebut saya letakkan pada folder tersendiri dengan nama pic, sehingga kita harus menambahkan string ‘pic/’ kemudian diikuti parameter masukan (gambar) dengan menggabungkannya menggunakan tanda + (plus).
Kemudian perintah berikut:
document.gbr.width=500;
document.gbr.style.display=’block’;
Perintah ini untuk memberikan nilai lebar (width) untuk gambar yang akan di tampilkan. Kemudian baris berikutnya adalah untuk mengubah style/css dari objek image yang awalnya ‘display:none’, artinya tidak ditampilkan, kemudian diubah menjadi ‘display:block’ agar gambar tersebut dapat di tampilkan.
Source code selengkapnya dapat di download di sini
Selamat mencoba.