Official Blogger Light BoxMost 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

image

and here is the Live Demo

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”

image

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

23 comments :

  1. I have this only on one blog, how to enable this manually?

    ReplyDelete
  2. Great for photo albums, awful for journal-styled and information-based blogs where images are more than just a collection of photos. This unannounced imposition has effectively broken thousands of blogs. There's a rumor they're going to "roll it back" - whatever that means.

    ReplyDelete
  3. At this time they have "roll it back", Thas is bad, It was the most interesting features since the invention of the wheel. Is there a way to implement it since they "Roll it back" ?

    Thanks

    ReplyDelete
  4. I don't have it yet. Or at least I don't think so under what situations does the light box appear? Does it pop-up when you click on a lnked image and how does it decide which images to show, it shows all of the images in that post?

    Thanks!

    L

    ReplyDelete
  5. P.S. I just tried the lightbox demo in Opera, Firefox, Chrome and IE and when I click on the image, I just get a bigger image. Is it already "rolled back" or am I clicking on the wrong thing?

    ReplyDelete
  6. yup they have rolled it back. But i guess it will soon be back with some way to control it.

    ReplyDelete
  7. Now that it is rolled back, i have updated the post with script to get it back :)

    ReplyDelete
  8. This was cool. However it did not work with older photos. Hopefully when they relaunch it, this problem will be fixed. And they should at least give you the option to enable/disable the feature.

    Thanks for the update...

    ReplyDelete
  9. Thanks for the script this works find, however on older pics I had to change s1600-h to s1600 to view pics with no additional code changes.

    I have no idea if this is correct but it works. (at the moment...)

    @Andy - I totally agree with you, thousands of blogs have been broken. I returned to blogger last week after a period away to find none of the pics in my older blog posts displayed correctly. I had to edit 100's of pictures, and now they roll it back and break them all again. I have yet to see a simple apology, or did I miss something? :)

    ReplyDelete
  10. Official Blogger Light Box is not working ...
    Thanks for tutorial

    ReplyDelete
  11. I added the code and it works great with Firefox, but when someone views the blog on Internet Explorer, it doesn't work. How do I fix this?

    ReplyDelete
  12. This stopped working this morning. Does anyone have a clue what is going on?

    ReplyDelete
  13. after non active, you make active anymore...xixiixixi
    good good master ;))

    ReplyDelete
  14. Thanks for this tutorial, i apply this "hack" for my blog. :)
    Good job.

    ReplyDelete
  15. i tried ,thans for good gadget

    ReplyDelete
  16. Hi,i have a quastion: Is it possible to remove the thumbnails when there are more than 1 image?! I would remove all che Thumbnail conteiner...and to see the bigger images...thanks...and sorry for my english

    ReplyDelete
  17. If you look onto my blogspot, the lightbox wont appear and yet when i click on the pictures I am to be redirected tot he pictures main source but I've already set the Lightbox on. How come?

    ReplyDelete
  18. I also using the light box effect for my image albums. It prevent wasting of my blog space. And I also made a post on how to do this trick on blogger.

    Anyway nice share. Good luck.

    ReplyDelete
  19. I want to use the official Lightbox on my blog. But it doesn't work. Also when I snippet the code above the [/head] and the [/body] it still doesn't work.
    I have complained this to Blogger. Because it WAS working, and I didn't do anything on my blog, it suddenly disappears.

    What to do? Thanks for the info.

    ReplyDelete
  20. Is there a method to show captions or labels in the official light box?

    ReplyDelete