Friday, March 4, 2011

How to integrate a lightbox in your blog (blogspot.com)

One thing that bugged me since i started my blog is that all image links open in the current window/tab.
So i decided to modify the lightbox script from Lokesh Dhakar to automatically identifying images in your post and providing a grouped lightbox functionality for them.

Go to your dashboard, design, edit html.
Search for </head> in the textarea, and post those 4 lines right before it.
<script src='http://dl.dropbox.com/u/1881429/Javascripts/prototype.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/1881429/Javascripts/scriptaculous.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/1881429/Javascripts/lightbox.js' type='text/javascript'/>
<link href='http://dl.dropbox.com/u/1881429/Javascripts/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
To exclude an image from being displayed in a lightbox just give it the class "nolightbox".

Thats it, now you have a beautiful lightbox, check my example here:




PS: This should work with Tumblr,Picasa as well as blogspot.com hosted images. Feel free to post problems or requests in the comments.

PPS:
Some details how i achieved this:

var group_name = 'bloggers';
$$('img').each(function(e)
{
if(e.src.indexOf('s200',0)!=-1 || e.src.indexOf('s320',0)!=-1 || e.src.indexOf('s400',0)!=-1 || e.src.indexOf('s640',0)!=-1 || e.src.indexOf('s1600',0)!=-1)
{
var rel_name='lightbox['+group_name+']';
e.setAttribute('rel',rel_name);
}
});


After the dom has finished loading the script checks all images on the page for occurrences of s200/s320/s400/s640 and s1600 in the image source, which are the blogger.com  resize levels. For each image we add a rel="lightbox[bloggers]" so the lightbox script can recognize this image.

myhref = myhref.replace('/s200/','/');
myhref = myhref.replace('/s320/','/');
myhref = myhref.replace('/s400/','/');
myhref = myhref.replace('/s640/','/');


In the function that opens the actual lightbox i simply remove the scale levels so you get a full sized image inside the lightbox.

For full source check my lightbox.js

PPPS:
If you want a lightbox without the "Download" option use
<script src='http://dl.dropbox.com/u/1881429/Javascripts/lightbox-yenaaa.js' type='text/javascript'/>
instead off
<script src='http://dl.dropbox.com/u/1881429/Javascripts/lightbox.js' type='text/javascript'/>
also added tumblr support.

98 comments:

Christophe said...

That's awesome. I might add that! Thanks.

T3CH said...

Wow, you have to be pretty smart to all that scripting stuff ...

ThingsIThinkAbout said...

I love lightbox! Thanks for this info on how to implement it into blogger.

BernT said...

Thanks for the tips

Alphabeta said...

What T3CH said - I don't want to mess about with my script, but nice work if you're confident enough.

Anonymouse said...

whoa! adding now. that's awesome.

Anonymouse said...
This comment has been removed by the author.
ryanthedirtpoorblogger said...

very handy, thanks!

thenitefalls said...

I just did it right now to my blog! Looks a lot better! Thanks a lot :D

Yenaaa said...

oh wow, this is actually going to be really helpful for my blog because I post pictures a LOT!
cool tiltshifts <3

MacAttack said...

I really wanna try this!

Killy said...

well cool.

Yenaaa said...

Hey i have a question, is it possible to remove the "download" option?

mac-and-me said...

yes, i can make you a customized one without download

mac-and-me said...

yenaaa
use
http://dl.dropbox.com/u/1881429/Javascripts/lightbox-yenaaa.js
instead off
http://dl.dropbox.com/u/1881429/Javascripts/lightbox.js
and download is gone

Killy said...

just tryed it. thanks man

mac-and-me said...

@killy
i will soon extend it to support tumblr and other external images as well

Yenaaa said...

Thanks so much!!! I just didn't want to encourage people to save my pics and stuff.
Works wonderfully ;D

Chuck said...

Rather neat.

haluk said...

i'm too lazy to add this my blog. thanks anyway

duffboi said...

very kewl. I might give this a shot on my blog.

Freek said...

That's insanely helpful. I implemented the code right away.

duffboi said...

is there a way to get this to work while resizing the image to fit the screen? I'd use it, if so.

A Hermit said...

Well that's pretty nifty

Atlas said...

Lovely. Will see how and where I can add this on my blog.

Thank you very much

mac-and-me said...

@duffboi
kinda

it would be possible to check for screen resolution/browser window size and then choose the nearest rescale level

i will think about how i can include this

baxxman said...

Really cool, thanks a lot for that stuff!
Baxxmans

Renar said...

Maybe I'll try it out on my blog

Ross said...

Sick thats handy thanks

duffboi said...

Thanks mac-and-me

Justsayin' said...

That's really cool man.

The Moustache Man said...

that's cool stuff man. you're pictures are always sweet to look at

Space Marine said...

wish i knew about this yesterday

serious_nonsense said...

thanks for the tipps, keep it up

Denzel said...

thx for the post. ;)

LunaSihne said...

Whoa. That's pretty useful.
And I must add that those are nice photos, but it's too bad that the photos are so large and you have a hard time seeing the whole thing. But really good job on the script.
It would be great to know all of the uses for knowing how to edit scripts.

Candlej- said...

that could be a nice add-on.... thanks!

randomramblingggg.blogspot.com

Jcache said...

Thats pretty awesome, I may do so.

husar said...

Wow, good post

Rachel Neilson said...

very helpful!

imnotabot said...

Awesome share! thank you!

Trelin said...

