Lightbox JS v2.0 Integration with Blogger Template

54 Comments / tweaks / By

Create a simple Photolog using Blogger.com and Lightbox JS. A step by step guide for photo bloggers; to Integrate Lightbox with their existing Blogger publishing system.

Blogger is a popular weblog publishing system, which supports custom designs and templates. Meanwhile Blogger is not much popular as other blog publishing system like WordPress, etc for its support to Plug-ins. In other hand Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It is lightweight and works with most of the browsers with Javascripts enabled.

Yesterday, I was trying to publish my own Photolog. I was looking for a good web serice so that it would ease my task. I am with Blogger for a quite time and still I have not moved my blog to WordPress, even I wish so. So I decided to go with Blogger again with the FTP publishing enabled. But blogger didn’t have any ready made plug-in for Lightbox so I had to hack the code little bit. Blogger with Ligthbox would give any blog a realistic Photolog look.

Step by Step Guide:-

  1. Download the Lightbox JS script from Here and copy the scripts to your web server most likely where your blog is been published.
  2. Login into Blogger system and go to Template –> Edit HTML
  3. Add the below line into the Meta section of HTML tag 
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">

  4. Add the following scripts tag in the header section of the HTML template 
    <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
  5. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
  6. Once you’re done Save the Template.
  7. With Blogger, we will not able to tweak their system directly, since it is not open source software. So we need to have little manual effort every time before you publish a photo log entry.
  8. After creating a blog entry in Blogger system, do the following steps before publishing.
  9. Go to Edit HTML option in the Post window as show in the figure
  10. Once you have uploaded the image you will see an entry similar shown in the figure below.

  11. Replace the selected code above with rel=”lightbox” as shown below
  12. You can also add title tag in tag to enable Caption in the LightBox displayed
  13. Now you’re all set and you can publish your Photolog.

If you like to have image sets for each post entry then you need to add rel="lightbox[group_name]" for all the images that you which to show in that particular group image set. It should be similar to the below image.
Now you have a wonderful Photolog to start with as I do; Visit my PhotoLog at The PhotoLog

