jQuery Lightbox Image Overlay Pop Out Effect For Blogger

Posted : Tuesday, May 24, 2011 |  Post Author : Paul Crowe | 44 comments

jQuery Lightbox Image OverlayRecently we have been looking at the images you use in your blog and making them display better and more interactive.This has included an Image Zoom Effect and Featured Image Slideshow.In this post we will cover perhaps the more popular image plugin.The lightbox plugin really is a ‘Must Have’ for blogs that use pictures in their posts.At the moment when a user clicks on an image you uploaded on your blog they click through to the image URL page which is just the image on a blank page.With this lightbox effect when your images are clicked they smoothly pop up into a container in full size with an optional description.If you have the effect added to more than one image users will have the option to scroll through each with next previous buttons.Lets look at some Demos.

While testing this i had to make a few demos so i kept two for you to check out, just click on the images in the demo posts.You will see the next and previous buttons when you hover over the image when popped out.

View Demo Button

View Demo Button

Video Post – For more help we have a video tutorial at the end of the post.

A very cool way to display your images.There are many versions of this however the script for this version is From Leandro Vieira and is the latest version V7.Lets add it to your blog !

Add jQuery Lightbox Image Overlay Plug In To Blogger

Step 1. In your Blogger dashboard click Design > Edit Html

Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

]]></b:skin>

Step 3. Copy and paste the following code directly Above / Before ]]></b:skin>

/*start css lightbox*/
/**
* jQuery lightBox plugin
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
* and adapted to me for use like a plugin from jQuery.
* @name jquery-lightbox-0.5.css
* @author Leandro Vieira Pinho – http://leandrovieira.com
* @version 0.5
* @date April 11, 2008
* @category jQuery plugin
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
* @license CCAttribution-ShareAlike 2.5 Brazil – http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
*/
#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 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;
}
/*end lightbox css*/

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

</head>

Step 5. Copy and paste the following code Directly Above / Before

Note – If you have added jQuery to your template before dont add the code highlighted in yellow.

<!–Start lightbox scripts info from http://www.spiceupyourblog.com–>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js’ type=’text/javascript’/>

<script src=’http://suyb.googlecode.com/files/jquery.lightbox-0.5.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(function() {
$(‘a.spicebox’) .lightBox({

overlayOpacity: 0.6,
imageLoading: ‘http://1.bp.blogspot.com/-E4eaouKn-VA/TdvW6y3ZZxI/AAAAAAAAEEM/6UHhujshJsg/s1600/lightbox-ico-loading.gif’,
imageBtnClose: ‘http://2.bp.blogspot.com/-akpfLVo73Zk/TdvW4dmQALI/AAAAAAAAEEA/jn9ZWXFrYcI/s1600/lightbox-btn-close.gif’,
imageBtnPrev: ‘http://3.bp.blogspot.com/-rWUtFwoKp3M/TdvW6VzTTpI/AAAAAAAAEEI/7afUa6r4H9Q/s1600/lightbox-btn-prev.gif’,
imageBtnNext: ‘http://3.bp.blogspot.com/-LFX48wGyrqc/TdvW6Md87dI/AAAAAAAAEEE/1gec9BHuVuc/s1600/lightbox-btn-next.gif’,
containerResizeSpeed: 350,
txtImage: ‘Image’,
txtOf: ‘Of’
});
});
</script>
<!–end lightbox scripts–>

Save your template, that’s the Css and Script added next we see how to add it to selected images.

When you add an image to your blog that you want to use the lightbox effect simply add class=”spicebox” and title=”Description Here”.

<a class=”spicebox” title=”Image Description Here” href=”http://image.jpg”><img src=”http://image.jpg”></a>

Red – The Class Must Be Added To Images Were Shown.
Yellow – Add Title And Replace Image Description Here With Your Description.

On an image uploaded directly to Blogger it would look like this :

<div class=”separator” style=”clear: both; text-align: center;”>
<a class=”spicebox” title=”Image Description Here” href=”http://1.bp.blogspot.com/image.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”240″ src=”http://1.bp.blogspot.com/image.jpg” width=”320″ /></a></div>

 

Video Tutorial

