Graphic Web Design, Computer Network, Balinese Culture

Lightbox Automatically to All Images for Blogger

Image Sexy Lightbox Evolution has made previously is about to add lightbox class on each images manually. Are you feeling tired to give an effect lighbox manually? Perhaps this would be an idea about ​​how to use the lightbox to all images automatically and how to apply it into your blog, so that no image is left with the effect such a beautiful lightbox, that was i called Image Sexy Lightbox Evolution to all images of the content on your blog post.

The principle is how to recognize the images on your blog and then add the class as a whole on the image. If you are using wordpress, it can be solved by php script, but especially in the blogger, it is still possible can be solved by jquery script with adding lightbox class to all images   automatically. Here you just need to insert jquery add class lightbox all images, but how to apply it on your blog. First of all place the javascript and css link of image sexy lightbox evolution as mentioned in the post previously, if you are not used yet, let's click on the link here!

There are two methods here to recognize and identify the entire images on your blog content that will be added class lightbox

First jquery script:
    $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').addClass("lightbox"); 
Second jquery script:
    $('.lightbox').lightbox(); $('a:has(img)').addClass("lightbox"); 
Choose one of the jquery script in recognition system images on your blog content that will added lightbox class automatically. The point is where you should put the jquery on your template blog.

1. Go to the dashboard of your blog, click on Template>Edit HTML, on the template script press Ctrl+F to find the end of the head template. Then type </head> inside keyword search. You will see the end of the head section of your template. At the end of the head there is usually found a long jquery script.

2. Copy one of the jquery script above, and put it at the last jquery script. For more details let's see the picture below!

Once you insert one of the jquery add class lightbox all images then save it. In this way you no longer need as manual to add lightbox class at every time you make an article, especially for article with many images, it would be most useful. For more details let's see this article video! Good luck!
Share This Article :
Related Articles


  1. sir,

  2. the jquery script already tested, and it works well for me at least, many reasons that cause the script does't work, it depends on the template scripts that you have used which is very possible conflicts.