BLOG-ger. SI-nangag (fried rice). it-LOG (fried egg).
All the tricks, hacks and treats while enjoying your breakfast.

Blogger 101. How-to's, tutorials, all the basics you need to learn about Blogger (dot) com.
Blogger Tweaks. Style and dare to tweak your blog. Make it custom. Make it different.
Blogger Fixes. Encountered errors, glitches while blogging? Check here for possible solutions.
Blogger Conditional Tags. If, Else then WHAT? Learn the secret behind most of the tweaks on blogger.

lightweight lightbox on blogger

View demo.

What is Lightbox?
Lightbox permits users to view larger versions of images without having to leave the current page. - Wikipedia

add lightbox on blogger

Which lightbox to use?
There are several lightbox style plugins available on the web. You can compare their features from the file size, javascript library used or type of display support.

See this fantastic LIGHTBOX CLONES MATRIX.

Lightbox on Blogger.
I found this excellent post from DeluxeBlogTips based on jQuery Lightbox plugin.

Lightweight, 9kb in size.
Simple installation.
No need to modify the HTML code to use.
AUTOMATICALLY applies lightbox effect to all images.

How to Install Lightbox on Blogger.
Dont forget to backup your template!

1. Go to EDIT HTML page.
2. Press Ctrl + F. Search for </head>
3. Above </head>, insert the following codes.

<link href="" media="screen" rel="stylesheet" type="text/css" />
<script src="" type="text/javascript"></script>
<script src="" type="text/javascript"></script>


how to style blogger images using a lightweight lightbox

For complete usage of this lightbox clone, check out DeluxeBlogTips post.

Tune in for next tutorial on this series: Lightbox with no Javascript.

Related Websites.
Lightbox Clones Matrix
How to Add Lightbox Effect to Blogger
share. comment. subscribe. link.


<< 1 Shared Thought >>

April 6, 2013 at 10:04 AM

I tried your code and it did get applied but it is taking ages to load the picture that i click on.
All i see is a black overlay with a white box with the loading effect in the middle.

Any help would be highly appreciated


Copy below HTML link to quickly create a link to this post.

back to share

about web.silog
Curabitur sodales leo et quam venenatis eu faucibus quam placerat. Aliquam metus diam, pretium nec commodo at, tristique nec mauris. Vestibulum urna massa, convallis vel laoreet in, ultrices eu nisl. Nulla facilisi. Nam tristique mollis semper. Mauris ac vestibulum lorem. Mauris erat libero, lobortis nec faucibus non, tempor in leo.

Nulla facilisi.
Nulla facilisi.
Nulla facilisi.

about the blogger
My Photo
In hac habitasse platea dictumst. Aenean congue, lacus in sagittis tempus, dui risus pretium nunc, semper bibendum arcu libero sollicitudin diam. Pellentesque lectus lectus, consectetur at sodales sit amet, sollicitudin eu augue.