Light Box Image Viewer For Blogger

Light box is a really elegant image viewer addon using javascript and the prototype framework. First of all i would like to give the credits to the original maker of Light box,Lokesh Dhakar

I have also added some demos of Lightbox to this page.So if you are not sure,what lightbox is,then take a look at the two demos in this Post.This will really help you in building a well styled gallery like blog.

Installation Steps

1.Login to your Blogger Dashboard

2.Go to Design > Edit HTML

3.Find this piece of code

</head>

and replace it with

<!--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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLtUBHJdsTwV2IkPxTitXqQkd6thyphenhyphenu_87XlAqiOXSbgAJuh38BW-abWsOdWQ-VhQVWcbCUZNx3XD655JN86gumiez-9sK2lkui8G6v_x86JhoHww-UBcSTgNOVckvPz_8X5WGIa1dgmRs/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggxF9BtSWJhyphenhyphen3gSKA6zkKNzJ9UvPHlWXhTegSf2NI8WCjZnPA_LZBBizfijxZEGb_KScKVdAChjTC3yXQG8u2x2ugiXy8iLvwgzHnbQMfO6WeqAJ2wJy8tLdZW93BycM-N21jeracK4so/) 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.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-->
</head>

Adding Images for the Lightbox Viewer

Now you have added the scripts and styles needed for the lightbox.Next part is to add our images..

You can also add captions to your images and also group multiple images into albums. First upload your photo using the blogger photo upload tool.Now switch to the edit html view from the post editor

See the instructions in these images. (Click to view a bigger version.. :))

imageimage

Make sure that you delete the -h from s1600-h .Now you should be able to see the image(which you uploaded) in an overlay LightBox

Options Explained...

adding rel="lightbox" title="Your image Caption" will create a lightbox viewer for the single image.

Demo of a Single Image

Creating an album with light box

If you are making an album out of multiple images, then add rel="lightbox[albumname]" title="Your Image Caption"  to each of the images present in that album. Images with the same albumname will constitute a single Light box overlay, and you can traverse through the album using the Next and Previous Buttons. Images in an album can obviously have different captions, but a common albumname. You can make multiple albums in a single post by choosing different album names.

Demo of a Light Box Album

Did you notice that your keyboard arrow keys can be used to navigate through the album? :) I hope this would be very useful for those who own a photography blog.If you have any troubles in implementing this,you can surely contact me via comments or @ Blogger Forums. If you are reading this in a feed reader,the Demos won’t be displayed. To see the demos, visit the actual post page

