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.

72 comments:

LadyBird said...

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

Logan said...

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

LadyBird said...

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

Logan said...

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

LadyBird said...

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

duncanniesten said...

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.

Logan said...

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.

Anonymous said...

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

Logan said...

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

m | heck said...

how did you set the max for a certain px?

Logan said...

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!

jim_h said...

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...

jim_h said...

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

Unknown said...

Hi,

Could not get this working. I do not think the script itself is been called, it straight away open the enlarged image. I believe to have followed closely as detailed by logan.

Any help would be appreciated to get this working. I have been testing this in http://cine-buzz.blogspot.com/

Thank you.

Perry said...

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!!

Logan said...

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.

Bearuh said...

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

Logan said...

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.'

Big Deal said...

awesome and very helpful

whiteparkcattlesociety said...

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

CG said...
This comment has been removed by the author.
CG said...

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.

Logan said...

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

CG said...

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. :)

Logan said...

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!

Dominic Allkins said...

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.

Dominic Allkins said...

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

Logan said...

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.

whiteparkcattlesociety said...

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

Anonymous said...

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

apk said...

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

Logan said...

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.

apk said...

...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!

Logan said...

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

apk said...

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?)

Matt Brandon said...

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

Cheap Iloilo PC Install Repair said...

please visit my tutorial too :

Lightbox in blogger

Multibox in Blogger

Jason Andrew Bowles said...

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

Logan said...

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.

Somnambulist Studios said...

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!!!!!

Sonic said...

Great thanks of this post~ :)

Grace said...

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.

Chris said...

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

Alexander E. said...

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

ardianzzz said...

Wow nice tutorial, thank you!!

Jake said...

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?

Jason said...

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?

Anonymous said...

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!!!

Anonymous said...

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.

Ismo said...

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

jeanmarie said...

Thanks for the help! Works great

WebSpoonful said...

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.

WebSpoonful said...

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!

WebSpoonful said...

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*

Thomas J. Nevin said...

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!

Thomas J. Nevin said...

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

© GrĂ©goire Thomas. 2009 said...

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

Studio c88i said...

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

Bogdan said...

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?

izdelava spletnih strani said...

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

Anonymous said...

any more posts coming ?

Anonymous said...

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

Unknown said...

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.

Karthik L G said...

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

Anonymous said...

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

MicroRoller said...

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.

Stefan Gustafsson said...

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

Best regards,
Stefan

edX said...

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

Unknown said...

Thanks for making it so simple

Sunny Jones said...

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!!

Markus said...

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

pearlyadder said...

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