Saturday, March 22, 2008

Add LightBox to Blogger

Here's my tutorial to contribute to the Blogger community. ;)

Tutorial Description: Having one of the LightBox variants for your users to view the pictures on your blog is very nice addition. Blogger is made to be very simple for most web users and that has added a few quirks that makes the installation of a typical LightBox script a bit buggy.

Solution: I like the Christophe Beyls' SlimBox because of it's nice look, simple function, and extremely small size (7kb). So I've updated his script to work around the Blogger quirks. I also set a 640px cap on the image width to keep the image comfortably within the user's screen.

Installation:
1. First off you'll need the scripts and a place to host them. For me, I'm using my Google Page as the host.

SlimBox Parts (w/ MooTools 1.11)

2. After you've unzipped the files and uploaded them to your host, update your blog to use them by following the screens below.





3. Now that you've made it this far, add this code below your <head> tag (update with your actual hostname):

<link href="http://www.YOURHOST.com/slimbox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://www.YOURHOST.com/mootools-release-1.11.js" type="text/javascript" />
<script src="http://www.YOURHOST.com/slimbox_4Blogger.js" type="text/javascript" />



4. Done. Now just follow regular LightBox html syntax for it to work. For more details, see the SlimBox website.
at

71 comments:

  1. LadyBirdMarch 23, 2008 at 7:44 PM

    Hi, im trying to input that code, but when I try to preview my blog, it says that there is an xml error. could you help me figure out what is wrong or what im doing wrong?

    thanks

    ReplyDelete
  2. LoganMarch 24, 2008 at 3:33 PM

    Sure, what's your blog url? (and do the screenshots and links I have for editing the template look the same for you?)

    ReplyDelete
  3. LadyBirdApril 2, 2008 at 1:25 PM

    yes it does look the same. at one point when i clicked my pictures it would load the script, now it doesnt load the script it goes straight to a new window. Ive been playing with it a bit so let me re-add the slimbox stuff and then if you could take a look i would appreciate it.

    thanks

    ReplyDelete
  4. LoganApril 3, 2008 at 7:30 PM

    black berry, were you able to get it working? if not, what's your blog url so I can check it out?

    ReplyDelete
  5. LadyBirdMay 3, 2008 at 7:26 PM

    Hi, I never got it working, I used something else, which isn't as presentable but it does enlarge the pictures without taking people away from the main page, its mouseover technology.
    thanks
    B

    ReplyDelete
  6. duncanniestenMay 28, 2008 at 6:20 AM

    I have the same problem with the XML. This is the fault: "Los het onderstaande probleem op en verzend de sjabloon opnieuw.
    Uw sjabloon kan niet worden verwerkt omdat deze niet goed is opgemaakt. Controleer of alle XML-elementen correct zijn gesloten.
    XML-foutbericht: The element type "link" must be terminated by the matching end-tag ""."

    I'll try in english.. You're can't work because not all XML files are closed rightly.

    ReplyDelete
  7. LoganMay 28, 2008 at 10:35 AM

    Ok, I see what the issue is. I updated the css and javascript lines in my blog post for proper xhtml format. Hopefully this helps.

    ReplyDelete
  8. AnonymousJune 21, 2008 at 4:57 PM

    Logan, could you fix the link to your zip file?

    ReplyDelete
  9. LoganJune 22, 2008 at 11:16 AM

    FIXED! (Somehow a '/' got added to the end of the link.)

    ReplyDelete
  10. m | heckJuly 5, 2008 at 5:28 PM

    how did you set the max for a certain px?

    ReplyDelete
  11. LoganJuly 10, 2008 at 6:38 PM

    Mikael,
    Looks like you got it working! If you are still interested in how I got it working for blogger and set the max px size, open the .js file in your editor. Do a search for "AgapeDisciple" see all the changes I made to the original slimbox javascript.

    Shalom!

    ReplyDelete
  12. jim_hJuly 17, 2008 at 3:48 PM

    I've made about 50 attempts to get this working - nothing happens. It's as if the 'rel' attribute isn't even there, the image opens in the same page as always. I wonder if this is because I'm using one of Blogger's new templates...

    ReplyDelete
  13. jim_hJuly 17, 2008 at 4:04 PM

    Eventually got it, mostly, on about attempt 87...

    ReplyDelete
  14. PerryAugust 18, 2008 at 4:25 PM

    Hey Logan, great stuff!! I got this to work on my photo blog (have a look) Perry's Daily Photo Blog and I have a question. I have sized all my images to 600 tall but they are displayed larger and off the screen requiring me to scroll. How can I change this so vertical and horizontal images display at the same height?

    Thanks!!

    ReplyDelete
  15. LoganAugust 23, 2008 at 6:45 PM

    Perry,
    The way I'm keeping the width below 640px is some code I added in the slimbox4blogger.js file. (Open the file in a text editor and search for 'AgapeDisciple'.)

    When you upload a picture, Blogger creates several versions of the picture with different width sizes and puts them in different folders. (ie - s1600, s800, s720, s640, s320, etc) I'm just telling slimbox to use the picture in the s640 folder instead of a larger one.

    Unfortunately for your purposes, I'm not familiar of a way to differentiate by height in blogger. But if you find a way, I can update the js file for you.

    ReplyDelete
  16. BearuhAugust 29, 2008 at 7:35 PM

    Hmm.. not working. What am I doing wrong? Pleaaaase help! This is very important to me! This is the website I am testing it on.. but I will eventually try using it on my portfolio. Thanks!

    http://bearuhsketch.blogspot.com/

    email me at darndogdesign (at) gmail (dot) com

    ReplyDelete
  17. LoganAugust 30, 2008 at 6:22 PM

    DarnDogDesign,
    I checked out your page, you're almost there! You don't need these lines:

    script type="text/javascript" src="js/mootools.js"
    script type="text/javascript" src="js/slimbox.js"

    In each new post, you DO need to edit the html image tags that blogger makes. So once you insert an image, edit the HTML img tag. See the Slimbox website under 'USAGE' and then 'ACTIVATE.'

    ReplyDelete
  18. Big DealSeptember 3, 2008 at 6:41 PM

    awesome and very helpful

    ReplyDelete
  19. whiteparkcattlesocietySeptember 8, 2008 at 9:36 AM

    We used your version of slimbox in our blog and it looked fantastic in Firefox and Safari, but then we got a message in IE saying 'Internet Explorer cannot open the Internet site http://www.waveneyvalleyblog.com/. Operation aborted' is this a known problem? We have reluctantly removed the lightbox code from our template until we can find a workround or fix for the problem. Any ideas? Regards Nigel

    ReplyDelete
  20. CGSeptember 16, 2008 at 5:55 PM

    This comment has been removed by the author.

    ReplyDelete
  21. CGSeptember 16, 2008 at 5:56 PM

    Hello, I've implemented this method and as imajaz is reporting I cannot open my blog using IE.

    I keep getting the "Internet Explorer cannot open the Internet site".

    What can I do to make it work?

    I would also like to add that there are no problems with Firefox3 or any other browser.

    ReplyDelete
  22. LoganSeptember 16, 2008 at 6:55 PM

    I'm not sure what the issue is. I checked my blog in IE and it works fine. It looks like you've removed it from both of your blogs due to the issue so I couldn't see the error.

    If you'd like, try using the tool below for IE to diagnose the problem. If you discover what the issue is, please let me know - thanks!

    http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

    ReplyDelete
  23. CGSeptember 17, 2008 at 7:56 AM

    I've managed to get it working but only by adding the links you provided at the end of the body tag.

    But it does not run as smooth as it does on your site. :)

    ReplyDelete
  24. LoganSeptember 18, 2008 at 1:10 PM

    George, what did you do to get it working? I did not provide any links to put in your body tag in my previous post.

    Also, I checked your modified js and saw that you want only a minimum image size of 800px. To do this, you also need to edit the "imgSizes" array and remove "s800/" and "s720/". Your other changes can stay the same.

    Glad it's working for you!

    ReplyDelete
  25. Dominic AllkinsSeptember 25, 2008 at 8:29 AM

    Hi. After a bit of fiddling I got it working. Thank you so much.

    Will take me a while to start adding content, but if anyone is interested URL is: http://visiblepixels.blogspot.com

    Have fun everyone.

    ReplyDelete
  26. Dominic AllkinsSeptember 25, 2008 at 10:03 AM

    Not sure if you already knew, but it works on iPhone Safari too. Cool!!

    ReplyDelete
  27. LoganSeptember 25, 2008 at 6:09 PM

    Glad you got it working Dominic. Please let know if there's anything I can do to improve. Btw, awesome site and pics. Where do you live?

    And thanks for the FYI about the iPhone's version of Safari browser.

    ReplyDelete
  28. whiteparkcattlesocietyOctober 1, 2008 at 6:47 AM

    Hi Logan

    I have revamped the code for my blog and I think it is working fine now, but we do not have any Windows PCs on site to check it on Internet Explorer. Fingers crossed it is running ok.

    Thanks Nigel

    ReplyDelete
  29. AnonymousOctober 3, 2008 at 7:19 AM

    Back to the drawing board, IE is still having a problem with the code and not allowing people to browse the pages of the blog, so I have taken the code out again for now.

    Nigel

    ReplyDelete
  30. apkOctober 3, 2008 at 6:12 PM

    Hi,
    I'm trying to make work slim box on my blogpage atelier2203.blogspot.com
    but it won't work :(
    could u help me? ...I'm not so good in CSS and html

    ReplyDelete
  31. LoganOctober 4, 2008 at 8:29 PM

    Nigel,
    Sorry to hear it's not working for you. IE can certainly be frustrating to "standard-based" web coding.

    atelier2203,
    Looks like it's working fine in your blog. I checked it in IE too.

    ReplyDelete
  32. apkOctober 5, 2008 at 12:14 PM

    ...now is working -i fixed it up ...but don't know how to play the whole set (prev and next button don't work)
    any idea?
    tnx!

    ReplyDelete
  33. LoganOctober 5, 2008 at 3:21 PM

    Check out the instructions under the "ACTIVATE" section of the Slimbox website for grouping a set of related images.

    ReplyDelete
  34. apkOctober 7, 2008 at 12:11 PM

    it works! :D ...now i have another problem -do you know maybe how to set all the images on the same size?

    to make the square thumbnails? (to set vertical and horisontal images as square?)

    ReplyDelete
  35. Matt BrandonOctober 20, 2008 at 11:52 PM

    Hi, Your info was easy to follow. But for the neophyte that I am the slimbox tutorial is a bit (read: WAY!) over my head. I have manage to get the code you wrote have into my blogger's template, but not much further. Anyway can I skype or email you and get a little further help?

    Under the Mercy

    http://thedigitaltrekker.com/news

    ReplyDelete
  36. Cheap Iloilo PC Install RepairOctober 30, 2008 at 10:40 AM

    please visit my tutorial too :

    Lightbox in blogger

    Multibox in Blogger

    ReplyDelete
  37. Jason Andrew BowlesFebruary 10, 2009 at 2:22 PM

    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

    ReplyDelete
  38. LoganFebruary 11, 2009 at 9:52 AM

    Jason, Are you using the slimbox script in my post? I see lightbox.js in your blogger code instead. (Also, I don't see the mootools script in your code.)

    Notice that slimbox is a smaller version of lightbox and the edits I made to js code allow it to work with how blogger displays images.

    ReplyDelete
  39. Somnambulist StudiosFebruary 13, 2009 at 10:47 PM

    I'm trying to implement this on my site http://somnambulistart.blogspot.com/
    but I need it to work with fx.scroll. I've tried everything I can think of. Any help would be TREMENDOUSLY APPRECIATED!!!!!

    ReplyDelete
  40. SonicApril 13, 2009 at 3:39 AM

    Great thanks of this post~ :)

    ReplyDelete
  41. GraceApril 17, 2009 at 3:46 AM

    Hello I have been trying to get this to work for my blogshop.

    I am testing it at this website:

    http://sampleat123.blogspot.com/

    Please help me thank you.

    ReplyDelete
  42. ChrisMay 16, 2009 at 11:58 AM

    Do you know why the slimbox jitters, or lags when it loads up.

    ReplyDelete
  43. Alexander E.May 18, 2009 at 2:41 PM

    Hi. Thank you for the work you've put into this :) It looks and works great. But I would like to remove the 640 pixel limit to have no limit. How do I do that? Just remove the lines with s640 in them? Or more or change them?

    And also, my entire page doesn't load with SlimBox, like it didn't with LightBox either :/ You can see a post I tested with here: http://reisendealex.blogspot.com/2009/05/en-dag-to-turer.html

    ReplyDelete
  44. ardianzzzMay 28, 2009 at 12:57 AM

    Wow nice tutorial, thank you!!

    ReplyDelete
  45. JakeJune 2, 2009 at 6:21 PM

    Logan
    This is perf-licious! Is there a way to automatically apply lightbox to every image so i dont have to teach my wife how to add rel="lightbox" to every image? does that make sense?

    ReplyDelete
  46. JasonJune 10, 2009 at 2:25 PM

    I'm wondering the same thing as Jake. Do I need to teach my wife how to add the rel="lightbox" part to every picture or can I change a setting somewhere that would add this tag every time?

    ReplyDelete
  47. AnonymousJuly 11, 2009 at 9:30 PM

    This is great stuff but i have a problem.

    I did what you describe here on the top of the page, according to the instructions, but then what?

    I go to that slimbox page but don't know how to do it.

    All i am saying is can you create instructions like the ones on top for what to do after the steps you describe here?
    Thank you!!!

    ReplyDelete
  48. AnonymousJuly 11, 2009 at 9:33 PM

    You say: Now just follow regular LightBox html syntax for it to work. For more details, see the SlimBox website.

    Well i need help practically on what to do to get pictures to show in lightbox.

    Do i just upload pictures and they auto-show in lightbox? something tells me there is more to it before that. That is what i am asking you to explain. Thank you.

    ReplyDelete
  49. IsmoJuly 24, 2009 at 6:57 PM

    Thanks for the page. I set up Slimbox as well.

    ReplyDelete
  50. jeanmarieJuly 24, 2009 at 11:37 PM

    Thanks for the help! Works great

    ReplyDelete
  51. WebSpoonfulJuly 27, 2009 at 11:45 PM

    Hi Logan,

    You have a very nice site and blog post. I have a problem though.

    I have done the instructions from your post. I am just not sure if I have placed the right codes. Sorry, I am not that techy. XD I will try to give as much detail as possible. Please bear with me.

    When I clicked the picture, it only went to the picture link (of photobucket).

    My image link/code looks like this (let me substitute "<>" with "[]" for this comment's purposes only):
    [a href="http://i682.photobucket.com/albums/vv183/WebSpoonful/Fragoria/BrowserGamesOnline-FragoriaVillage.jpg" rel="lightbox" title="Fragoria Village"][img src="http://i682.photobucket.com/albums/vv183/WebSpoonful/Fragoria/BrowserGamesOnline-FragoriaVillage.jpg" border="0" alt="Photobucket" width="410" /][/a]

    I used mediafire to upload the Slimbox files.
    After the [head] part, I placed...
    [link href='http://www.mediafire.com/webspoonful/slimbox.css' media='screen' rel='stylesheet' type='text/css'/]
    [script src='http://www.mediafire.com/webspoonful/mootools-release-1.11.js' type='text/javascript'/]
    [script src='http://www.mediafire.com/webspoonful/slimbox_4Blogger.js' type='text/javascript'/]

    I tried also removing "webspoonful" from "http://www.mediafire.com/webspoonful/" but it still did not work for me.

    Where could I have gone wrong? Please help. :S

    I have a "Test" post from my blog site: http://browsergamesonline.blogspot.com. Kindly refer to this post entitled "Test."

    Thank you.

    ReplyDelete
  52. WebSpoonfulJuly 28, 2009 at 7:51 AM

    Hi Logan,

    I got my answer. Mediafire did let me host the files but it was not letting me link to it directly so I looked for other hosting sites. Now, it's working.

    Thanks!

    ReplyDelete
  53. WebSpoonfulJuly 28, 2009 at 8:04 AM

    Oh, I forgot to tell you because I got so excited and I apologize for the continuous comment posts. I have linked this awesome "Add Lightbox to Blogger" to my "Blog Gurus" on the sidebar. You can view it on http://browsergamesonline.blogspot.com

    Again, many, many thanks to you!
    Keep the nice posts coming! *thumbs up*

    ReplyDelete
  54. Thomas J. NevinAugust 3, 2009 at 12:06 PM

    This is great with webshots of manuscripts from pdfs - blogger compresses them too much, even uploaded large, but slimbox brings them right up to readable level. Just great!

    ReplyDelete
  55. Thomas J. NevinAugust 4, 2009 at 4:02 AM

    Only one problem - IE8 doesn't show CLOSE in footer of image, whereas Firefox does. How to fix?

    ReplyDelete
  56. © Grégoire Thomas. 2009September 10, 2009 at 8:29 AM

    Hi,
    I've been trying to use the slimbox effect on my blog but it doesn't work, i'm getting crazy!!!

    my blog is gregoirethomas.blogspot.com
    i tried on the first picture that displays.

    i use ( and ) instead of < and >

    this what i added in the (head):

    (link href='http://dl.getdropbox.com/u/1956636/slimbox_4blogger/slimbox.css' media='screen' rel='stylesheet' type='text/css'/)(script src='http://dl.getdropbox.com/u/1956636/slimbox_4blogger/mootools-release-1.11.js' type='text/javascript'/)(script src='http://dl.getdropbox.com/u/1956636/slimbox_4blogger/slimbox_4Blogger.js' type='text/javascript'/)


    And this what i added in the post:

    (a href="http://2.bp.blogspot.com/_E8QV98K9UCI/SqdmX4Ix8AI/AAAAAAAAAUo/ULIQQdVkIl0/s1600/nat_green.jpg" rel="lightbox[SlimboxInstall]")

    Can you help me with that?

    Thank you very much

    Greg

    ReplyDelete
  57. Studio c88iNovember 5, 2009 at 12:03 PM

    try look at this example...
    is working http://c88i.blogspot.com/2009/11/lightbox-c88i.html

    ReplyDelete
  58. BogdanDecember 3, 2009 at 2:48 PM

    Ok, I managed to make it work on my blog but how can I make it so that the pictures show at their exact image size and not 640?

    ReplyDelete
  59. izdelava spletnih straniDecember 10, 2009 at 9:52 AM

    I'm having difficulties with lightbox in blogger. Sometimes it works fine but somethimes the picture doesn't show. Any ideas?

    ReplyDelete
  60. AnonymousDecember 11, 2009 at 3:04 PM

    any more posts coming ?

    ReplyDelete
  61. AnonymousJanuary 7, 2010 at 1:13 PM

    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

    ReplyDelete
  62. UnknownFebruary 1, 2010 at 10:02 PM

    Great stuff, I got mine working but for some reason the lightbox is not showing as the top most element of the page.

    see.
    http://www.notf.com.ph/2010/01/christmas-for-cause.html

    thanks.

    ReplyDelete
  63. Karthik L GFebruary 3, 2010 at 10:40 PM

    Thanks a ton. 5 stars to your post. could implement it in 5 minutes. http://www.klgpix.com/

    ReplyDelete
  64. AnonymousFebruary 14, 2010 at 12:09 AM

    Good post and this fill someone in on helped me alot in my college assignement. Thanks you seeking your information.

    ReplyDelete
  65. MicroRollerMarch 12, 2010 at 11:27 PM

    I found your site after having a problem with lightbox. On IE7 I was getting an error that would prevent the entire page from being displayed.

    Searching for alternatives lead me here but I still had the same problem with slimbox with your modifications.

    Turns out it's a bug in IE7 based on how lightbox/slimbox modifies the DOM before it's done. At least on my page anyway.

    The solution for me was to move all the slimbox script tags to the bottom of the template after the close body tag.

    It fixes lightbox as well. I decided to stick with slimbox because of it's size. You can see it in action on my poker blog.

    Thought I'd share in case anyone was having similar problems.

    ReplyDelete
  66. Stefan GustafssonMay 1, 2010 at 5:56 PM

    Might wanna upload a new link to the zip, it's not available anymore :/

    Best regards,
    Stefan

    ReplyDelete
  67. edXAugust 2, 2010 at 1:44 PM

    The instructions are quite rubbish. Perhaps 'illuminated' path is paved for those whom already know quite a bit of the technicalities behind this issue.

    ReplyDelete
  68. AnonymousNovember 14, 2010 at 2:17 PM

    Thanks for making it so simple

    ReplyDelete
  69. Sunny JonesFebruary 3, 2011 at 8:00 PM

    I could use a little help. I added the code, and have made it work successfully for one photo, but what if I want to create a thumbnail gallery for my lightbox? examples are at http:www.prophotoblogs.com under the examples. I would love any help as I've been trying for days to make this work. Thank you for your blog! very helpful!!

    ReplyDelete
  70. MarkusFebruary 4, 2011 at 12:03 AM

    Great tips, lightbox works very well with Blogger, check here for more tips:

    http://www.high-on-it.co.za/2011/02/adding-lightbox-to-blogger.html

    ReplyDelete
  71. pearlyadderApril 18, 2011 at 7:33 AM

    Hi.

    Great post - thanks. I don't know css and I know very little html but your post enabled me to set this up. I am having one small problem with it though: everything works beautifully except that the 'close', 'next' and 'prev' labels are not loading. These are hosted in the same file as the css file so it should work, but doesn't. Any help you can give me would be gratefully received! :o) You can see the post I tried it out on here: http://glueandglitter.blogspot.com/2011/03/spring-is-in-air.html

    ReplyDelete

Thank you for your comment. If you don't have one of the accounts listed, just put your name in the Nickname box below (URL is optional).