Implementing jsBloggerLightbox in Blogger

jsBloggerLigthbox is based on jQuery framework and is created by James Simpson of J.S. Blog Stop (A great resource for Blogger Related Tutorials).

The one thing that makes this different from other Lightbox scripts is its easy of integration. Normally when you add a Lightbox in a website ,you have to fiddle with the HTML of  all the elements (Images,iFrame,etc) to which you have to apply the Lightboxing effect but in the case of jsBloggerLightbox you just have to include the script and the rest is taken care by it.

Currently it only supports images.

Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.(Firstly Backup your Template)

3.Now search for the </head> tag and paste the following code just Above/Before it.

<script src='http://code.jquery.com/jquery-latest.js'></script> 
<script src='http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js' type='text/javascript'></script> 

This Lightbox automatically detects images and display them in the overlay window.

2.Go to the Post/Page you want to add jsBloggerLightbox and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script src='http://code.jquery.com/jquery-latest.js'></script> 
<script src='http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js' type='text/javascript'></script> 

This Lightbox automatically detects images and display them in the overlay window.

4.Now save the Post/Page.