Memasang JQuery Lightbox Evolution di Blog
JQuery Lightbox Evolution - 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
2. Pasang Lightbox jQuery serta CSS-nya masih di atas kode
3. Simpan Template



Untuk menambahkan
Untuk membuat Gallery, tambahkan nama album dengan menggunakan tag



Buka LoremIpsum | Buka LoremIpsum dengan ukuran tertentu (534x165)


Buka Iframe | Versi HTML5
Sebetulnya masih banyak cara penggunaannya, namun yang diatas itu yang paling sering digunakan.

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>
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.
102 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
oia, templatenya www.tipehandphone.com
Di Blog Saya Udah Saya Terapkan Code Ini , Tapi Pas Saya Klik Gambar Yang Ada Di Blog Saya Kok Malah Menuju Ke URL Imagenya Bukannya Keluar Lightboxnya
Mohon Bantuan
mohon ijin yah pake tutornya...
hatur tenkyu n' slm kenal :)
Nb: @atas saya, coba pakai jquery ny yang link 1.7.2 , awalnya sy pake yg link 2.0 ga kluar2. pake link yg d ats baru bisa deh, tau emng gara2 itu apa bkn. jwban lbh tepatnya tunggu yg mpunya tutor deh.
padahal saya sudah mengikuti secara seksama ..
dari memasang jquery, memasang lightbox jquery serta css-nya dan memasang kode otomatis class='lightbox' tetap saja gak bisa kenapa ya kang ?
Terima kasih kang sebelumnya :)
kok jadi begini ..gimana caranya kang
sangat bermanfaat :-d
http://i.imgur.com/KYvoRdm.png
cara mengatasinya bagaimana?
Dasboard -> setelan -> pos dan komentar -> Tampilkan gambar dengan Lightbox? klik > tidak
- izin bookmark!!!!
tahnks kang izin praktek
http://murian69.blogspot.com/
Tutorial Lightbox Evolution ini sudah lama saya natikan :D
gimana cara agar emoticon kgk masuk pre dalam komentar, soalnya nganggu kodenya, hehehehe
mohon pencerahan
http://i.imgur.com/671Hier.png
sebelum anda berkomentar silahkan baca dulu narasi tulisan diatas. buatlah sebagaimana kita bertamu kerumah orang =( belajar dulu berkomentar setelah itu baru belajar modif :)
- salam damai [ tunggu tahun depan blog baru saya ] :-d :-d
Script ini Kang di coba Kang Terima kasih :-bd
Simpen dulu ah..makasih sebelumnya :)
ijin sedot pertamax nya ya kang