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.
Saturday, March 22, 2008
Add LightBox to Blogger
Subscribe to:
Post Comments (Atom)
71 comments:
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
Sure, what's your blog url? (and do the screenshots and links I have for editing the template look the same for you?)
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
black berry, were you able to get it working? if not, what's your blog url so I can check it out?
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
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.
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.
Logan, could you fix the link to your zip file?
FIXED! (Somehow a '/' got added to the end of the link.)
how did you set the max for a certain px?
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!
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...
Eventually got it, mostly, on about attempt 87...
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!!
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.
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
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.'
awesome and very helpful
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
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.
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
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. :)
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!
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.
Not sure if you already knew, but it works on iPhone Safari too. Cool!!
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.
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
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
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
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.
...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!
Check out the instructions under the "ACTIVATE" section of the Slimbox website for grouping a set of related images.
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?)
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
please visit my tutorial too :
Lightbox in blogger
Multibox in Blogger
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
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.
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!!!!!
Great thanks of this post~ :)
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.
Do you know why the slimbox jitters, or lags when it loads up.
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
Wow nice tutorial, thank you!!
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?
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?
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!!!
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.
Thanks for the page. I set up Slimbox as well.
Thanks for the help! Works great
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.
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!
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*
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!
Only one problem - IE8 doesn't show CLOSE in footer of image, whereas Firefox does. How to fix?
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
try look at this example...
is working http://c88i.blogspot.com/2009/11/lightbox-c88i.html
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?
I'm having difficulties with lightbox in blogger. Sometimes it works fine but somethimes the picture doesn't show. Any ideas?
any more posts coming ?
I want to quote your post in my blog. It can?
And you et an account on Twitter?
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.
Thanks a ton. 5 stars to your post. could implement it in 5 minutes. http://www.klgpix.com/
Good post and this fill someone in on helped me alot in my college assignement. Thanks you seeking your information.
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.
Might wanna upload a new link to the zip, it's not available anymore :/
Best regards,
Stefan
The instructions are quite rubbish. Perhaps 'illuminated' path is paved for those whom already know quite a bit of the technicalities behind this issue.
Thanks for making it so simple
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!!
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
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
Post a Comment