lightbox Image viewer for blogger

Its normally very hard with blogger pages when we click on an image. It opens the image on the browser.
When i roam around to find any alternative to show the pictures on a separate shadow pop-up, I found some cool script which uses scriptaculous and prototype. Follows the steps.

1. Login to your blogger Layout
2. Click on Edit HTML
3. Find the </head> tag and replace it with the following


<!--Light Box Code Starts-->
<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/AVvXsEhC_yJAcOEkSEMz9nY1plUueDm9hAXs6a0pWpd0KLS-LOBCP2tkrwWNSguDFamzeOZI92Xa-8Qfrq0ec54ykqVTr9V69AXDtTjUZzU-zNJee1jiSDalmSIfMPMwV80_ZTV51dEaaPQrdJQ/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiv_400Cc-0KEv58lTiWdFIeMMqvQkpFmtgMpfI2uxvEZdi9qAO3rc_Exfvz0cmp63F9T136P5qbcN5xGsnSj4unLgo4CIbrXSz1sRqGnxfeGI5divmuq_bfVej8t9beLZXBua5DsdcXE/) 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.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://script.aculo.us/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends-->
</head>


Now you have enabled javascript based lightbox.

        

To enable this to the images you upload, do the following

1. Insert Image
2. Switch the editor to 'Edit HTML'

There is an anchor tag for each of the picture you uploaded.
Insert the following code if you want to open the image as separate one ( there is no next, prev)

rel = "lightbox" title = "Caption of your Image"

Insert the following code, if your image is part of an album (set of images)

 rel = "lightbox[album_name]" title = "Caption of your Image"

Sometimes, the image is too bigger for showing on the window. To handle that, Check the 'href' value of the anchor. There you can find something like '/s1600' (if you found '/s1600-h', remove '-h'). s1600 means the x-large or original size of the image. so you can replace it with '/s640', which is suitable within the monitor.

Examples

• Single Image

• Album Images