Home / Tutorial Blog / How to make LightBox with JQuery on the Blog

How to make LightBox with JQuery on the Blog

Posted by Unknown Jumat, 24 Mei 2013 0 komentar

Cara Membuat LightBox dengan JQuery di Blog

LightBox -English meaning box of fire. In the blog lightbox could mean a box that appears when you click or view a picture, a video, an iframe that is on the article. In general each blog default lightbox is already available in the setting-an blogger. However, probably lightbox provided by blogger is not as beautiful as you want. Therefore, on this occasion I will give tutorial how to make LightBox with JQuery on the Blog.

Javascript & CS

Please place the following code just below the 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'/>

Javascript

Then place the following code just above the 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>

Turn Off The Default LightBox

So the lightbox that you set above does not clash with the default lightbox, you must disable your default lightbox. In the following ways

Go to settings

Select the post and Comments

Change the value "show images with Lightbox" to "no"

Good Luck ^_^

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: How to make LightBox with JQuery on the Blog
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://android-rush.blogspot.com/2013/05/how-to-make-lightbox-with-jquery-on-blog.html. Terima kasih sudah singgah membaca artikel ini.