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'/>To exclude an image from being displayed in a lightbox just give it the class "nolightbox".
<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'/>
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:
That's awesome. I might add that! Thanks.
Wow, you have to be pretty smart to all that scripting stuff ...
I love lightbox! Thanks for this info on how to implement it into blogger.
Thanks for the tips
What T3CH said - I don't want to mess about with my script, but nice work if you're confident enough.
whoa! adding now. that's awesome.
very handy, thanks!
I just did it right now to my blog! Looks a lot better! Thanks a lot :D
oh wow, this is actually going to be really helpful for my blog because I post pictures a LOT!
cool tiltshifts <3
I really wanna try this!
well cool.
Hey i have a question, is it possible to remove the "download" option?
yes, i can make you a customized one without download
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
just tryed it. thanks man
@killy
i will soon extend it to support tumblr and other external images as well
Thanks so much!!! I just didn't want to encourage people to save my pics and stuff.
Works wonderfully ;D
Rather neat.
i'm too lazy to add this my blog. thanks anyway
very kewl. I might give this a shot on my blog.
That's insanely helpful. I implemented the code right away.
is there a way to get this to work while resizing the image to fit the screen? I'd use it, if so.
Well that's pretty nifty
Lovely. Will see how and where I can add this on my blog.
Thank you very much
@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
Really cool, thanks a lot for that stuff!
Baxxmans
Maybe I'll try it out on my blog
Sick thats handy thanks
Thanks mac-and-me
That's really cool man.
that's cool stuff man. you're pictures are always sweet to look at
wish i knew about this yesterday
thanks for the tipps, keep it up
thx for the post. ;)
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.
that could be a nice add-on.... thanks!
randomramblingggg.blogspot.com
Thats pretty awesome, I may do so.
Wow, good post
very helpful!
Awesome share! thank you!
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.
@Trelin
sure just let me know if you made some crazy extensions
@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
Using this now
Spiffy. Useful. I might add that to my own!
This will actually be very useful on my blog. Awesome post!
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?
omg that's great! i'm so following!
aha thanks for the guide it was an interesting read but i'm not interested in doing it
helpfull info, thanks! :)
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.
Nice, I'll try this out
awesome....
Thanks for the tip! Following
cool, thanks for that info
This bugged the hell out of me aswell, thx man!
interesting, if only I had a mac right? >.>
i click on your lightbox pic, got never ending spinning lightbox icon D:
Wow this is very helpful stuff. Thanks alot, and following
Cool stuff! This could help out a lot. =D
thanks a lot! I needed this.
Not sure if I'm savvy enough to do this, but still very cool info.
It looks really great. I wish I had more photos on my blog, so I had a reason to play with this.
Useful for us bloggers, thank you!
if you have it open in the same window, you can get more views...
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!
Nice, I may try this
nice post man, I'm gonna have to use this sometime. Followed :)
really helpfull, thanks
Cool man, thanks for sharing!
nice tip! thanks!
Awesome. I have a lightbox greasemonkey script, but didn't think about doing this.
i take advantage of picasa. being a linux and windows user and all.
@Aaron M. Gipson
@rinns
you dont need a mac for this
@zach
it makes no difference the http request is the same
damm sounds like hardcore programming hahaha
ballandkicks.blogspot.com
Very nice guide thanks.
thanks!
Now I also have this nice lightbox :)
thanks for the info!
Thanx!
great stuff,thanks for share.
Lightbox is awesome. I've used it in some websites I've made. I just wish I knew PHP.
Thanks for sharing!
thank you! that always bothered me too.
http://coolstuffgoeshere.blogspot.com
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.
nice I have made classic slideshow with photobucket album :D +followed
@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
I use imgur and tinypic :(
Works,I checked!
that mc donalds picture got me hungry
i only saw this one now.. really great tip.. i gotta apply it to my blog.
thank you!
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.
Thank you!!!
the image won't actually open now. could you help me out?
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!!
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?
oh perfect i can exclude my banner cool stuff!!!!
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.
Post a Comment