Lightbox evolution ini pernah saya gunakan pada template sebelumnya untuk 'Konversi Kode'. Tutorial cara pemasangan Lightbox Evolution ini sebetulnya sudah dishare oleh
Om-Dayz (Dayz Hidayat). Akan tetapi setelah saya cek ulang ternyata kodenya sudah kehapus. oleh karena itu saya coba share ulang untuk sobat semua.
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(){
$('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>
Inline Content
id="loremipsum" Nullam varius congue fringilla. Curabitur auctor dapibus molestie. Cras malesuada vestibulum lectus, vel ullamcorper nibh tempus lobortis. Donec ipsum magna, malesuada et fringilla eget, placerat ut arcu. Donec aliquet, mauris ut pellentesque tincidunt, massa dolor tempor urna, ac interdum massa nisl id tellus. Maecenas eu nunc varius lorem porttitor faucibus. Suspendisse potenti. Donec ullamcorper vehicula pretium. In aliquam adipiscing mi, rhoncus eleifend felis auctor eu. Aenean et mi vitae ante ultricies pulvinar a vel neque.
Buka LoremIpsum |
Buka LoremIpsum dengan ukuran tertentu (534x165)<a class="lightbox" href="#loremipsum">Buka LoremIpsum</a>
<a class="lightbox" href="?lightbox[width]=534&lightbox[height]=165#loremipsum">Buka LoremIpsum dengan ukuran tertentu (534x165)</a>
Youtube
<a href="http://www.youtube.com/watch?v=e1c-wAT0b6g" class="lightbox">YouTube</a>
Flash /SWF
<a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" class="lightbox">Flash</a>
Iframe
Buka Iframe |
Versi HTML5<a href="https://kang-is.googlecode.com/svn/trunk/converter.html?lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460" class="lightbox">Buka Iframe</a>
<a class="lightbox" data-options='{"width":450, "height":450, "iframe": true}' href='https://kang-is.googlecode.com/svn/trunk/converter.html' rel='nofollow'>Versi HTML5</a>
Sebetulnya masih banyak cara penggunaannya, namun yang diatas itu yang paling sering digunakan.
FULL Repost from :
Blog Kang Ismet
Komentar Terbaru