jQuery Lightbox Evolution - Image-Video

jQuery Lightbox Evolution - Image-SWF-Video, adalah alat untuk menampilkan gambar, konten html, peta, dan video dalam gaya "lightbox" yang mengambang pada halaman web. Menggunakan Lightbox ini, author web dapat menampilkan berbagai macam media di semua browser utama tanpa menavigasi pengguna jauh dari halaman yang terhubung.

Tapi disini saya hanya akan memberikan tutorial bagaimana cara mengapklikasikan lightbox ini untuk Gambar dan Video, bagi yang ingin tahu cara untuk aplikasikan SWF dan HTML silahkan contact saya. lihat Contoh dibawah!
jQuery Lightbox Evolution - Image-Video
KLIK UNTUK MEMBUKA LIGHTBOX!

Langsung saja copy paste script dibawah ini, lalu kemudian buka EDIT HTML kemudian simpan kode ini diatas kode </head>
<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-1.7.min.js' type='text/javascript'/>
<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery.lightbox.js' type='text/javascript'/>
<script src='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/imagenvideo.js' type='text/javascript'/>
<link href='http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-lightbox.css' rel='stylesheet' type='text/css'/>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://ganteng-project.googlecode.com/svn/trunk/LightboxEvo/jquery-lightbox-ie6.css" /><![endif]-->
Setelah itu save template anda. jQuery telah terpasang di template anda.

Cara Menerapkan Lightbox

cukup tambahkan kode class="lightbox" pada kode gambar anda, perhatikan contoh penerapan dibawah ini
<a href="assets/7.jpg" title="Image Description" class="lightbox"><img src="assets/m7.jpg" alt=""/></a>
Anda juga dapat membuat gambar dalam 1 grup (galeri gambar) dengan menambahkan kode rel="blah...blah...", contoh penerapan lihat dibawah.!
<a href="assets/5.jpg" class="lightbox" rel="group1"><img src="assets/m5.jpg" alt=""/></a>
<a href="assets/9.jpg" class="lightbox" rel="group1"><img src="assets/m9.jpg" alt=""/></a>
<a href="assets/6.jpg" class="lightbox" rel="group1" title="Lorem ipsum dolor sit amet..."><img src="assets/m6.jpg" alt=""/></a>
cara menerapkan video lightbox dari berbagai provider video sharing.
<a href="http://www.youtube.com/watch?v=TsUD1za9TA4" class="lightbox">youtube</a>
<a href="http://www.vimeo.com/12421175" class="lightbox"><img src="assets/m13.jpg" alt=""/>vimeo</a>
<a href="http://www.metacafe.com/watch/yt-nn096G5jek0/coldplay_speed_of_sound_acoustic/" class="lightbox">metacafe</a>
<a href="http://www.dailymotion.com/video/x53dvz_fragma-toca-s-miracle-2008_music" class="lightbox">dailymotion</a>
<a href="http://video.google.com/videoplay?docid=-8618166999532839788" class="lightbox">google video</a>
Gimana sobat blogger ?
simple banget kan :)
Kalau masih ada yang belum jelas, silahkan berkomentar dibawah

Hope You Enjoy \m/
Bagikan ke Teman ›
om-dayz lintasme
om-dayz facebook share
om-dayz Tweet Button
om-dayz digg Submitter

