ADD Blogger Light Box

              ADD Official Blogger Light Box

Most of you might have noticed the Light box overlay display for images on your Blogger Blogs. The feature looks similar to the one in Google Plus. The feature is enabled on all Blogger Blogs by Default.

Some time back I had posted about implementing a Light Box on Blogger. Now such hacks are not necessary Here is a Screen Shot the new LightBox Feature

and here is the Live Demo

When you click on the Small Version of the image, it will open the Bigger Version in the LightBox Over Lay.". These are the keyboard shortcuts supported by the LightBox Overlay:

1.Left / right arrows

2. j/k

3. n/p

All these keys will help you in navigating through the images,

4. Esc to close the LightBox.

Update:

14/10/2011: Blogger has now added an Option to turn off the Light Box Feature

To do that Go to Settings > Posts and Comments and set “Open Images in Lightbox” to “No”

This is the Update From Blogger:

“Updated 09/21/11: After listening to your feedback we've decided to roll back and make improvements to the Lightbox feature. We will update this blog as soon as the feature relaunches.”

For all those who can’t wait till Blogger re-launches the light box, here is a hack :)

Enable the Blogger Light Box

Got to Template > Edit HTML, and add this CSS snippet above </head>

<!--lightboxhack-->
<link href='http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css' rel='stylesheet' type='text/css'/>
<!--/lightboxhack-->

This is the style sheet required to render the LightBox Properly

Now to enable the light box, add this code above </body>

<!--lightboxhack-->
<script type='text/javascript'>
var light_box_enable = document.createElement("script"); 
light_box_enable.src = 'http://blogergadgets.googlecode.com/svn/trunk/enablelightbox.js'; 
document.getElementsByTagName("body")[0].appendChild( light_box_enable ); 
</script>
<!--/lightboxhack-->

Save the Template, and you will see the rolled back Lightbox back again on your Blog :)

You can remove these 2 codes when Blogger comes back with the lightbox :)