Tag: Smilebox (WordPress plugin)

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

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.

my light box setup
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

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

    4. Blogger Dashboard -- Design

  4. Their search for <head> opening tag
  5. Copy-past the below code just after the <head> opening tag
    6. <!-- 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 -->
  6. Click on SAVE TEMPLATE button

    7. Design -- Edit HTML

  7. 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
  8. Go to Blogger.com
  9. Login to your account
  10. Now go to NEW POST
  11. Compete your post (write, insert, whatever you want to do in that post)
  12. After you competed (also inserted the image) click on Edit HTML tab
  13. Add this code in every a tag before every img tag
    14. 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>

    Blog Post -- Edit HTML

  14. Now change the ALBUM-NAME and IMAGE-CAPTION with your album name and image caption
  15. 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.