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

ScreenShot oleh Fachrul Rizak (GPlus Comment)