Lightbox v2.04 Integration with Blogger Template

I’m using free Blogger account and i was trying to post my edited photo that i created a year ago. And i was looking for a good lightbox to add in my Blogger Template. Here is how I create a simple Photolog using Blogger.com, Photobucket.com and Lightbox v2.04. I was using photobucket.com image for some reason lightbox won’t read blogger uploaded images path and picassa.com images path.

1.Upload all of your images in your photobucket.com account and create your own thumbnails for more details of using photobucket.com images editor click here.
2. Login into Blogger account, go to Template –> Edit HTML. Then edit your blogger template and add the code below between your header tag (<head>.. </head>)

<link href="http://www.virtuosomaster.com/tutorials/samples/lightbox/css/lightbox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/prototype.js" type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"/>
<script src="http://www.virtuosomaster.com/tutorials/samples/lightbox/js/lightbox.js" type="text/javascript"/>

See images below:

3. Creating a blog entry in Blogger system and click add images button.


4. Copy your thumbnail image code photobucket.com in the blogger adding image in the web panel and click upload wait to load the image and click done.

5. Once you have uploaded the image you will see an entry similar shown in the figure below.

6. Replace the highlighted code with rel=”lightbox”. example below:

8.Publish your work .

If you have a set of related images that you would like to group, follow step six but additionally include a group name between square brackets in the rel attribute. Example: rel=”lightbox[group_name]“.

Visit my photoblog to see the lightbox v2.04 in action: I Murdered Them
You can download my blogger template here: Download
If you like to customize your lightbox download your Lightbox v2.04. here and upload to your host.

Related Topic:

Multibox Integration in Blogger Template

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • Furl
  • Reddit
  • Smarking
  • StumbleUpon
  • Technorati
  • TwitThis
  • YahooMyWeb
  • Simpy
  • Propeller
  • Fark
  • LinkedIn
  • Live
  • Mixx

