Saturday, March 5, 2011

Auto apply lightbox effect to all images

In my blog ,DJ Remix Town asked me for how to auto applied Lightbox effect to all images uploaded ,do not need to edit HTML and add rel="lightbox" manually. And now I have the answer for this question :

How to do this ?

First ,you need to read this post and follow all my instruction for install jquery lightbox to blog .

The magic is on the second step ,find and replace this code
<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>

with this

<script type="text/javascript">
$(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>

The difference between them is this line $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox(); 
This line mean Lightbox effect will be applied to all <a ...> tag which has an <img> tag inside ,and the href attribute of a tag is a link to image file (with the extension : gif,bmp,jpeg,png,jpg)

From now ,you can upload and insert images to your post using uploader in post editor window and don't care for the rest . Lightbox effect will be applied to all images .

No comments:

Post a Comment