Effects – Saket Jajodia

Hi! Everyone, hope you all are fine.
Today in this post I will tell you how you can use Light Box in Blogger.com blog. Light Box is an image viewer and all of you must have show the Image viewer on my blog, if you didn’t show click on the below image to see demo.

Image credit: IceBone

When I was on Blogger.com I wanted this feature on my Blogger.com blog but didn’t knew how I can use it but when I shifted to WordPress I finally got it on my blog and if you are also on WordPress you can use Slimbox plugin. And if you are Blogger.com user and want this on your Blogger.com blog here how can

Go to Blogger.com
Login to your account
Now go to Design –> Edit HTML

Their search for <head> opening tag
Copy-past the below code just after the <head> opening tag

<!-- Light Box Code Starts SJbn.Co -->
<link href='http://img.sjbn.co/lightbox-2.04/css/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='http://jajodiasaket.googlecode.com/files/lightbox2.04-lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends SJbn.Co -->

Click on SAVE TEMPLATE button

Now whenever you make a post with images and you want to use this effect on that image copy you need to do the following
Go to Blogger.com
Login to your account
Now go to NEW POST
Compete your post (write, insert, whatever you want to do in that post)
After you competed (also inserted the image) click on Edit HTML tab
Add this code in every a tag before every img tag

rel="lightbox[ALBUM-NAME]" title="IMAGE-CAPTION"

For example see below
<a rel="lightbox[ALBUM-NAME]" title="IMAGE-CAPTION" href="http://3.bp.blogspot.com/_drKDGeYmwR4/TUwHK7std9I/AAAAAAAAA4s/zhLtImp_IFM/s1600/13330_102591409783669_100000984317950_19515_280045_n.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="288" src="http://3.bp.blogspot.com/_drKDGeYmwR4/TUwHK7std9I/AAAAAAAAA4s/zhLtImp_IFM/s320/13330_102591409783669_100000984317950_19515_280045_n.jpg" width="320" /></a>

Now change the ALBUM-NAME and IMAGE-CAPTION with your album name and image caption
And publish the post

Click here to see Light Box demo on Blogger.com blog

You can use the left and right arrow key to change the image and Esc to close Light Box. If you want to make more than one set (album) of images in same page change the album name in the other set. The difference between in both the set (album) is you can’t change the image without closing the image viewer (Light Box)

Thanks to Lokesh Dhakar for making this codes.

If you have any question or problems do let me know.

Tag: Effects

How To Disable And Enable Blogger’s New Image Lightbox View

Create Funny Photos Of Your Friends With Haribo TangFastics (TangFace)

Give Many Different Kinds Of Old/Vantage Effect To Your Photos With Rollip

Image Light Box For Blogger.com Blog And WordPress Blog Users