Cara Membuat Lightbox Evolution pada Blog dengan JQuery- - adalah sebuah fitur di Blogger yang memungkinkan sebuah gambar jika diklik oleh pengunjung maka gambar tersebut akan tampil dalam ukuran besarnya tapi pengunjung masih berada di halaman yang sama, dan jika halaman yang dibaca pengunjung tersebut memiliki beberapa gambar di dalamnya maka gambar-gambar tersebut akan ditampilkan dalam bentuk thumbnail di bagian bawahnya,
untuk keluar dari mode tampilan gambar penuh tersebut pengunjung cukup klik saja di area kosong (bukan gambar).
Untuk DEMO, Sobat bisa klik saja pada gambar yg ada di halaman ini.
dan bagi sobat yang ingin menerapkan lightbox ini, silahkan ikuti langkah mudahnya :
1. Pasang framework jQuery diatas kode
</head>:<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Apabila
sudah terpasang jQuery silahkan ganti dengan versi 1.7.2, karena saya
coba dengan beberapa versi sampai yang terbaru, tidak bisa bekerja
2. Pasang Lightbox jQuery serta CSS-nya masih di atas kode
</head><link href='http://kang-is.googlecode.com/svn/trunk/css/lightbox.css' rel='stylesheet' type='text/css'/> <script src='http://kang-is.googlecode.com/svn/trunk/javascript/lbev2.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(){$('.lightbox').lightbox()}); //]]> </script>
3. Simpan Template
Cara Penggunaan
Untuk penggunaan Lightbox Evolution ini, cukup tambahkanclass='lightbox' pada url tujuan. Untuk lebih lengkapnya lihat cara penggunaan dibawah ini :Gambar Satuan
<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox"><img src="url-gambar-kecil" alt=""/></a>
<a href="url-gambar-besar" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>
Untuk menambahkan
class='lightbox' pada setiap gambar secara otomatis, simpan kode ini di atas </body><script type='text/javascript'> jQuery(document).ready(function(){ $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightbox(); }); </script>
Album / Gallery
Untuk membuat Gallery, tambahkan nama album dengan menggunakan tag
rel contoh rel="nama-album"<a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a> <a href="url-gambar-besar" rel="nama-album" class="lightbox"><img src="url-gambar-kecil" alt=""/></a> <a href="url-gambar-besar" rel="nama-album" class="lightbox" title="Untuk menambahkan deskripsi seperti ini, tambah title"><img src="url-gambar-kecil" alt=""/></a>
Oke sekian Tutorial tentang - Cara Membuat Lightbox Evolution pada Blog dengan JQuery
Semoga Bermanfaat ^^
