This blog has moved here: www.bloggermint.com
Rethnaraj Rambabu Sunday, January 31, 2010

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSLbVnrIPDeVzzoJJ8fnTv8ZvHCeXEWqAXOY1hIjTtC14yL9PE3nMFStS5t1axfMYN4UlFo_PkoNCOuqZla3sZpOnNVanoo6HnY4u8JpUS2YboB6AbGWFwTMx8xFsTWPHMBhv8P0O1Kk/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-4tbbkvla1tTmtKxYle4vWX85e6hlYTg5S4lYYodN1_4e4w4turN_hnOEW9_vTwFR0xHBSFkqAkr1P570mO4gUARq8oKvlG6_-edOZd6QAvbRl_3fhINjxTD6upRs-5fiD_P9N4zwYLM/) 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.


9 comments:

buythecow said...

Why my Lightbox did not work?
<a href='http://stickynoise.blogspot.com>http://stickynoise.blogspot.com</a>

Rethnaraj Rambabu said...

@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>

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"

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

buythecow said...

Thank you very much!!

Rethnaraj Rambabu said...

@buythecow...

You are welcome...Glad to see lighbox working in your page..^_^ !! You have a great looking blog..

saisayan said...

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 "

Rethnaraj Rambabu said...

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 =)

saisayan said...

Thanks a lot brother. its working..

TV Magia said...

Is there a way to insert by default rel="lightbox" to all images?

Mariana Garcia said...

I have the same question :

" Is there a way to insert by default rel="lightbox" to all images?"

I already have around 500 posts when I configured the lightbox feature and it's a really annoying job put it manually in all the images.

If you know a way I really would appreciate to know it!

Thanks a lot for sharing! =)

Post a Comment

Copyright 2010 Introblogger
Designed by Rethnaraj Rambabu
Introblogger | The free blogging guide - Blogged Web Statistics