Using Lightbox2 in blogger / blogspot

If you have tried to click on the photo(s) in my blog post, you will find out that they have the behavior like:

  • Will be pop up .
  • Background turned dark color.
  • The photos will then be emphasized in clear contrast for better viewing.
  • There have the nagivation for next/previous photo, with closed button.
  • The photos will resized corresponding with its own actual size, etc etc.

All of these features appeared is because I have installed the plugin Lightbox2 in wordpress.

I personally feel it is amazing, and would like to share how it work with Blogger / Blogspot.

First, Edit the template

Add these code before the header < /head > tag.

<link href=’http://www.marccus.net/lightbox2/css/lightbox.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>

<script src=’http://www.marccus.net/lightbox2/js/prototype.js’ type=’text/javascript’/>

<script src=’http://www.marccus.net/lightbox2/js/scriptaculous.js?load=effects,builder’ type=’text/javascript’/>

<script src=’http://www.marccus.net/lightbox2/js/lightbox.js’ type=’text/javascript’/>

Second, Upload the images and add “rel” attribute.

Now, when you have uploaded the photos while updating blog post, go to the Edit HTML mode and add rel=”lightbox” inside your < a href = “…. > hyperlink code. Each photo yea~~~

And if you have more than one picture, you need add a group name rel=”lightbox[group1]”.

So your code will be looks like this


Last, then, done, Publish your blog post.

Once done, you may publish your blog and test your photos. =)


Related Post
Disqus Comments Loading...