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.lightbox

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>

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&amp;lightbox[height]=165#loremipsum">Buka LoremIpsum dengan ukuran tertentu (534x165)</a>

Youtube


youtube

<a href="http://www.youtube.com/watch?v=e1c-wAT0b6g" class="lightbox">YouTube</a>

Flash /SWF


flash

<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.

109 komentar

wauuu keren yag kang
ijin sedot pertamax nya ya kang

Balas

Keren kang ismet, terimakasih sharingnya :D

Balas

untung belum tutup POM nya :D

Balas

sama2 sob... semoga bermanfaat

Balas

cocok ini untuk pemeritahuan ke pengunjung, Besok dicoba ya kang

Balas

silahkan... sekarang udah malem :D

Balas

Beneran keren lightbox-nya kang Ismet.
Simpen dulu ah..makasih sebelumnya :)

Balas

keren lightboxnya.... kalau misal nge zoom otomatis dengan penambahan css tertentu untuk setiap gambar tanpa harus memasukkan kode url lightbox bisa ga KI?

Balas

halah... angger teu tiasa nganggo jquery anu versina langkung luhur nya? :(

Balas

wah yang untuk youtube jq gmana kang saya suka banget kayaknya keren tu kang

Balas

Mantap kang ngefect'y .. cikan ah urang raosan !!! hehe

Balas

kang...lightboxnya harus ketika posting ,gimana mau bikin automatik kaya blogger lightbox?

Balas

Selamat Pagi nyimak kebetulan saya belum pakai
Script ini Kang di coba Kang Terima kasih :-bd

Balas

Keren kang.. ringan pula.. :-bd

Balas

dari kemarin sudah mau saya tanyakan kang, tapi kelupaan pula, oh ya kang, kapan mau share scrool bar yang kemarin saya tanyakan kang?? :)

Balas

maaf kang boleh tau ga ni template namanya apa, free ato bayar...bs tuk blogger/blogspot ga...trims

Balas

wah mas dino dapet pertamax nya hehe selamat mas ..

Balas

:) wkwkwkwkk

"Untung Belum Tutup POM nya"

=) becanda nya Kang Ismet Jelek :)

Balas

dulu saya nyarinyari tutorial kyk gini ampe ngubek nyari jquery nya kang setelah yg d blog om dayz jquery nya terhapus,eh setelah d pasang beberapa minggu lalu skg tepat tgl 28 desember 2013 kang ismet memposting nya.. hmm mksh kang atas postingan nya semoga bs bermanfaat oleh org lain. ameng kang ka www.apkprime.com

Balas

wah mantab updatenya kang :D salut deh sama kangismet!
- salam damai [ tunggu tahun depan blog baru saya ] :-d :-d

Balas

keren kang, rasanya makin mantap kalo blog dipasang begituan :)

Balas

akhirnya muncul juga ni... thanks kang

Balas

gilaaa lu kang akhirnya dikabulkan juga permintaan saya, makasih kang, saya aja cari2 tutorialnya gak berhasil2, tapi setelah view page source di halaman demonya akhirnya bisa dipasang di blog saya, setelah berhasil dipasang di blog saya kemarin, hari ini saya mau buatkan tutorialnya ehhh kang ismet duluan yang buatkan tutorialnya, saya sudah buat halaman demonya untuk lightbox classic dark nih kang http://goo.gl/BpM98A

Balas

@leoni.. lupa kelewat.. nanti saya posting deh :D

Balas

habisnya pada nyari pertamax :D

Balas

silahkan sob.. awas lupa nyimpen :D

Balas

bisa.. udah banyak yang share kocara ngezoom image

Balas

enya nyaeta, duka dimana masalahna... susuganan tiasa urang bongkar

Balas

sesuai contoh diatas aja sob, kalau mau pake gambar.. tinggal anchornya aja diganti

Balas

mangga kang.. ulah hilap kopina :D

Balas

kan udah ada diatas untuk gambar otomatis

Balas

pagi juga kang... mangga dicobian :D

Balas

iya sob cuman 1 gram kalau ga beratnya wkwkkwkwk

Balas

maksudnya template yang saya pake? ga ada tempat downloadnya.. soalnya edit sendiri :D

Balas

iya kang.. saya coba yang dari om-dayz sempet ga jalan.. menuju TKP sekarang :D

Balas

wahahahah... masih lama 1 tahun lg ya :D

Balas

begituan sama beginian sama ga ya :D

Balas

hehehhe... nyumput heula kang

Balas

wah, pasang kode jquery sma cssnya dibagian mana?

Balas

untung ga gila beneran :D.. pas aja pertanyaannya, pas saya mau posting ini.. eh muncul pertanyaan :D

Balas

lupa ketinggalan di tutornya, pasang diatas kode </head>

Balas

hehe, kita para newbie jd bingung dah :), makasih mas, ditunggu commentnya di blog aku http://faqihjauzy.blogspot.com

Balas

hehehe... maaf kelupaan :D

Balas

maaf kang OOT sebentar...
gimana cara agar emoticon kgk masuk pre dalam komentar, soalnya nganggu kodenya, hehehehe
mohon pencerahan
http://i.imgur.com/671Hier.png

Balas

maaf gan saya juga masih belajar dari blog ini, dan belum bisa membantu, hehe tapi lucu tuh emoticon yang pertama lol

Balas

http://i.imgur.com/9gyiR5w.png

Balas

