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(){
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').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
- Masuk ke setelan
- Pilih Pos dan Komentar
- Ubah value "Tampilkan gambar dengan Lightbox" menjadi "Tidak"
Hasilnya akan seperti yang ada di blog hack4rt ini.
 |
| ScreenShot oleh Fachrul Rizak (GPlus Comment) |
Home