Lightbox For Blogger

Tweet

Lightbox is a script used to overlay images on a web page. It's very popular among blogs especially photoblogs. There is a Wordpress plugin available to easily apply the lightbox effect on your Wordpress blogs. But there are also way on how to use lightbox on your Blogger or Blogspot blogs.

The process is very, very simple.

First, go to your Blogger HTML editor. Then place the following code directly above the </head> tag:

<!--Light Box Code Starts Bloggerplugins.ORG-->
<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&gt;#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; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<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://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->

source: http://www.bloggerplugins.org

Then Save, obvisouly.


The basic syntax to apply the Lightbox effect is as follows:

<a rel="lightbox" href="URLOFTHEIMAGE" title="TITLEOFTHEIMAGE"> <img src="URLOFTHEIMAGE"></a>

For albums with Lightbox -

<a rel="lightbox[ALBUMNAMEHERE]" href="URLOFTHEIMAGE" title="TITLEOFTHEIMAGE"> <img src="URLOFTHEIMAGE"></a>

If you are familiar with HTML, you'll see that we just linked the image to it's source and added the rel="lightbox" parameter. Simple, right? If you don't get it, don't worry. You don't have to. I'll explain how to use it when uploading pictures on Blogger.

When you upload an image in Blogger, it looks like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s1600/IMAGE.jpg"><img style="cursor:pointer; cursor:hand;width: 170px; height: 147px;" src="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s400/IMAGE.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5579988618177990914" /></a>

Get rid of this part (colored RED): (It's practically useless. I don't know why Blogspot still puts that in.)

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s1600/IMAGE.jpg"><img style="cursor:pointer; cursor:hand;width: 170px; height: 147px;" src="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s400/IMAGE.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5579988618177990914" /></a>

Moving on, put in this right after the <a part :

rel="lightbox" title="TITLEOFYOURIMAGE"

if you want to use a Lightbox album or gallery, use this:

rel="lightbox[NAMEOFTHEALBUM]" title="TITLEOFYOURIMAGE"

The NAMEOFTHEALBUM is the same for all the pictures you want in the same album.

So your code would look something like this now:

<a rel="lightbox[NAMEOFTHEALBUM]" title="TITLEOFYOURIMAGE" href="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s1600/IMAGE.jpg"><img style="cursor:pointer; cursor:hand;width: 170px; height: 147px;" src="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s400/IMAGE.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5579988618177990914" /></a>

(Newly added code on green)

Viola! You now have a Lightbox effect on your Blogger blog!

Further tweaking:

See the width: 170px; height: 147px;" part? You can play with those values to get the right size of the image thumbnail you want.

Personally, I just remove it totally and set all the image heights to a constant value for all images (I often use 200). It looks cleaner that way. I use the height="YOURDESIREDHEIGHT" command instead of height: YOURDESIREDHEIGHTpx; because it's easier and Blogspot auto-scales if you don't set a width.

That means you can remove the whole width: 170px; height: 147px;" part and just replace it with height="YOURDESIREDHEIGHT".

It'll look like this:

<a rel="lightbox[NAMEOFTHEALBUM]" title="TITLEOFYOURIMAGE" href="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s1600/IMAGE.jpg"><img style="cursor:pointer; cursor:hand; height="200" src="http://4.bp.blogspot.com/-UQ2u8WggqW4/TXAaFY040QI/AAAAAAAACEo/he3Gc1O4gLc/s400/IMAGE.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5579988618177990914" /></a>

For those with knowledge in coding, this is pretty straight-forward. But if you are a little overwhelmend, don't hesitate to ask me questions. :)

Stay tuned for an update on how I semi-automated all this and made the images more SEO friendly. :)
Tweet