OOT gue :( sorry2 pindah tempat dulu kang, hehehe
:) :( :-d @@, :-d << test kang....

Balas

cikidaw cikidawww .. antik pisann!! ngiring repost mang :D

Balas

This is amazing... Hatur tengkyu Kang
Tutorial Lightbox Evolution ini sudah lama saya natikan :D

Balas

kunjungi blog gue juga ya gan :D
http://murian69.blogspot.com/

Balas

di parse dulu sob ! itu ada konversi kode .

Balas

perasaan semua postingan kang ismet keren semua sob!? :D :-bd

Balas

blog nya si akang rian nih sob, mampir ya : http://rian-nurherdian.blogspot.com :-bd

Balas

hehe gak apa2 kang, santai aja :)

Balas

oiya dah nemu kang di blog Djogz, tapi pengennya c lightbox yg ini soalnya efeknya lbh bagus :D
tp ane gak ngerti kl otak-atik jquery....teu ngartos pisan :D

nuhun KI

Balas

Baru nongol tutorialnya udah nyari kemana2 ternyata disini

Balas

Info kang ismet selalu bagus..namun rumit untuk pemula

Balas

saya selalu ketinggalan di kangismet ni..
tahnks kang izin praktek

Balas

hehehe.. harus selalu staytune kali :D

Balas

rumit dimananya ya? mohon masukannya... nanti saya perbaiki

Balas

hehehe... makanya ga usah jauh2 :D

Balas

sami2 kang... naha atuh teu ngobrol :D

Balas

mangga mang.. sabaraha kilo :D

Balas

just translate it to english bro :D

Balas

Kapungkur ge tos naroskn, mung piwarang milarian nyalira hikz..hikz... =(

Balas

membuat postingan seperti ini kayaknya membutuhkan waktu hampir satu jam ya kang.. detail sekali penjelasannya. :)

Balas

mas Arif :)

sebelum anda berkomentar silahkan baca dulu narasi tulisan diatas. buatlah sebagaimana kita bertamu kerumah orang =( belajar dulu berkomentar setelah itu baru belajar modif :)

Balas

lebih sob.... lamanya diproses uji coba

Balas

keren gan ,sip :) mau nerapin ke button gimana yah?

Balas

sama aja, tinggal objeknya di tambah class='lightbox'

Balas

mantab abis om bombay, sampai berbinar2 mataku

Balas

itu dah diparse, kalau belum mana bisa masuk komentar, hehehe
udah beres kok saya ganti aja emoticonnya ^_^

Balas

wah makasih mas :D thanks udah share!
- izin bookmark!!!!

Balas

saya sudah praktekkan tutorialnya, tapi jadinya malah bertumpuk gitu
http://i.imgur.com/KYvoRdm.png
cara mengatasinya bagaimana?

Balas

matikan lightbox bawaan blogger !!
Dasboard -> setelan -> pos dan komentar -> Tampilkan gambar dengan Lightbox? klik > tidak

Balas

ijin nyicip kang...
sangat bermanfaat :-d

Balas

http://img845.imageshack.us/img845/8979/7gub.png
kok jadi begini ..gimana caranya kang

Balas

urang geus sering mampir ka blog ieu teh, pan karak nyadar atuh aya postingan iye, alhamdulilah berhasil kang :D

Balas

Kok yg punya saya gak bisa ya kang!! mohon solusinya

Balas

masalahnya di jQuery.. kan udah di tulis di atas. saya lihat ada 2, versi 1.8.3 dan 1.8.2 jQuery cukup satu aja... pake versi 1.7.2

Balas

kang ko saya sama sekali ga bisa kenapa ya ? apa karena templatenya ?
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 :)

Balas

sukses kang,hehe tang kayu =D

Balas

Makasih kang udah di coba dan sukses...
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.

Balas

Mas mau tanya,agar lightbox ini bekerja pada semua url youtube,caranya bagaimana???

Balas

wah izin sedot gan http://wd-kira.blogspot.com/

Balas

gan request donk, buat page album berdasarkan tanggal postingan.

Thanks before.

www.idstudy.com

Balas

Mas , Mohon Bantuan Tentang Tutor Ini ?
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

Balas

framework jquerynya kebanyakan... cukup satu saja perblog

Balas

Kang, saya sudah coba trick ini di template ane sebelumnya dan berhasil =D tetapi setelah ane ganti template kok gak ngefek ya setelah pasang trick ini,,, mohon pencerahannya donk,, trm kasih :-d
oia, templatenya www.tipehandphone.com

Balas

Kang maksadna ur gambar besar sareng kecil kumaha nya?, diantos walerana kang, nuhun sateu acana

Balas

Aduh kang teu kedah diwaler, atos di tinggal tina page source na, nuhun kang

Balas

Kang pami anu inline content na kumaha nya? diantos walerana kang. Nuhun

Balas

Mas, kan ini Jqureynya versi lama, apakah berpengaruh dengan widget yang ber Jquery baru?

Balas
Komentar ini telah dihapus oleh pengarang.

kang mau nanya kalo loremipsumnya digabungin sama gamabrnya bisa apa ga itu..? maklum masih nubiyeh

Balas

Kang Ismet, kenapa yah kalau saya pasang JQuery Lightbox yang gambar album pas dibuka dan lightbox nya muncul tapi gambarnya gak bisa digeser?
Terima kasih. :D

Balas

template saya gak bisa di save.. error dinagian ?lightbox[iframe]=true&lightbox[width]=770&lightbox[height]=460 :(

Balas

coba kode otomatis'nya pake yg ini:
<script type='text/javascript'>
jQuery(document).ready(function(){
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr("class", "lightbox").attr("rel", "wischain").lightbox();
});
</script>


punya ane sukses pakai kode itu..
http://wischain.blogspot.com/

Balas

Poskan Komentar


×
Chat