68 komentar Untuk jQuery Lightbox Evolution - Image-Video

  1. wew gagl pertmax :"(

    yang penting nice

    BalasHapus
  2. Mantap nih tutornya sob, ane coba dulu ah,, thanks sobat

    BalasHapus
  3. Keren . . .
    tapi pembaca pasti belum tentu tau kalo imagenya itu bisa di klik, gan.

    BalasHapus
  4. ihhh sumpah keren abiieexx!!!! jadi ada efek bounchingnya

    BalasHapus
  5. @All
    wkwkwk,, silahkan coba :D
    @Guru Tiktak
    lightbox ini bukan hanya untuk gambar masbro :)
    HTML - SWF - VIDEO jga bisa :)

    BalasHapus
  6. keren abis OM wah pinteer jquery nih

    BalasHapus
  7. berkunjung ke blog sahabat nan keren... sangat membantu sekali infonya gan.. makasih kawan kkl ada info baru ksh kabar ya?

    BalasHapus
  8. mantap gan
    bener-bener menarik
    tadi sebelum melihat contohnya malah bingung ne apaan
    ketika saya lihat
    hemmmm menarik banget

    BalasHapus
  9. Jempol buat om nih jquery nih..keren abis....Ijin jalan ke TeKaPe sob

    BalasHapus
  10. wah keren banget sob, tapi kok contoh vidoenya diatas gak sama2?

    BalasHapus
  11. Wah Amazing sob, Jempol Empat.Izin menyimak dulu, soalnya masih belum familiar maklum gaptek hihihi

    BalasHapus
  12. keren gan,, memang jagonya nie agan yg satu ini :D

    BalasHapus
  13. Wah... Mantap ni... :D
    Cobain ah :p

    BalasHapus
  14. hemmh,,,gimana ya gan,,hehehehe..ummmmm,,,masih pusing gan,,belom ngerti,,maaaf ya,,,
    tapi terima kasih nih buat infonya,,

    BalasHapus
  15. @All
    hehehe,, silahkan dicoba masbro, makasih ya atas kunjungannya :)
    @Liandri,
    gk sama gmna masbro ?
    @Jellygamadt
    pusingnya di bagian mana masbro :) ?

    BalasHapus
  16. Boleh juga tipsnya gan. Tapi mungkin untuk yang lebih membutuhkan Saja tips ini manfaat, untuk Saya mungkin nanti. :)

    BalasHapus
  17. Wah,lain kali bisa di praktekin nih Sob :D

    BalasHapus
  18. sorry baru berkunjung masbro , boleh di coba nih :) , master kode nih :D

    BalasHapus
  19. Nice share Boss, jd pengin di paraktekin langsung :D

    BalasHapus
  20. Makasih ni om infonya, jadi tambah ilmu lagi ni,,

    BalasHapus
  21. mantap kuadrat bro *smile.., mgkn bisa diterapkan tuk buka tamu dll.., nice post sobat..!

    BalasHapus
  22. Mantab neh artikelnya............nambah ilmu lagi deh.......

    BalasHapus
  23. waah, keren nih gan :)
    thanks yaa udah diundang ..

    BalasHapus
  24. di bilang "simple banget" sepertinya salah sob huahahahaha wkow keren sih keren sob. berat gak ?

    BalasHapus
  25. masho , ga update-update niih ?? ditunggu info info bermanfaat lainnya

    BalasHapus
  26. keren...keren sob, pantas untuk dicoba

    BalasHapus
  27. wah ane nunggu posting terbarunya ni gan..
    sukses selalu ya :))

    BalasHapus
  28. wew mantap om :D
    kayak buka tutup gitu deh :v :v

    BalasHapus
  29. gokil kren banget om,om pinter banget main jQuerynya

    BalasHapus
  30. kunjungan lagi ah ketempatnya sobat dayz :D hihihi numpang ngintip postingan barunya

    BalasHapus
  31. masih gagal pertamnya ni mas bro

    BalasHapus
  32. itu sob yg CONTOH VIDEO LIGHTBOX DARI YOUTUBE, beda y.

    BalasHapus
  33. wah selalu manteb neh om dayz. . masternya neh om :)

    BalasHapus
  34. wah, ribet kalau bikin sendiri, izin coba dulu gan jquerynya, master coding niy sepertinya :)

    BalasHapus
  35. Blogwalking :D, Kunjungi balik dan kasih komentar ya sob! :D

    BalasHapus
  36. @All
    makasih bnyk atas kunjungannya yah :)
    kamsiah kamsiah :D

    BalasHapus
  37. @Liandri Eko
    beda apanya masbro :/ ?
    gak beda kok

    BalasHapus
  38. wuih..........muaknyus tenan gan........

    BalasHapus
  39. makasih mas bro.. keren! you are crestive!!

    BalasHapus
  40. mantap bro infonya, creatif banget gan

    BalasHapus
  41. wah ada tutor seru nih, ane coba dulu aja deh..kalau ngga bisa ane nanya ya sob..
    gapapa kan ? hehe :D

    BalasHapus
  42. mantap mas tutor nya...
    boleh di kirim mas sourse lengkapnya ke email saya mas
    romihardianto53@yahoo.com
    makasi ya mas.. :)

    BalasHapus
  43. keren,.. cuman bagaimana menghilangkan border hitam pada lightbox video ?

    BalasHapus
  44. hehehe... sudah di terapkan.. nice tutorial om day.. ouh ia.. visit ya om.. semoga blog saya bisa membantu inspirasi..

    BalasHapus
  45. Tips, trik serta hiburan yang ajibb Cuma ada disini..
    _maksih yah untuk artikel yang telah di sajikan diblog ini..tetap semangat mengarungi serunya dunia bloging
    :D

    BalasHapus
  46. Terimakasi Om dayz, yang swf Om ?

    BalasHapus
  47. biar setiap post image langsung kena llight box gimmana om??
    template salah 1 blog saya dipakein light box bawaan blogger gambarnya ga mau muncul pake lightbox... thx :D

    BalasHapus

Follow Me On Twitter Facebook Fanspage Circle Me On Google Plus Subscribe to RSS Feed