37 Comments »

  1. i found a fix that you can use your deafault blogger uploaded images path.

    The fix:

    http://4.bp.blogspot.com/…/s1600-h/127581731l.jpg

    remove “-h” in “/s1600-h/” to look like this:

    http://4.bp.blogspot.com/…/s1600/127581731l.jpg

    Comment by death-mark — October 3, 2008 @ 7:58 pm

  2. Hi and thanks a lot for your tutorial, I’ve used it succesfully in my blog! However, I’d like to ask you about doing the following: Instead of having multiple posts in the photoblog, I’d like to feature just one, so when you click on the picture a series of photos is displayed -is it possible to do that? Thanks again & best regards!

    Comment by diego — October 14, 2008 @ 8:05 pm

  3. Thanks for hosting those Javascript files. Do you know anything about the version of Lightbox that auto-resizes large images to the browser window size? Such as on this blog: http://causticjelly.blogspot.com/

    Also, what diego mentioned would be a great feature if possible.

    Comment by Dave — October 23, 2008 @ 1:24 am

  4. @Dave, Ok i check it out. Yeah! I’m still working on diego’s request. I’ll post it very soon. Btw also visit my multibox tutorial another lightbox that supports html, flv, mp3, and etc.

    http://www.virtuosomaster.com/tutorials/multibox-integration-in-blogger-template/

    Comment by brian — October 23, 2008 @ 1:46 am

  5. Works like a charm, thanks!

    Comment by Bonkster — October 27, 2008 @ 8:08 am

  6. Thanks VERRRRY much! I’ll be using this on my photoblog-like blog.. :D

    -=kat=-

    Comment by kathy — October 27, 2008 @ 10:54 pm

  7. hi,
    i have a problem, when i click on my image it opens up the lightbox window well it trys to, it gets stuck at the loading part. what am i doing wrong?
    thanks for your help.

    Comment by teresa — November 9, 2008 @ 1:06 pm

  8. nevermind, i think ive got it :)

    Comment by teresa — November 9, 2008 @ 1:12 pm

  9. okay im back,
    how do i make the thumbnail larger in the lightbox window?
    thanks

    Comment by teresa — November 9, 2008 @ 1:19 pm

  10. @teresa put the full size images link in your link tag(<a href="…">) and thumbnail size image link in your image tag(<img src="…"/>) in your case try to post it in your blog:

    <a rel="lightbox" href="http://i290.photobucket.com/albums/ll246/januuary64/022720071207279881.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 135px; height: 160px;" src="http://s290.photobucket.com/albums/ll246/januuary64/th_022720071207279881.jpg" alt="" border="0"></a>

    click the images below to see in action :

    Comment by brian — November 9, 2008 @ 1:20 pm

  11. thanks.. got it working!

    anyways, how do u put a description in the picture?

    many thanks

    Comment by dennis — November 10, 2008 @ 12:43 pm

  12. @dennis make sure you put a title attribute in your link tag example:

    <a rel="lightbox[photoshop]" href="http://i379.photobucket.com/albums/oo239/virtuosomaster/pacuteorig.jpg" title="Before:Noise reduction from 1.3 mega pixel phone camera" rel="nofollow">

    Comment by brian — November 10, 2008 @ 1:01 pm

  13. Thank you so much!!!!!!! it works. :D

    Comment by teresa — November 11, 2008 @ 2:15 pm

  14. Hi,

    Thanx for the tutorial. Works perfectly with death-marks fix. I just forgot first to change the locations in the .js .css files when I uploaded them to my own host.

    Thanx again!

    Comment by Robert — November 12, 2008 @ 7:12 am

  15. hi,
    most of my photos are from my Flickr account,
    can lightbox read flickr images path??
    cause…
    mine ISN’T WORKING!
    help!
    thanks a lot..

    Comment by JWC — November 19, 2008 @ 3:55 am

  16. it works!
    i realise that it needs sometime to load the whole page for the script to function. =.=”
    thanks anyway!

    Comment by JWC — November 19, 2008 @ 5:47 am

  17. It no longer working. Now we are just waiting for thickbox.

    Comment by gofree — January 22, 2009 @ 12:19 pm

  18. @ gofree Please visit here to see lightbox in action: http://imurderedthem.blogspot.com/

    Comment by admin — January 22, 2009 @ 5:35 pm

  19. Yes, yes!!! It working now :)
    Thanks a lot. Now looking towards to your Multibox completion.

    Comment by gofree — January 22, 2009 @ 11:44 pm

  20. I am using Windows Live Writer that this task of changing -h is impossible. There a guy here fixing this: http://www.ai-projects.info/app/2009/01/aibloggerbox-lightbox-alternative.html
    The problem is his modified lightbox seems not to show the image correctly. But his doesn’t require the html editing part.

    If possible, can you integrate his code then to fix -h and html part?

    Comment by gofree — January 23, 2009 @ 5:19 am

  21. I have proofed multiple times and can find no errors, but it will not work. I am wondering if there is js running that is interfering with lightbox.js?

    If anyone has the time to check it out, it would be most appreciated.

    First photo on the page….http://www.jasonandrewbowles.com/search/label/Sculpture

    Comment by Jason Andrew Bowles — February 10, 2009 @ 2:04 pm

  22. I can’t get it to work? I even downloaded your blogger template and it still didn’t work. Any suggestions?

    Comment by chris — March 11, 2009 @ 6:42 pm

  23. Hey,

    I am the guy mentioned in comment #20. After a break, I started working on AiBloggerBox. I have it tested now and it works.

    AiBloggerBox is a javascript file that your blog template would reference to. That is all you do. All the images you upload there after will automatically have a lightbox type effect. As simple as that! :)

    You can read more about it here – AiBloggerBox

    Hope someone here finds it useful!

    Comment by Aishwar — April 21, 2009 @ 11:57 pm

  24. Hi. I got problem. Everytime I try to open my page, there’s error box popup saying

    “Internet Explorer cannot open the Internet site http://ikhlaswarisan.blogspot.com/.

    Operation aborted”

    Please help.

    Thanks

    Comment by farah — April 28, 2009 @ 4:40 am

  25. Thanx for the tutorial. It works perfectly. i just made a little modification to suit my need.

    Comment by ruhil — June 17, 2009 @ 4:10 am

  26. Can I upload photos fom flickr?

    Comment by peter — June 18, 2009 @ 10:25 am

  27. Hey how come my photos won’t fade out eventhough i am using url from photobucket? help!

    Comment by peter — June 18, 2009 @ 10:45 am

  28. Thanks for hosting js files. Anyway, I have one problem it doesn’t work on firefox on windows xp. I checked other browser and others work well. But it doesn’t work. Please help.

    Comment by Toshi — July 14, 2009 @ 2:30 am

  29. It works, i just put behind and works perfectly.

    Comment by Photoshop Tutorials — July 14, 2009 @ 10:40 am

  30. Really nice! I was looking for tutorial of this kind for a few days and now it is finally working. Thanks.

    Comment by Polona — July 28, 2009 @ 2:39 am

  31. I can’t set this up. I put the code in the template as shown.

    /* Feeds
    ———————————————– */
    #blogfeeds {
    }
    #postfeeds {
    }

    Then I used an old post where i upload an image from this page http://www.photobucket.com

    What I mesed up?

    Comment by elvo84 — August 16, 2009 @ 4:04 pm

  32. Yeah, it works. I was having problem because I used an old version of the blogger template, when I replaced the old one it works great

    Comment by elvo84 — August 17, 2009 @ 11:37 pm

  33. wow great tutorial …. I have try this and its work …. thks mister …

    Comment by troy — September 4, 2009 @ 8:05 pm

  34. Thank you! I’ll try this.
    Question: What about for videos? Would videos from viikii.com work?

    Please and Thank you!

    Comment by Sam — December 16, 2009 @ 10:27 am

  35. It works! Awesome!!! And thank you (: I’ve been dying to know this. I slept really late just trying to figure this out ):

    Now I just need to do the video. Hopefully someone can tell me (:

    Comment by Sam — December 16, 2009 @ 11:01 am

  36. Thanks a billion, this works great!

    Comment by Lana — February 15, 2010 @ 5:40 pm

  37. Doesn’t work with Internet Explorer…

    Comment by foxprime — March 1, 2010 @ 3:59 am

RSS feed for comments on this post. TrackBack URL

Leave a comment