Cara Membuat LightBox dengan JQuery di Blog

Cara Membuat LightBox dengan JQuery di Blog
LightBox - dalam bahasa indonesia berarti kotak yang bercahaya. Dalam blog lightbox bisa berarti kotak yang muncul pada saat mengklik atau melihat suatu gambar, video, iframe yang ada pada artikel. Pada umumnya setiap blog sudah tersedia lightbox default yang ada pada setting-an blogger. Namun, mungkin lightbox yang disediakan oleh blogger tidaklah seindah yang anda inginkan. Maka dari itu, pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat LightBox dengan JQuery di Blog.

Javascript & CSS

Silahkan letakkan kode berikut tepat di bawah tag </head>
<script src='http://js.hack4rt.us/jquery-1.7.min.js' type='text/javascript'/>
<script src='http://js.hack4rt.us/jquery.lightbox.js' type='text/javascript'/>
<script src='http://js.hack4rt.us/imageandvideo.js' type='text/javascript'/>
<link href='http://js.hack4rt.us/jquery-lightbox.css' rel='stylesheet' type='text/css'/>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="http://js.hack4rt.us/jquery-lightbox-ie6.css" /><![endif]-->

Javascript

Kemudian letakkan kode berikut tepat di atas tag </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>

Matikan LightBox Bawaan

Agar lightbox yang anda tetapkan di atas tadi tidak bentrok dengan lightbox bawaan, anda harus menonaktifkan lightbox bawaan anda. Dengan cara berikut
  1. Masuk ke setelan
  2. Pilih Pos dan Komentar
  3. Ubah value "Tampilkan gambar dengan Lightbox" menjadi "Tidak"
Hasilnya akan seperti yang ada di blog hack4rt ini.
Cara Membuat LightBox dengan JQuery di Blog
ScreenShot oleh Fachrul Rizak (GPlus Comment)

0 komentar:

• Link hidup dalam komentar akan terhapus secara otomatis.
• Untuk menyisipkan kode gunakan tag : [code] Kode Anda Di Sini [/code].
• Untuk menyisipkan gambar gunakan tag : [img] URL Gambar Anda [/img].
• Untuk menyisipkan video gunakan tag : [youtube] URL Video Anda [/youtube].
• Anda juga bisa menambahakn emoticon seperti biasa.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode !!!"
Konversi Kode di Sini ! Emoticon