A better way to show off images using Lightbox V2 in Blogger

Lightbox is a simple but great script used to show images in your website in such a brilliant way. First of all, I would like to give the credit to creator of this brilliant script, Lokesh Dhakar. You can create an image gallery/album to be shown to your blog readers using this great script. If you don’t know what actually Lightbox is, look at the demo at the bottom of the page.

Setup

To install this script to your blog, go to Layout > Edit HTML and find this</head> tag. And now replace that tag with the codes below.

<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js” type=”text/javascript”/>
<script src=’http://files.bloggerplugins.org/lbox/js/scriptaculous.js’ type=’text/javascript’/>
<script src=’http://blogergadgets.googlecode.com/files/lightbox.js’ type=’text/javascript’/>
</head>

And click Save.

Okey, now we are going to add our images. First upload your photos in Blogger. Read this post on hosting your images in Blogger for free.

Single Image

To activate the Lightbox, add a rel="lightbox" attribute to any link tag. For example:

<a href=”your_image_url_here” rel=”lightbox”><img src=”your_image _thumbnail_url_here”>image #1</a>

Optional: Use the title attribute if you want to show a caption.
Demo:

Gallery/Album

If you want to show your images as an album/gallery, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href=”your_image_url_here_1″ rel=”lightbox[albumname]”><img src=”your_image _thumbnail_url_here”>image #1</a>
<a href=”your_image_url_here_2″ rel=”lightbox[albumname]”><img src=”your_image _thumbnail_url_here”>image #2</a>
<a href=”your_image_url_here_3″ rel=”lightbox[albumname]”><img src=”your_image _thumbnail_url_here”>image #3</a>

Demo:

Plants: image 1 0f 4 thumb
Plants: image 2 0f 4 thumb
Plants: image 3 0f 4 thumb

There are no limits to the number of image sets per page or how many images are allowed in each set.

7 Replies to “A better way to show off images using Lightbox V2 in Blogger”

  1. @Buythecow…

    Hi, I know where is your problem. Don't worry. You've installed the lightbox correcty exactly as I mentioned. The problem is in your post.

    Now follow these steps:-

    1. Go to Edit Post > Edit HTML > and search for the following piece of code.

    <a style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" 1="" rel="lightbox[albumname] imageanchor=" href="http://2.bp.blogspot.com/_b8QgIHOxM-s/S2iA9XG-v9I/AAAAAAAAA_E/YhjmgY6Ni_U/s1600-h/decade-01.jpg"><img border="0" src="http://2.bp.blogspot.com/_b8QgIHOxM-s/S2iA9XG-v9I/AAAAAAAAA_E/YhjmgY6Ni_U/s320/decade-01.jpg"></a&gt;

    2. Problem is here in this piece of code.

    href="http://2.bp.blogspot.com/_b8QgIHOxM-s/S2iA9XG-v9I/AAAAAAAAA_E/YhjmgY6Ni_U/s1600-h/decade-01.jpg&quot;

    3. Remove ( -h ) from the url.

    Before removing ( s1600-h )
    After removing ( s1600 )

    4. Publish your post…

    5. View your post and click on the image….It will work..^_^ !!

    This is because the lightbox needs the original source of the image to display..read this blogger image hack/trick to understand about it….

    http://introblogger.blogspot.com/2009/12/free-image-hosting-with-unlimited.html

  2. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "script" must be terminated by the matching end-tag "

  3. Hi Saisayan…Sorry for the problem…It seems I've missed a "/" for the closing "</script> tag of first javascript code in the box….So, it caused the problem..

    I've edited the post..Thanks for your information =)

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.