Cara Membuat Lightbox Evolution pada Blog dengan JQuery

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 tambahkan class='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(){
    $(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).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 ^^

Author : Unknown

Terimakasih, telah membaca artikel mengenai Cara Membuat Lightbox Evolution pada Blog dengan JQuery. Semoga artikel tersebut bermanfaat untuk Anda. Mohon untuk memberikan 1+ pada Google+, 1 Like pada Facebook, dan 1 Follow pada Twitter. Jika ada pertanyaan atau kritik dan saran silahkan tulis pada kotak komentar yang sudah disediakan.

Share Artikel

Facebook

Twitter

Google+

Tweet