54 thoughts on “Lightbox JS v2.0 Integration with Blogger Template”

  1. Arpit

    hello came to your blog thru JohnTP blog..
    you seems to be intersted in technorati fav exchange.
    Can we exchange technocarti fav?
    If yes, add my blog to your technocrati fav and drop a msg on my blog, and i will add you in my technocrati fav
    Thanks
    Arpit
    http://technicalbliss.blogspot.com

    my technocrati username is arpitagarwal82

  6. benedict herold

    hey.. I checked up your site.. I was not able to check in much detail, since the image you uploaded is not available anymore in your site. can you update tat.

  7. Yiannis

    I want to embedded the Lightbox JS script into an image into my blog (blogger.com).But i can’t find how to execute the first step

    >
    Where exactly in my blogger.com ?
    Can you help me …
    Thanks.

  8. benedict herold

    hey, if you’re running new blogger then here is what you need to do.

    Goto Settings — > Template –> Page Elements
    Add HTML/JavaScript page element into your blog. Paste the Java Script there. Now you’re all set. Now you follow from step 5. Let me know if that helped. !

  13. Jayson Ang

    hello benedict,

    i’m using blogger, using a free account …
    how do i actually upload the lightbox css files to blogger?

    Thanks in advance …

  15. James G. Vaccari

    Hi Benedict,

    I try your tutorial, and it works very well… I just have one problem. When I click to go to the next page (I have five posts in each page), the lightbox in the next page does not work anymore. Have you seen this?

  16. Gratton

    Hi Benedict,

    Thanks for your great work! I have wanted this feature for some time and have made time to get it done. I followed your tutorial carefully and consider I have placed the code segments in the correct places however, my test image still loads in a new page 🙁

    I loaded the .js and .css files in GooglePages and edited the image (and other) links where required, and changed the URL references in your code to correspond to these file paths.  Can you see what I have done wrong?  Your help will be appreciated.

  17. Gratton

    Hello Benedict – I posted a comment earlier today … now it's gone. I followed every step of your guide, but my test image still loads in a separate page.  Can you help please?

  18. Matt

    Hi Benedict, Many thanks for this article, I've been trying to add lightbox to my blogger account for a while and followed the steps but my photos don't load – instead the lightbox loads but without anything in it.

    Please help if possible.

  19. Pingback: ♥♥ diLLa’s page: emang site nya orang paling keren sjagat raya.. ♥♥

  20. chad

    benedict,

    when i try to post an image and use the lightbox feature, it starts to work, and then my image loads at the bottom of the page.  i can tell that it's almost there, but this seems to be a problem some people have had…i think it has something to do with this "rel=lightbox" feature.

    could you help me out?

    thanks,

    chad

  21. Shane

    Hi.

    I’m also trying to get the light box up and running. As far as i can tell I have followed all the instructions correctly and the lightbox works for pages hosted on my site alongside the js files and css but when i try to do it in Blogger clicking on the link takes me straight to the link location. I’ve had a look at the source code for a couple of functioning pages (e.g. Benedict’s page) and noticed that one of the lines looks as follows:

    if i try to copy that into my own template (changing the urls to point to my own site) i get an error message from blogger saying that the xml is not well formed. Ive tried tinkering with the ” and while there are no error messages then the light box does not work. Any suggestions on how to add this line to Blogger in such a way that it doesn’t cause errors? Thanks in advance.

    Shane

  23. claude

    Hi Ben,
    I tried the newest lightbox js and made it work so far… BUT:
    my blogger-pictures are automatically saved to the blogger-server on an adress starting with http://bp0.blogger.com…. and nothing happens. the script is loading for hours without displaying anything, not even the size of the pic. if the picture I want to display is refered on a usual http://www… adress everything is fine.
    Any suggestions?

  24. claude

    funny, found the answer myself!
    if anyone else interessed: the new blogger server bp0.blogger.com transfers yor pictures to websites! they cant be displayed by lightbox.
    solution:
    in the url of the picture (which is actually a website) is always ending like this : /s1600-h/your.jpg remove the -h and everything is fine!
    phew!

  25. azurein

    how exactly do you “copy the scripts to your web server most likely where your blog is been published.” I can’t go through the next step since i don’t know how i’d copy the scripts to blogger

  27. Jomjo

    It’s all very nice, but how is it that most of the bloggers that have tried to do this can’t make it work?
    I’ve made it work in my server homepage. In blogger, referencing the code to the same server… impossible!
    Tried the code in many positions in the html blogger template. It blocks the page from being loaded.
    Tried it (the js part) in a page element of the layout… the links for the images died, they don’t even open anything.
    So… how is it that those that have managed, simply don’t explain how they did it? Where does the code go? There’s no meta tag in webblog. Where in the header section and how to present blocking? Now that would be helpfull …

  29. jim h

    Unfortunately you can only do this if you’re using Blogger’s FTP publishing method. And if you use FTP you can’t use their new templates. Sigh.

  30. JonnyRRawr

    Thank you Benedict, for posting. I followed your steps, and it kinda worked- lightbox would activate, but I would be stuck in loading.

    I read the comments and took off the “-h” off of /s1600-h/” and it works now!

  31. kestutis

    hello, i tryed your how-to lightbox manual. I can’t upload your template. Blogger drop’s this one ->> “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 content of elements must consist of well-formed character data or markup.”

    Please help me with it, thnx

  32. maw

    hi, i followed your directions for lightbox but it isn’t working. can you help? i posted an image but when i click on it nothing happens.

    thanks in advance.

  35. Pingback: del.icio.us links for January 25th | Elastic Minds

  39. ben posch

    hi ben, i have a problem with lightbox on blogger i cannot find an answer to anywhere on the internet (i admit i am a little bit of a caveman when it comes to programming, so i’m sure you will be insulted by my sloppy code. sorry).

    i have lightbox2.04 running on my blogger blog, located at benposch.com. problem is, lightbox doesn’t appear to work when you view the permalink entry page, only when you’re on the main page. the second entry “lightbox test” is the only place i have it right now, so you can see what i mean.

    it seems like you know a lot about using this so i am hoping you can help me. thanks, and very nice site by the way! ben

  40. ben posch

    sorry, i’m an idiot. didn’t check to see that the original code had absolute links asigned to the js and all that. sorry, disregard that last post. duh. ben

  42. Jonathan

    Wondering if the publisher of this is still around… He kinda got people started and left…like a long time ago too I see.

  43. Aishwar

    Hey,

    I have created an easy to implement solution to the above issue – so that you don’t have to click “edit html” for each image you add. Its not lightbox itself, but something similar.

    You can check it out here AiBloggerBox

    I am developing the next version now which will automate lightbox integration itself. Features such as grouping images are unavilable, but otherwise it gets the job done. Do check it out!

    Hope someone finds it useful.

  44. johanhendrix

    the gallery is located inside an iframe.
    i want the picture to show on top of the main page and not inside the iframe.
    how do i fix this?

  45. manoz

    this doesnot work because this idea is for blogger who are hosting the pages by themselves not by blogger. After hosting blog by own, nobody has to teach daddy to put things in blogger.

  46. Elijah G.

    Hi, if your images are loading at the bottom of the screen it means your lightbox.css file is not being accessed, referenced, or used.

    The lightbox.js script generates html which is added to the bottom of your blog’s html when it is executed, but it is the lightbox.css which overlays the image inside the lightbox container and fades the background with an opaque filter. Make sure you have uploaded lightbox.css to the right location and that you have the tag correctly formatted and inserted in the section of your blog’s html.

  49. john

    And by ‘meta’ section you mean? Please, be clear in your instructions. I’m grateful to people who attempt to provide solutions, but doing so in a self-absorbed way makes it pointless and generates more questions than solutions.

    j

Comments are closed.

Scroll to Top