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.

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"
   
   
   ScreenShot oleh Fachrul Rizak (GPlus Comment)
   
   

   Sumber