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.