Comments

  1. I would love to figure this out, but IE keeps aborting your site. I am viewing this on my iPhone.

    ReplyDelete
  2. Hello Aneesh,

    Thanks for this great trick :)

    But i have certain queries :

    1. The image opens in a new window for me. Any problem with coding?

    2. How can a visitor save pictures? I could not see any option in this trick and i use free downloadable images on my blog.

    Thanks in advance

    http://shirdisaibababhajan.blogspot.com/

    ReplyDelete
  3. @Ms Hetal Patil
    the imgage opens like in normal post pages because you havent added the rel tag properly.. this is what i see in firefox's view source
    rel=”lightbox” title=”© Download Shirdi Sai Baba Bhajans Mp3 Artis”

    and this is what i should have seen
    rel="lightbox" title="Download Shirdi Sai Baba Bhajans Mp3 Artist";

    try eding the post once again.
    @Marie Burton ,
    i ddin't know that my site had display errors in IE. It works for me in IE8.. I will download IE tester and fix it soon!!

    ReplyDelete
  4. @Ms Hetal Patil,
    i forgot to mention something..
    its not possible to provide an easy download link.. :(

    ReplyDelete
  5. Hello Aneesh,

    Thanks for your instant reply.

    ReplyDelete
  6. hello dear
    it is not working on my blog
    check this url

    http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html

    i have done the same

    simple work
    1. just include style and js files under head section and then

    post new using rel attribute

    but it is not workin
    do u tell me what may be the problem

    ReplyDelete
  7. @The King Khan it working fine on my blog.. you will have to wait until the page is completely loaded.. if you click on the image before that, you will be taken to the normal image link.

    if you can show me the url where you tried it,then i can help you out..

    ReplyDelete
  8. the problem is with the " , my " is diferent , so what i did is change yours ", and now is working fine, your key pad is diferent to the americans...

    ReplyDelete
  9. @vaga
    you are right.. i don't know where i got that different " sign.. My keyboard too has the same layout..thanks for notifying!! i have change it..

    ReplyDelete
  10. Thanks for posting this! I've been looking for a better way to present my pictures =) Just curious, though... Is there any way to get the image to open at the top of the page? Or re-size a larger image and the containers to fit on the screen? I tried fiddling with the code but had no luck. I'd greatly appreciate any help you can give! Thanks =)

    ReplyDelete
  11. @K ,
    lightbox is a much popular thing and there are sevaral variants of the original lightbox.One of them is lytebox.This one supports automatic resizing and also has slideshow feature,and it can also display a webpage within the lightbox.So i think this one will meet your needs.

    ReplyDelete
  12. and probably my next post would be about lytebox!!

    ReplyDelete
  13. My friend, thanks for a plug-in..but the plug-in didn't work for me..

    http://c905phy.blogspot.com/2009/08/bw-penang-ferry.html

    you can view here..

    ReplyDelete
  14. @myfr3ak i don't see any light box code in your template other than the fact that you added rel=lightbox" to the image!!

    ReplyDelete
  15. I really like this lightbox feature, but after pasting the code right where you indicate, and trying to save the changes, I get this:

    - 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 "html" must be terminated by the matching end-tag "". -

    I have very basic (almost inexistent) understanding of HTML, and have no idea how to fix this. :/

    ReplyDelete
  16. @lesser goddess
    Contact me via the contact form or @ Blogger Forums. I can help you out. :) or mail me directly at aneesh[at]bloggerplugins.org

    ReplyDelete
  17. I have a scrolling carousel of images at the top of my design and this script interferes with it. I would love to use it, though; if I put it in the correct place, it disables the scrolling carousel. :(

    http://neophytephotographer.blogspot.com

    ReplyDelete
  18. @Lynn Thomas
    try lytebox. It doesn't normally comflict with other scripts. Read more about it in this forum thread

    ReplyDelete
  19. Hey! Great tip using the Light Box Image Viewer. I have a problem though. For some reason, when I insert the code, it would disable all other javascript features, but the lightbox works. For example, it would disable my glider and tabbed navigation, which are using javascripts. I find this really odd. Hope you can help.

    My blog is located at: http://avongenesis.tk

    ReplyDelete
  20. @AvonGenesis,
    the other widgets that you mentioned also should be using Jquery.This might have caused conflicts..So if you can't debug it,go for lytebox .You can see a discussion at the forums..

    ReplyDelete
  21. it is not working.

    ReplyDelete
  22. @Aneesh Thanks for the recommendation of using Lytebox instead! Works perfect. One problem though, my images don't seem to have the "close" button when they are being viewed. This isn't a problem since they can easily be closed by clicking outside the image area/pressing escape, but it would be nice to see that button there. Any ideas?

    ReplyDelete
  23. @AvonGenesis,
    thats because you didn't edit the css and js file properly.For it to work you have to upload all those images by yourselves and change the image references in the scrip and CSS with the actual urls where you have uploaded them to.. Its explained there in the forum. please read all posts in that topic..

    ReplyDelete
  24. One big issue that I have experienced with this feature is that not showing properly in IE8. When I added the code, lightbox working perfectly on other browsers even IE6 and FF but many of my friends said my blog does not load fully, just 1/3 of homepage in IE8. I immediately remove the code for lightbox, then it works again, please help fix this for IE8

    ReplyDelete
  25. I have edited the .js and .css file with the image links. They were showing before but disappeared suddenly so thats why I left a comment here. Now I have a new problem. Apparently, the lytebox doesn't seem to be working anymore? No settings were changed since they were working properly. I have checked to make sure that they are inserted correctly into my blog and that the .js and .css files are online. Any ideas?

    ReplyDelete
  26. it is not working on templates given by blogger on create a blog.

    ReplyDelete
  27. i have problem with my blog when open it in IE..anyone can solve it??

    ReplyDelete
  28. HI i looking for this for a long time, i tried in my the first to images of my portfolio, but only display the loading image and not the image itself. Can u help me please, love love your blog.

    http://www.betancur.co.cc/

    Tnx

    ReplyDelete
  29. you might have forgot to remove -h

    ReplyDelete
  30. It is working with me :) , thanks
    http://www.walidlab.com/2009/09/2009_23.html

    ReplyDelete
  31. THANK YOU!!!!!!!THIS IS THE BEST WEBPAGE IVE EVER SEEN, WHICH EXPLAINS HOW TO ADD A LIGHTBOX !!
    THANKS A MILLION!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete
  32. Hello admin, this code do not work on IE8, the page can't fully load when this codes are added. please fix this issue. tq

    ReplyDelete
  33. Hello Aneesh, please fix the codes pls, it doesn't work anymore. Please.

    ReplyDelete
  34. I can confirmed this that the code work on IE8, Firefox latest build, and Chrome 4. For easy editing, you can use Windows Live Writer but you need to remove "-h" inside the html code after posting it..

    ReplyDelete
  35. This widget is a great solution for my gallery page. Really thanks to Aneesh for sharing this! I m juz looking around to find something
    like this when accidently i found this site and WOWW!!! This site is really amazing,hahaha..it change my profile a lot..thanks again sir Aneesh!

    ReplyDelete
  36. why do multiple images become staggered on the page?

    ReplyDelete
  37. Thank you SO much for this! Just testing it on our newly started company blog now, and will definitely be using this for showing our portfolio of work :)

    You can find us at http://www.eggedosis.no - although at the moment we are still just testing stuff ;)

    ReplyDelete
  38. Great page, it was so usefull this is my blog, criaderobsp.blogspot.com check it out ;)

    ReplyDelete
  39. i m follow all the instruction but where i past the

    rel="lightbox" title="Your image Caption" this code becoz the code show in image i m not found in my html editor post page i m trying this code in my testing blog so any help
    testing blog
    http://downloads-nisha.blogspot.com

    ReplyDelete
  40. It's a nice plug-in, although I couldn't make the album"version" work. I'll just stick with the single image viewer.

    Thank you!

    ReplyDelete
  41. hello Aneesh
    can u tell me how y make gallry photo sise by side when i m making it shoeing 2nd photo below the first phpoto pls help me

    http://esydownloads.blogspot.com

    i doning all this work to my testing blog

    http://downloads-nisha.blogspot.com

    ReplyDelete
  42. Doesn't work with "Followers" widget. Look :)

    ReplyDelete
  43. Hi there, thanks for your great tutorial, I just have a last question. As you can see on my blog, the pictures and especially the white frame around a pic a hughe. It goes for over the normal screen and you have to scroll down to close the pop up window. What is wrong? Thank you
    Andreas
    www.photoblog.net.ms

    ReplyDelete
  44. How can I change the size? My pics and the white frame around it are far too big.

    ReplyDelete
  45. It works okay for me on a little testing blog I set up... but when I click on an image, the image that pops up is HUGE. How can I fix this?

    ReplyDelete
  46. Hi thanks for sharing this great widget,I like it very much,

    But I notice that it is conflicting with blogger "Followers" widget. I know this because when i remove the script, Follower widget works normally otherwise it just wont show.

    Is there a work around to this that I should know.. Thanks

    ReplyDelete
  47. Esta solución ha sido perfecta. Aunque yo utilice "Google Sites" todo siguió igual. Gracias por tu contribución.

    "Be sure to delete the -h from s1600-h" --------» Fue Genial!!

    ReplyDelete
  48. The code is not supported by IE ?

    ReplyDelete
  49. Hi,

    Thanks for the blogger trick.
    This trick has some issues in IE 8. It doesnt work properly. Infact by blog stopped displaying the posts once i added this trick. This works fine in chrome and firefox.
    It gives following javascript error:
    "HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)."
    I guess one of your js file has some issues and doesnt support IE.

    Thanks
    http://skluvach.blogspot.com/

    ReplyDelete
  50. Great feature and post.
    I tried implementing similar feature - AllowFullSize, but ran into some issues. Lightbox works just fine.

    http://www.a4aapl.com

    ReplyDelete
  51. This worked perfectly. I was banging my head for days until I stumbled on this. Kudios to you!

    ReplyDelete
  52. Hi guys I am so thick I cannot understand what I am doing wrong. I have been trying to get this to work for couple of days, the more I look the more confused I get can you help please thank you
    John Large
    We were unable to save your template

    Please correct the error below and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "html" must be terminated by the matching end-tag "".

    ReplyDelete
  53. I will apply this for my new blog. Thanks!

    ReplyDelete
  54. This comment has been removed by the author.

    ReplyDelete
  55. Did you find a fix for the 'followers widget' conflict? I really like the lightbox, but I want my followers on my page too.

    ReplyDelete
  56. Hello,
    I've a problem, I'm trying your code but I'm getting the Lightbox "popup" blank without any image loaded :S The a>href is OK.
    IE throws a JS error : parsing error unable to modify the parent container element before the child element is closed (KB927917)
    What can I do ?
    Thanks

    ReplyDelete
  57. HI!
    How is it possible to put pictures one near eachother in a grid like shape and not one under another like in a usual post? I would like to put more pictures in a post but not to display them in a column but it 2 or 3 .. you have an example right here at the "Demo of a Light Box Album"

    ReplyDelete
  58. Hi Aneesh,
    Is there any bugs and known issues with this script?

    ReplyDelete
  59. Hi Aneesh,
    How to add Slideshow feature?

    ReplyDelete
  60. How can this work with "followers widget"?

    ReplyDelete
  61. @buythecow - can you show me the url where it conflicts with the followers gadget?

    ReplyDelete
  62. This comment has been removed by the author.

    ReplyDelete
  63. and my followers list also disapears from below the posts.

    ReplyDelete
  64. Thanks Aneesh!!

    This works great!
    I just have to change the size of my images,... but finally it works!

    Take a look @ http://vtepperspics.blogspot.com/2010/03/water.html

    ReplyDelete
  65. Love it !, thanks aneesh! is ther any chance i can deactivate the arrows utility for "prev" and "next" by modifying the script? I rather have the arrows to scroll horizontally for wider images and only have the "prev" & "next" functionality by hovering ....

    ReplyDelete
  66. Thank you very much Aneesh. It works perfectly in my blog. Thanks for your effort. May god give you the best in your life ;)

    ReplyDelete
  67. Hi Anesh. I found that IE8 failed to open my blog. Other browsers seems ok. This is my blog : www.akupunyacerite.blogspot.com

    Any idea how to fix this? Your help is highly appreciated

    ReplyDelete
  68. As Astromas said, it dont work with IE, but working good with firefox and still some of the widjets not working like follows, other posts etc.

    Can you please guide me.

    Thanks in advance

    ReplyDelete
  69. great, thank you very much!
    but can i use images uploaded from picasa?

    ReplyDelete
  70. This works beautifully, took my slow brain a while to figure out where to insert the code but even I managed it, thank you

    ReplyDelete
  71. lightbox is not working please visit this blog and see the problem www.yourjavascript.com

    ReplyDelete
  72. @Aneesh - how can the followers widget work properly with the lightbox also?

    ReplyDelete
  73. Works perfect, BUT, when I add this to my blog, My Followers Gadget disappears completly!!!
    Is there any solution for this problem?

    http://www.braulioguido.blogspot.com/

    ReplyDelete
  74. Seriously, I LOVED IT! This is just the thing I was looking for. Thanks a lot for this great trick. You made my day. :)

    ReplyDelete
  75. When I add it to my blog, the slider stops! take a look! http://ihecker.blogspot.com

    Is there way to add lightbox while slider is still moving? Thanks!

    ReplyDelete
  76. Hi Folks,
    I added the line rel="lightbox" title="Your image Caption" on the place described in this blog: http://soumyadipc.blogspot.com/2008/02/blogger-hack-make-original-images-open.html
    Advantage: you don't have to delete onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" in your <a href code
    It works well, see my blog: http://aboveoeuf.blogspot.com/

    ReplyDelete
  77. Can It Work For Other Image Upload Services Like Photostock, Tiny image, Help
    It does't Work For other service please relpy.
    Mobilesstore.Tk

    ReplyDelete
  78. How can I change a text? Like "Image X of X", "Next", "Prev"? I want to change on my native language.

    ReplyDelete
  79. Amazing!!!! thank you so much for doing this! I've been looking for it for ages!

    Just wanted to share what I have noticed. after publishing my photos I have noticed that they don't pop up, whole screen goes black but nothing pops up. I could also see part of html code above few photos. I have edited my post & published it again and again- about 5 times whithout making any changes, and problem fixed itself. I have to do the same thing with everysingle post.

    after this lightbox is working as it should, but I have only one question? is there any way photos can pop up in smaller size? smaller that the original version saved on my PC? or would I have to resize my images or change the quality?

    thank you once again for a great job you have done!

    ReplyDelete
  80. How can I insert .swf and video (youtube, vimeo) files?

    Thanks a lot!!

    my site: http://carlos-march.blogspot.com/

    ReplyDelete
  81. This is amazing. I'm having problems with my followers widget thought. Can we do something abut it?

    ReplyDelete
  82. I use this simple "lightbox" {http://esmussdoch.blogspot.com/2008/08/lightbox-einbauen.html}and have no problems with my "followers widget"
    Watch my blog: http://aboveoeuf.blogspot.com/

    ReplyDelete
  83. I totally love your work. Thx for all of your efforts :)

    ReplyDelete
  84. Hello, thanks for this tutorial, the plugin works good except for the number of photos in an album it displays. Like for example (http://babydesertwolf.blogspot.com/2010/07/lightbox-for-blogger.html), I have 20 pictures in an album but it displays 40.

    can you tell me what's the problem?

    ReplyDelete
  85. Hi there. I did it! Now I'd like to adjust the size so that I don't have to scroll down to see the whole image. Please advise.

    ReplyDelete
  86. Got it working fine but can't seem to display album images in a grid like you have, I can only display them in one column like someone above. Any tips?

    ReplyDelete
  87. Great Post! It was easy for me to understand and implement on my blog. My next question is, can I have one image shown on the blog to launch a lightbox gallery for several images? I just want one picture in my blog post, but I want that one picture to launch the lightbox gallery for multiple images. Can this be done?

    Thanks,

    -GravoNH

    ReplyDelete
  88. Thanks so much for the great tutorial! I'm trying to use the "read more" tag to truncate my Blogger post. This way the blog doesn't have to load all the images in the post, just the first one (and saving room on the page).

    So far, when the post is truncated, Light Box only acknowledges the first image. I have to click "read more" and show the whole post in order for Light Box to acknowledge all the pictures. Please tell me there's a way around this. Thanks!

    ReplyDelete
  89. @Ancient Squid Media - no there is no way around. Light box displays only those images that are present on the current page. The images present after the read more tag will not be there in the page and so wont come in the lightbox overlay.

    ReplyDelete
  90. This works OK for me in IE, but not in FireFox? Why is that? The first time I tried the lightbox, it worked well in both. Now, the page goes dark, but no lightbox appears in Firefox. Please advise.

    URL: http://gravograph.blogspot.com

    ReplyDelete
  91. after i pasted this code, my follower been missing..
    it shows nothing under my follower tab.
    how to fix this???

    ReplyDelete
  92. Thanks for the info mate. I wanted to host my own scripts and that made this post quite redundant. But as your post does not claim to teach that, that is no fault of yours.

    Your 'explanation', however, on adding albums was brief to the point of being senseless. It often surprises me how those whom are good at the logic behind a programme are rubbish when it comes to cross applying it in simple communication - comprehensive, concise, and systematic ought to be kept in mind when it comes to instructions. I suppose your 'cut and paste' post would be helpful for those wanting a quick fix, but unless the scripts hold, it would be a temporary one.

    ReplyDelete
  93. CAN YOU ADD VIDEOS????

    ReplyDelete
  94. This code is really awesome . Its working fine on my blogger post. http://gamedit.blogspot.com. Thanks a lot

    ReplyDelete
  95. can i make the pics smaller and when people click on the pics they are normal size??

    ReplyDelete
  96. is there any box like this which opens websits in it :D

    ReplyDelete
  97. me too marie ... I would love to figure this out, but IE keeps aborting your site. I am viewing this on my iPhone. i try ( image viewer ) program that is eay to use and powerful on site: ( Sharewarepile.com )

    ReplyDelete
  98. I dint understood how to do that because my image as /s1600/ like this,,,

    ReplyDelete
  99. error XML: The element type "html" must be terminated by the matching end-tag "".

    ReplyDelete
  100. Thats a really great widget. Thank you for sharing

    ReplyDelete
  101. I love this! Thanks for the explanation!

    ReplyDelete
  102. @Pong Cruz - you have replaced <head> instead of </head>. Also you haven't copied the complete code. fix those :)

    ReplyDelete
  103. Hello Aneesh, once I upload an image I is not onblur = try ........

    or-h

    how is it possible to repair this?

    Thank you for your help

    ReplyDelete
  104. Hello Aneesh, I really love this site it is by far one of the best! I did everything that you said & still I have a problem. You can try this individual page & see

    http://www.rafaholics.com/2010/08/kids-day-at-open.html

    ReplyDelete
  105. Hai its very perfect on my blog andhrastills.com but there is no option of saving the image for users;

    ReplyDelete
  106. Thank you luarawak , I used this program ( Image Viewer ) to open many formats of image files and found it very useful

    ReplyDelete
  107. Thank you , I used this program ( Image Viewer ) to open many formats of image files and found it very useful

    ReplyDelete
  108. Thank you , I used this program ( Image Viewer ) to open many formats of image files and found it very useful

    ReplyDelete
  109. Thank you , I used this program ( Image Viewer ) to open many formats of image files and found it very useful

    ReplyDelete
  110. HELPPP ASAP

    the light box is working on the site http://fashionbyshe.blogspot.com without issues, but for some reason the same code is not working on http://fashionbyhe.blogspot.com

    can anyone help?

    ReplyDelete
  111. What works in blogger that you click on the arrow to the left and right and the picture changes in the same spot. Actually reloads the pages each time?
    Thank you

    ReplyDelete
  112. Is there way to use this like Kpicasa in Wordpress but for blogger. I want to add a Page to my blogger that is called "outfits" and then the page will have all the months and if you click on that month you can view all the outfit images from that month in the viewer? Does that make sense?

    ReplyDelete
  113. Hello,
    Its not compatible with IE6. Kindly fix the issue/bug as there are large number of people who are still using IE6.

    Regards!
    Zohaib Hassan

    ReplyDelete
  114. My post code is different, can´t find ...a onblur ... , mine starts with div class="separator" style="clear: both; text-align: center; ...

    ReplyDelete
  115. Wow!
    I've been looking for this!
    Cant wait to try his on my newbie blog ( www.jackdi.blogspot.com ).

    Thanks a lot.

    ReplyDelete
  116. I have oversized images too. It's kinda weird. I tried this from a pc and it works, I do it on mac and I get gigantic white squares around my pictures and they go off screen - they flicker too.
    I used safari and firefox and keep getting the same problem.

    ReplyDelete
  117. I got a problem.
    I used the code and paste it on where you told to do so.
    But the problem is, my follower widget is suddenly disappear.
    When i remove the light box code, the widget show up again.
    Is there something wrong with the coding or it is just my blog template making it malfunctioning. TQ

    ReplyDelete
  118. Thank you so much! I've tried it so far with one picture and am looking forward to trying a gallery.

    I have the same issue as the previous poster: the Followers gadget is no longer working. I tried deleting it and adding it fresh, but that didn't help. Thoughts?

    http://dawnbydesign.blogspot.com

    ReplyDelete
  119. Me, again. I believe the Followers gadget issue is just with Firefox. The gadget shows fine when I check in IE and when I use Safari on my phone.

    HTH.

    ReplyDelete
  120. Referring to previous user.
    But i got problem using Google Chrome.
    =(

    ReplyDelete
  121. ye guis it is working for me too
    thanks to it


    http://vrsecsources.blogspot.com/

    ReplyDelete
  122. Hiya, I'm trying really hard here.. but not getting anywhere?! I am also getting this message...

    Please correct the error below and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "html" must be terminated by the matching end-tag

    any help would be greatly appreciated?! x

    ReplyDelete
  123. Thanks, this is really helpful. But when you use it along with Google Friend Connect Apps, the Google friend Connect apps start failing and don't work. Why does that happen?

    ReplyDelete
  124. There's an error in your code (at least in the code showed here):

    #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; }

    I think that line 3,4,5,6 are mistakes and should be deleted.

    ReplyDelete
  125. thanx Bro juss got it on my blog check it out if u want http://bit.ly/c3rgIs

    ReplyDelete
  126. Basto said...
    Hello Aneesh, once I upload an image I is not onblur = try ........

    or-h

    how is it possible to repair this?

    Thank you for your help


    ________________

    I have the same problem as above...any ideas?

    ReplyDelete
  127. I would like to express my gratitude to your efforts on creating such a nice piece of program and best of all it's free. I am looking for more such type of image viewer with some extra features in near future.

    ReplyDelete
  128. Thank you very much for this!!i really like it, but i have two problems=(
    1.photos does not show like a gallery in posts,there is only one picture (thumbnail),when you click it,the lightbox opens and there the whole pictures, why is it not a gallery?how can i fix it?
    2.about thumbnails, is it possible to choose the view of it, because sometimes it is cut not in a pleasant way=)

    Please, help me,thanx,thanx,thanx)))
    my blog http://lana-confusion.blogspot.com/

    ReplyDelete
  129. Thank you! For a great post works awesome. You have saved me a great deal of work!

    ReplyDelete
  130. I hope that someone can help me. I started using the lightbox yesterday and at first it worked perfectly. Then I started getting an error code and now I just cannot get it to work.

    The error code I get is:

    Foutdetails webpagina

    Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)
    Tijdstempel: Fri, 5 Nov 2010 13:07:22 UTC


    Bericht: Syntaxisfout
    Regel: 1
    Teken: 1
    Code: 0
    URI: http://files.bloggerplugins.org/lbox/js/scriptaculous.js

    Bericht: Syntaxisfout
    Regel: 1
    Teken: 1
    Code: 0
    URI: http://files.bloggerplugins.org/lbox/js/scriptaculous.js

    Bericht: 'Builder' is niet gedefinieerd
    Regel: 132
    Teken: 3
    Code: 0
    URI: http://blogergadgets.googlecode.com/files/lightbox.js

    Foutdetails webpagina

    Gebruikersagent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)
    Tijdstempel: Fri, 5 Nov 2010 13:08:07 UTC


    Bericht: Syntaxisfout
    Regel: 1
    Teken: 1
    Code: 0
    URI: http://files.bloggerplugins.org/lbox/js/scriptaculous.js


    Bericht: 'Builder' is niet gedefinieerd
    Regel: 132
    Teken: 3
    Code: 0
    URI: http://blogergadgets.googlecode.com/files/lightbox.js


    Bericht: 'null' is leeg of geen object
    Regel: 209
    Teken: 9
    Code: 0
    URI: http://blogergadgets.googlecode.com/files/lightbox.js

    This is all in Durch, but maybe if you look on my blog you will see the error in English. Blog: http://ansnippets.blogspot.com/

    Hope you can help :)

    Bericht: 'null' is leeg of geen object
    Regel: 209
    Teken: 9
    Code: 0
    URI: http://blogergadgets.googlecode.com/files/lightbox.js

    ReplyDelete
  131. Don't worry. I have found something else that works.

    ReplyDelete
  132. Thank You. It's great.
    (Is there an option to set the max size of the viewer?)
    Thank you for your great work!

    ReplyDelete
  133. not working when trying to use script the google friend connect, random posts are crashing please help this is my blog - http://chandrastumbles.blogspot.com/

    I deleted the script

    ReplyDelete
  134. Cool! I just finished editing my whole photo blog with editing and adding to all post the tag rel="lightbox" title="Your image Caption".

    By the way i found updated scripts can be used from Google CDN:

    http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js
    and:
    http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js


    Check it out: http://www.odessa.rr.nu/

    ReplyDelete
  135. Hello,

    Thank you verry much for this tutorial. i searched everywehere, finding some too complicated tutorials, and finaly read yours.
    Thanks to you, I can now use Lightbox where I wanted to.

    I just have a question for you : I modified the code you gave for adapting some of the "labels" (image for closin, going to the next image, etc.).
    I could change the "Previous" and "Next" buttons, but I didn't found how to change the button "Close" and the legend "X imag of X".
    Is that possible ?

    Here an image : http://zepload.com/images/1290668346_infrench.png

    Thanks in advance.

    ReplyDelete
  136. Hello,

    Thank you very much for this tutorial. i searched everywhere, finding some too complicated tutorials, and I finaly read yours.
    Thanks to you, I can now use Lightbox.

    I just have a question for you : I modified the code you gave for adapting some of the "labels" (image for closing, going to the previous/next image).
    I changed the "Previous" and "Next" buttons, but I didn't found how to change the button "Close" and the legend "X image of X".
    Is that possible ?

    Here an image : http://zepload.com/images/1290668346_infrench.png

    Thanks in advance.

    ReplyDelete
  137. Thank you very much for your post. I'm having trouble installing the feature, though. Although I made sure to replace the /head tag with the code, I got div tags when I saw the HTML code after uploading a photo instead of the "a onblur...." Is there something I'm doing wrong?

    ReplyDelete
  138. Dear Aneesh
    We just want to tell you that this lightbox is conflicted with Jquery that we already installed first.
    Here take a look @ our site

    http://resensinema.blogspot.com/

    my jquery slideshow appear blank, when i installed the lightbox.
    but when i delete the Lightbox script from "Edit HTML", my jquery slideshow is back, as it first

    ReplyDelete
  139. cool!! Thank you very much for ur post. this is awesome! :)

    ReplyDelete
  140. I have determined the source of the "Followers" widget disappearing...

    it's this:
    (script src='http://www.mdn.fm/files/234659_l5u2n/prototype.js' type='text/javascript'/)

    if i remove it the widgets come back. but if you do remove it, the lightbox will no longer work properly. any ideas anyone? perhaps the file is corrupted?

    ReplyDelete
  141. to all of you who are experiencing troubles with your "FOLLOWERS" widget or any google widgets not appearing do this:

    go to your HTML editor in Blogger, once you have placed the codes at the top of this page. find this:

    (script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/)

    (NOTE: i'm using "()" in this but in actual the "()" is a "<>" coz this comment thingy wont allow me to put scripts.)

    this is the one that causes those widgets not to appear. therefore, replace it with this:

    (script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/)

    if you are using Firefox, update your firefox to the latest version. after this your widgets will now work properly. i hope this helps

    ReplyDelete
  142. Thank for this great tutorial I installed the light box properly...
    Thank you too @Element_J21 for the alternative script which really fixed the conflict of light-box and google friend connect widget...
    here is a proof http://morocco-deserts.blogspot.com/

    ReplyDelete
  143. @Element-J21

    Thank you so much! My followers gadget has been missing for almost 2 weeks now. Now it's back again. Thanks.

    ReplyDelete
  144. Thanks for this post.. it works flawless on my blog ericgatchalian.blogspot.com

    ReplyDelete
  145. @Natalia, @Element-J21 - thanks.. post updated as per your suggestions :)

    ReplyDelete
  146. @I am Margareth - There are two ways of fixing it.
    1.Don't upload extremely big pictures.
    2.Modify the picture size by adjusting the image url. All of the blogger uploaded images will be stored on Picasa, and picasa can provide you with multiple sizes of the image. For example the urls with s1600 in it will give you an image, whose width is not more than 1600px. If the actual size of the image is above 1600px(say 1700px),then you will get an image with width 1600 px and an appropriate scaled height(maintaining the aspect ratio). If width of the image is less than 1600(say 450px), then the width or height wont be altered.
    This means that you can control the size of the image by modifying the url.(you can actually set the maximum permissible width of the image).
    As an example, see how url modification alters this flower image
    http://3.bp.blogspot.com/_u4gySN2ZgqE/SnW-msf1ohI/AAAAAAAAAlQ/v3V4KePUrgM/s1600/flowers-8fy6.jpg is of size 600x400
    and
    http://3.bp.blogspot.com/_u4gySN2ZgqE/SnW-msf1ohI/AAAAAAAAAlQ/v3V4KePUrgM/s444/flowers-8fy6.jpg is of size 444x296

    So you can decide on the size and choose an appropriate width.(Maybe some 500 to 700px might do)

    note: To get the full size version of any picasa image, you can remove the size parameter.
    eg: http://3.bp.blogspot.com/_u4gySN2ZgqE/SnW-msf1ohI/AAAAAAAAAlQ/v3V4KePUrgM/flowers-8fy6.jpg
    will give you the actual full size image.

    ReplyDelete
  147. OH WOW!
    tried at least a dozen of tutorials for adding lightbox on my blogger but without success
    and finally i found your guide and it works the really first time

    really great
    many thanks

    ilPider

    ReplyDelete
  148. Can you check http://mariuszsadurski.blogspot.com/. I have implemented the code above, but image viewer does not work. Please help.

    ReplyDelete
  149. finally detailed tutorial...but i can't implementing it on my blog...too much JavaScript :(

    ReplyDelete
  150. hi admin. thanx for detailed instruction
    it works perfectly. but i have a problem and want to sort out by your help..
    actually i use jquery image slider in my blog and when i put any other script just like light box slider stops working :(
    kindly help me to solve this. what should i do?

    ReplyDelete
  151. Hello Aneesh, thanks for your tutorial, it s amazing.
    I have a litlle problem
    I don't have the gallery like a pattern, see my link please : http://kalando-gallery.blogspot.com/ than you will understand my mind.
    How to make it like one box with multiple pictures, thanks in advance

    ReplyDelete
  152. dears

    there is a problem in this code for IE8...

    it works fine with chrome and firefox

    but in IE8 images are viewed at the right of the screen not in the centre, so a part of it is out of screen....

    any one fix it ...

    ReplyDelete
  153. But what if i have a link to album? i dont want to put 100 images on website so i just share a link from my album, what i need to change? please help and thanks ! you rock

    ReplyDelete
  154. HAI
    I TRY IT BUT HOW CAN ADD THIS A VIDEO POST...ANY IDEA

    ReplyDelete
  155. Hi Aneesh, all working perfectly thank you. Just a quick question from a lazy blogger, is there any way to integrate the: rel="lightbox" title="Your image Caption"
    stage of the process into a generalised code for photo uploads.. i.e. so that it doesnt need to be added manually to every photo, but the lightbox effect would apply to all uploaded photos (without captions of course). Many thanks in advance.

    ReplyDelete
  156. That was great from blogger plugins.I had given a link on to this post from one of my posts.

    My last post: Blog Talk Radio as a Blogging Tool. (Blog Your Voice) http://bit.ly/hl7dym

    ReplyDelete
  157. This Is Great.I have used in my blog.It works perfect with Blogger Comment Box.Once i installed Instense Debate.It stop working.So to check it back i upload my old template without instense debate and it start functioning itself.
    And also, i don't read your full post first.I just click on screen shot.and in this image Click Here to See.You have not close the album name with quotation mark " .So i was having trouble.But after reading whole post i found i have to close album name with quotation mark " and it's works.Thanks

    ReplyDelete
  158. @Arun Dhungel - thanks, updated the post with a new image :)

    ReplyDelete
  159. Great tutorial, BTW I have a question. Can I get pictures from two different posts into one lightbox gallery? lets say I have 3 pictures in post-1 then 2 pictures in post-2, now I would like them to be viewed as one gallery when one or any of them is clicked. Is that possible?

    ReplyDelete
  160. Thank You so Much Aneesh about this great tutorial And keep the good job

    ReplyDelete
  161. The best and easiest tutorial. Works great on my blog. Tested with different browsers and OSs... Thank you so much Aneesh

    ReplyDelete
  162. Cool. I was finding a way to disable clicking the photos because it goes to the photo URL, this is a great solution. Thanks! ☺

    ReplyDelete
  163. Hi

    This working fine on the test blog , but now working over the latest one
    i. e
    http://rise-of-the-pheonix.blogspot.com/2011/02/valentine.html

    I really like this concept , but couldn't able to make this effect happen . can you look into the template , I'm using iAurora template with some modification.

    Please help ..it will be great...help

    Thanks a lot.

    Regards,
    Vivek Chamoli

    ReplyDelete
  164. Hey, was very excited yesterday when I thought I had this working great on the first try, but then I realized I have a strange little glitch... When I scroll through the images in my gallery using either the "next" link or my arrow keys, or even when I open and close random ones individually, for a split second the previous image appears before the new one settles in. (My photo blog is still private while I work out the details, but if you happen to want a look I will send you an invite.) Any idea what could be causing this? --Jennifer

    ReplyDelete
  165. Hello, I put it on my blog and it works, but i have a youtube video on the sidebar and when i click on the thumbs the lightbox shown the the youtube video appear above the lightbox!

    This appears only with Explorer, in firefox everything is ok!

    Can you fix it????

    Frankie G.

    ReplyDelete
  166. Thank you for the post. It's my first step when searching for image viewer that suits my blog.

    This plugin will not work if we have link to jQuery library. Remove the link, it'll work perfectly. If jQuery library is needed, use jQuery lightBox plugin instead.

    ReplyDelete
  167. Thanks so much! This is exactly what I was looking for.

    ReplyDelete
  168. Hello Annesh,
    This lightbox is incredible.

    I tried to adapt by using the url option.
    Unfortunately I failed.
    Do you think this is feasible?

    Capture:

    https://lh6.googleusercontent.com/_E5JYoHlDglk/TYOiodmpO2I/AAAAAAAAD5k/KC8emAvGdro/captblogconnexion014.jpg

    https://lh3.googleusercontent.com/_E5JYoHlDglk/TYOinjSZBBI/AAAAAAAAD5g/j91FQRMkIw0/captblogconnexion015.jpg

    Thank you.

    ReplyDelete
  169. re-hello,
    sorry for the inconvenience. it was I who made ​​a mistake in writing the tag of the link (I confused "src" and "href ")
    This works very well.

    Thank you for this beautiful coding.

    ReplyDelete
  170. hi can you please tell me which which website do tou use to upload image.

    ReplyDelete
  171. The last lines, right after #overlay, are:

    round-color: #000; }
    lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
    round-color: #000; }

    I'm afraid there must be something missing, isn't it? :)
    Can you please fix it? Thank you for the useful post.

    ReplyDelete
  172. Dont't work with the Firefox plugin NoScript...

    ReplyDelete
  173. thank you! it worked for me! :)

    ReplyDelete
  174. I've been using Lightbox on my Photoblog Leonardo for a long time. It worked great. Now, all of a sudden, it is not working on individual post pages. :(

    For example, say I published a new post with some images with lightbox effect. The lightbox works fine on the home page of the blog for this new post. But when I click the title/permalink of the post and go to the post's unique page, the lightbox doesn't work there. Clicking the image links opens the image itself, sans lightbox. :(

    I've searched hell & high-water but couldn't understand what is causing this. Could you please help me here?

    ReplyDelete
  175. Hi.. It seems like it's not working at all. I've followed the instructions but it's still not working. i even removed the "-h" and edited the html of my photos. but it's still not working. why is this so? my blog is http://www.chinaheart.co.cc

    ReplyDelete
  176. i can't seem to get it to work on my blog. can you help.

    ReplyDelete
  177. Great article. It really helps a lot.

    ReplyDelete
  178. Works like a charm, thanks a lot Aneesh!

    ReplyDelete
  179. I appreciate the effort, but this tutorial isn't very good. there are missing steps and it should be promptly updated as im sure more viewers would go through this is if it was effectively explained.

    ReplyDelete
  180. That's great! Thank you so much! I'm doing a portfolio on blogger and this make my blog-portfolio more professional :D

    ReplyDelete
  181. Thanks a lot, worked very well !

    ReplyDelete
  182. Hey thx for the post!
    But i have aproblem...
    i have a bar, and if i open the picture the bar is over it -.-
    here: http://testarow.blogspot.com/2011/05/fgsad.html

    can i fix this ?

    ReplyDelete
  183. Is this copyrighted?
    Why add:
    if this it's not your work?

    ReplyDelete
  184. Great tutorial. It was extremely easy to follow. I've been wanting to figure out how to add a lightbox for quite sometime, so I'm pretty excited that this article made it so easy.

    ReplyDelete

Post a Comment