That’s your jQuery lightbox for Blogger, once again thanks goes to Leandro Vieira.Look out for future posts when i will show you how to have similar effects with videos and Contact or Feedback forms.Make sure to check out more of our Image Tips and jQuery Posts.

Drop Your Comments And Questions Below.

44 comments:

  1. Fantastic, thanks!
    Is there a way to reduce the size of the image box by ‘x’% ??? Some of the images are too large and it would be beneficial if I could reduce all of the images that utilize this script by a certain percentage . .

    Ideas?

    Thanks!

    ReplyDelete

  2. One more question / issue: I also utilize the easyzoom script from your site but now that I have inserted this lightbox script, the easyzoom script is no longer working . . .ideas?

    Thanks in advance

    ReplyDelete

  3. @ John P – Remove the line of jQuery for this gadget, i have highlighted it in the post in step 5.Sometimes having jQuery twice can cause problems.

    ReplyDelete

  4. Awesome i have seen this on other sites and did not know if i could use it on Blogger.

    ReplyDelete

  5. Awesome template, Good Job

    ReplyDelete

  6. Thank you, it works on my blog 🙂

    http://pinkprincessdecorating.blogspot.com/

    ReplyDelete

  7. anyway to display ads in every image ……

    ReplyDelete

  8. Very interesting Paul. I hope I could use it but unfortunately, I already use wibiya script and jQuery slideshow. But Thanks for this, I really love each and every post of yours.

    ReplyDelete

  9. doesnt work for me…

    ReplyDelete

  10. @ Aris – The best i can say is if it is not working for you then you made a mistake along the way, try again I’m sure you can get it..

    ReplyDelete

  11. Ι’ve already had a JQuery script. That was the reason that it didnt work

    ReplyDelete

  12. thanks for this info. it really works! i just want to ask if it’s possible here if i will only show one thumbnail picture to create slide show just to minimize the space in my blog. thanks for the reply

    ReplyDelete

  13. Hi Paul,
    I have a question, Is there a way to reduce the size of the image box? When i click on an image it becomes too large.
    Thank you

    ReplyDelete

  14. Thanks – it worked great, but now when I use it on a post it pulls up any photos with the code and not just the ones for that particular post, like here Is there any way to change that?

    ReplyDelete

  15. It worked, but now it pulls up all the photos I’ve used the code on rather than just the ones for a particular post. Is there any way to change that?

    ReplyDelete

  16. @ Geri – I dont totally understand the question and the link you gave is broken.Can you explain some more and i will do my best to help.

    ReplyDelete

  17. Paul – sorry! http://myheartartbygeri.blogspot.com/2011/06/lets-see-if-this-works-pop-up-photos.html I think I figured it out – if you click on one of the pictures from my main page of my blog it will include all of the photos that have the spicebox code, but if you click on the actual post title and then click on a photo, it will only bring up the photos for that post. I guess that’s how it is supposed to work.

    ReplyDelete

  18. that’ssoNurhi Dayah MokhtadinJune 21, 2011 at 6:25 AM

    i follow all the step..i repeated so many time..but it does’t work..how i can fix this problem?

    ReplyDelete

  19. that’ssoNurhi Dayah MokhtadinJune 22, 2011 at 7:15 AM

    hey,i want to know,why when i do at different blog, it work..but when i do at my blog it does’t work,i do at the same steps,so many times..but it still does’t work,please what can i do?..it is my template problem?

    ReplyDelete

  20. awesome, thanks for making this so easy … keep up the good work

    ReplyDelete

  21. Hi Paul, how can I get Lightbox to open images in center of screen, I tried changing some positions from absolute to fixed, but that didn’t do it.
    Thanks for making simple for some of us.

    ReplyDelete

  22. Thank you very much for this!!!

    ReplyDelete

  23. Hello,

    I have been using your code for the lightbox the past few months and it worked great! But when I checked my blog this morning, the lightbox didn’t work anymore.

    I tried deleting and adding the code again, but it still did not work. What can I do to fix this?

    ReplyDelete

  24. Mine also worked flawlessly until today . . . any ideas? I have not changed anything on my blog. Yesterday it worked, today it is not. REALLY would like it to work again 🙂
    Thanks!

    ReplyDelete

  25. @ All – I seem to be having issues with the scripts hosted on Google code and this is one that stoped working.You need to replace the lightbox jquery script to get this to work again.

    So in your template find this URL (It’s from step 5) –

    http://spiceupyourblogextras.googlecode.com/files/jquery.lightbox-0.5.js

    And replace it with this –

    http://suyb.googlecode.com/files/jquery.lightbox-0.5.min.js

    Let me know if there are other issues.

    ReplyDelete

  26. Working – had to reorder various js(jquery, Mootools, Prototype, etc) but now working. Not sure why I had to do this as nothing changed but no matter, it is back working! Thanks for everything Paul!

    ReplyDelete

  27. Everything works now. Thank you for the quick fix!

    ReplyDelete

  28. Hi Paul,
    Thanks for a great plug-in, you’ve made it so simple to install. You’re a Star and way above all the rest, who (In good faith) have given me instructions before. Thank you.

    One little problem has arisen since I started to use the light box:
    My featured posts no longer roll over. I know you’re very busy but can you help please? http://guildforduk.blogspot.com

    Warm Regards
    Pat.

    ReplyDelete

  29. awesome. like the effect! Thanks 🙂

    http://pyejal.blogspot.com

    ReplyDelete

  30. I successfully added this to my blog. I do have a problem though. When an image is clicked, two images are opening in a lightbox fashion. I had the same issue on the test blog post with the flowers. I have not done much testing but it seems to affect my images that have a title for the caption.

    ReplyDelete

  31. Looks like google is incorporating this into blogger. See here http://www.google.pl/support/forum/p/blogger/thread?tid=73493b0be3a4116d&hl=en

    ReplyDelete

  32. Love this! I used it and I just have a quick question. In Chrome the photo pops up fantastic, but it’s hidden behind any embedded videos on the page if they’re in the wrong spot. Is there a way to fix that? Thanks!

    ReplyDelete

  33. Hi Paul,
    Have “Blogger” been mucking around with our lovely lightbox again?
    My grayed out area is now Black, and a gallery has been added. Yuk!

    Is it my html or their interference?
    I guess you’ll have lots of bodes asking this one if it’s Them.

    Pat Royce 🙂

    ReplyDelete

  34. Thanks A Lot Wat A Work :):)

    ReplyDelete

  35. IS THERE A WAY TO INSERT HTML? AND NOT JUST IMAGES

    ReplyDelete

  36. james_TAKEanotherBYTEJanuary 7, 2012 at 4:43 AM

    Mate, thank you… you are a legend!

    I’ve been tearing my hair out wondering how to create sexy pop out windows for my blog images.

    Cheers!!!

    ReplyDelete

  37. Great effect! Is there anyway I can make this work for photos in my sidebar?

    ReplyDelete

  38. Hi, Is it possible, with Blogger Platform, to use lightbox onload web page for single session?

    ReplyDelete

  39. Paul,

    When I select on my images, the lightbox opens to the size of the original image but the image is not presented in its original size and the effect therefore is to have a large lighbox frame but a small image within the frame. Any ideas?

    ReplyDelete

  40. Gevorg NazaryanMay 2, 2012 at 5:21 PM

    Hi. When I select on an image, the images from other posts also open in the same lightbox. What should I do?

    ReplyDelete

  41. Manilans Adventure ClubMay 8, 2012 at 12:35 PM

    what will the script if i click the one photo that will see other photos with next and previous without posting the other photos just one photos for another?pls help thanks

    ReplyDelete

  42. Davz Alunan | Lifting Shadows Photography & Music ©August 25, 2012 at 12:59 AM

    Hi Sir, I followed the steps but the image is not loading… Do you happen to know what the problem is?

    ReplyDelete

  43. is it possible to do it for all posts? not just specifically the ones you want? What if i want it for every singly post ive done, and every single post im going to do.

    ReplyDelete

  44. Does not work for dynamically loaded content inserted into a page. For that there needs to be a away to initialized AND launch the lightbox from an HTML anchor tag.

    ReplyDelete