Are we allowed to download your javascript and use/modify it as we wish? If I were to use it I'd prefer not to rely on someone's dropbox account for hosting.

mac-and-me said...

@Trelin
sure just let me know if you made some crazy extensions

mac-and-me said...

@trelin
ps you will need
http://dl.dropbox.com/u/1881429/Javascripts/prevlabel.gif
http://dl.dropbox.com/u/1881429/Javascripts/nextlabel.gif
http://dl.dropbox.com/u/1881429/Javascripts/loading.gif
http://dl.dropbox.com/u/1881429/Javascripts/close.gif
and to change the images in the css/js as well

Polybius said...

Using this now

thatguy said...

Spiffy. Useful. I might add that to my own!

Jack Bosworth said...

This will actually be very useful on my blog. Awesome post!

Aaron M. Gipson said...

I know this will sound like an incredibly stupid question (I did tell you there would be those once in a while), but would this just work for a Mac?

Reilly said...

omg that's great! i'm so following!

seamagpie said...

aha thanks for the guide it was an interesting read but i'm not interested in doing it

Triper said...

helpfull info, thanks! :)

Questions said...

Wow, this is a great tip. I never thought of doing this but will be looking at how I can apply lightbox to my blog.

ebm93 said...

Nice, I'll try this out

Venus said...

awesome....

Leon Smith said...

Thanks for the tip! Following

Charles said...

cool, thanks for that info

Beggers said...

This bugged the hell out of me aswell, thx man!

rinns said...

interesting, if only I had a mac right? >.>

ed said...

i click on your lightbox pic, got never ending spinning lightbox icon D:

Chris said...

Wow this is very helpful stuff. Thanks alot, and following

SpiralOut said...

Cool stuff! This could help out a lot. =D

GetSomeSwag said...

thanks a lot! I needed this.

A Beer for the Shower said...

Not sure if I'm savvy enough to do this, but still very cool info.

Josh said...

It looks really great. I wish I had more photos on my blog, so I had a reason to play with this.

Adventure Person said...

Useful for us bloggers, thank you!

Zach said...

if you have it open in the same window, you can get more views...

A said...

Oh hey that's awesome!
I don't really have time today but I might definitely add it tomorrow, and if I do I'll make sure to give you a shoutout!

Great stuff!

Elliot MacLeod-Michael said...

Nice, I may try this

d0t said...

nice post man, I'm gonna have to use this sometime. Followed :)

Spike said...

really helpfull, thanks

Football Maniac said...

Cool man, thanks for sharing!

anonymous said...

nice tip! thanks!

Robert Fünf said...

Awesome. I have a lightbox greasemonkey script, but didn't think about doing this.

Joe Somebody said...

i take advantage of picasa. being a linux and windows user and all.

mac-and-me said...

@Aaron M. Gipson
@rinns
you dont need a mac for this

@zach
it makes no difference the http request is the same

Rylai said...

damm sounds like hardcore programming hahaha

ballandkicks.blogspot.com

Dj DeKu said...

Very nice guide thanks.

Anton Nuemus said...

thanks!
Now I also have this nice lightbox :)

fabio_2007 said...

thanks for the info!

Максим said...

Thanx!

My name is Maman. I'm one who likes all kinds of music. said...

great stuff,thanks for share.

Salman A said...

Lightbox is awesome. I've used it in some websites I've made. I just wish I knew PHP.

Thanks for sharing!

Jason said...

thank you! that always bothered me too.

http://coolstuffgoeshere.blogspot.com

The_illustrative_Mind said...

Borrowing! It has a problem with embedded youtube videos where the videos will overlap images brought up with this. Other than that, it's been amazing.

amBored said...

nice I have made classic slideshow with photobucket album :D +followed

mac-and-me said...

@The_illustrative_Mind
this is a problem how blogspot embedds youtube videos, i soon post a collection of useful blogspot javascript which fixes this problem

Burger said...

I use imgur and tinypic :(

Максим said...

Works,I checked!

dgrphx said...

that mc donalds picture got me hungry

Stare Dad said...

i only saw this one now.. really great tip.. i gotta apply it to my blog.

Zuckerbäckerin said...

thank you!

Lucky13 said...

Very useful find! Also thanks for the edits and providing us with the js links through dropbox :D
I added this to my blog, since I tend to post high-res pictures from time to time.

Marianette said...

Thank you!!!

andrewxmckenzie said...

the image won't actually open now. could you help me out?

Sommerlager said...

Hi - what u do is really great - but i ve got a problem - i think ..a real beginner problem..you wrote that if you don`t want a pic shown in lightbox u just have to add to the class "nolightbox" ..but u know i`ve tried many ways and it just doesn`t work out..could you give me a hint? or a lttle more specific information where to put in what ..? would be great!! thx!!

Popsessed said...

Hello.
I wish this worked for me, but just like with the regular script the pictures just keep opening in a new tab when I click them..
Do you have any tips how to solve this?

Electric Addict said...

oh perfect i can exclude my banner cool stuff!!!!

ad said...

Excellent work!
You give me some ideas.
I do not use lightbox in my blog, as lightbox does not support captions to images , and this is very important for me.
Instead I use a modified code of lytebox (modified as it had issues with IE browser).
I am thinking of trying to modify the code I use to be able to identify images in post.
If you want to see it working, have a look at:
http://dimitris.aspiotis.com/2010/04/koutoukia-kai-hasapotavernes.html
just in case you would like to modify this code as well.
Except for being able to support captions, the code I use, is very light: only 38kb vs 197kb of lightbox.
Regards.