Lightbox is a simple, unobtrusive script used to overlay images on the current page. The Lightbox effect is useful when your post has many images or images with large sizes, it helps people to save time browsing images in an impressive way. We’ll see how to add Lightbox effect to Blogger (blogspot) blogs.
We are going to use the jQuery Lightbox plugin for Blogger. And before going into detail, you might want to see Lightbox in action (click on the image above to enlarge).
How to install
Login to Blogger Dashboard, go to Design, Edit HTML:
Add the following code right before the </head> tag:
<link href="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css" media="screen" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script src="https://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js" type="text/javascript"></script>
This will add the CSS and JS files into your template. These files are hosted in my Google Code project, but you can download them (with links above) and save into your favorite host.
How to use
Once you’ve done the installation, whenever you want to add Lightbox effect, switch editor mode to HTML, and wrap the image IMG tag inside a A tag as the following code:
<a href="url of the full-size image"><img src="url of the thumbnail" /></a>
Using Lightbox in blog posts is a good way to keep visitors not browsing to other pages for just viewing images. One of other advantages of using Lightbox is that you can use thumbnails in post content instead of full-size images, that reduces total size of page, thus reduces page loading time.
/* LightBox */
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#666}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}
Are there any way to apple this trick all image in blog? Adding this code one by one horrible.
This lightbox effect is applied to all image in blog. Have you tried it?
you have to put the code in all images!
hello, this was good but i followed what you said exactly. the photo i added to my blog opens in another page not in a nice lightbox as i expect. this photo was uploaded from my computer . i am using the simple template and firefox browser .would you please help me?
Hello i have a problem with lightbox. i have script(http://java-templates.googlecode.com/files/jquery-1.4.3.min.js) on my blogger. I used that script for my navigation drop down menu. if i will remove that script, lightbox will work, but my menu will not. vice versa.. do i need to sacrifice one ? or there is a solution ?
Hey I have the same problem as Manuel Garcia PH said. Can you please provide us a solution or we have to go for another lightbox?
Thankx
Maybe the problem comes from conflict between the Lightbox script and script for menu. But as the Lightbox is popular,so I think there’re maybe some problems with the menu script. I’m not sure, but you can use Firebug to debug the JS.
Nice article!!!!!
Blogger has added Lightbox feature into its system. Refer this link on how to enable it. No programming or code needed.
It works fine in the main page but why doesn’t it work on individual item pages?
Actually, it should work on item pages as well. I made that for this purpose.
Great ! It works. Thank you ^_^
thanks for sharing this post! but I didn’t understand that how to add lightbox effect in images. please explain a bit.
Thanks
Thanks for Post….
Working on my blog, thank you.
tks so much for . it’s what i need
Do you know if it’s possible to make different lightbox diaporama on the same blogger blog? and on the same page? i.e. I’m trying to display 5 miniatures which each will have different images displayed in their diaporama.
To make sure I made myself clear :
I have 5 projects which are displayed on the same page (miniature + title)
I want that on click it opens a diaporama, not with all images, but only with the pictures related to the project.
Is it possible and how?
… The attribute name of diaporama doesn’t seem to work on blogger…?
Thank you so muchfor your help!
This is very nice… thank you…
i tried it and success
I have the exact same problem as Ryan explained :
”
Do you know if it’s possible to make different lightbox diaporama on the same blogger blog? and on the same page? i.e. I’m trying to display 5 miniatures which each will have different images displayed in their diaporama.
To make sure I made myself clear :
I have 5 projects which are displayed on the same page (miniature + title)
I want that on click it opens a diaporama, not with all images, but only with the pictures related to the project.
Is it possible and how?
… The attribute name of diaporama doesn’t seem to work on blogger…?
Thank you so muchfor your help!”
Hey,
I can confirm that Google has included the Lightbox widget on Blogger, and it worked for some months ago, but after an update, I guess, it doesn’t work anymore…To bad!
Anybody know how I can get it to work properly again? Lightbox is ticked in blogger settings.
You can see how the pictures will be displayed when clicked on, on my blog Passion for Football Manager
Hope anybody can help me!
I tried to do this on a dynamic view (Blogger) but it doesn’t work….
Any solution ?
Thx for the tutorial
thx it’s so helpfull
Hi,
Many thanks for this wonderful post, i succeeded to add lightbox effect, i have a question :
How to add img title on zoom view ? is there a way ? now im seeing img 1 of 3, i want to see in the bottom middle img title, is this possible ?