Extending the jQuery Lightbox Plugin: Custom Link

Lightbox. I love it, though one interesting limitation I came over today is that there’s no extra linking possibilities. Yeah, the back and forth links are cool, but I’d like to take my visitor to some place whenever he clicks the full-sized image, not just close the lightbox. A good example may be an art gallery, where you can view an image set via lightbox, and then suddenly you decide to view one of the images in more detail (comments, download link, ratings and other stuff that you don’t put in the title attribute to show below the image). Wouldn’t it be nice if the user was lead to that specific art piece page if they clicked in the center of the image?

I made a little hack for that. I worked with the jQuery version of Lightbox but this trick should be applicable to the original (prototype) version too. So, here’s the trick. This is the usual way:

<a class="lightbox" href="path/to/full_image.jpg" title="title of the image">
    <img src="path/to/thumbnail.jpg" alt="whatever" />
</a>

And this is my version:

<a class="lightbox" href="path/to/full_image.jpg" title="title of the image"
    rev="http://url/of/some/page.htm" >
    <img src="path/to/thumbnail.jpg" alt="whatever" />
</a>

So our rev attribute will hold the URL where we’d like to take our visitors if they clicked the center of the image. Now, open up your lightbox.css file and find the #lightbox-nav identifier, and add a cursor:pointer; property. This is so that people actually notice that the image is clickable (you get that finger cursor, just like on any link). Now, if you’re working with image sets (more than one image) you’ll have the next and previous links appear and they take 49% of the image each (with the default settings). Let’s give our visitors some more room and decrease that down to 15%. It’s located in the lightbox.css file, identified by #lightbox-nav-btnPrev, #lightbox-nav-btnNext (change width: 49%; to width: 15%;).

Finally, the javascript part. We need two modifications here, one that will read our link rev attribute and store it in an array, the second is the actual linking. Find the _start() function in lightbox.js. Mine is on line 66. Find this line:

settings.imageArray.push(new Array(objClicked.getAttribute('href'),
    objClicked.getAttribute('title')));

And change it to:

settings.imageArray.push(new Array(objClicked.getAttribute('href'),
    objClicked.getAttribute('title'), objClicked.getAttribute('rev')));

One more… Find:

settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),
    jQueryMatchedObj[i].getAttribute('title')));

Swap with:

settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),
    jQueryMatchedObj[i].getAttribute('title'), jQueryMatchedObj[i].getAttribute('rev')));

And the final part – we need to add an event for whenever the visitors click the image. We’re not binding the click event on the actual image though, instead we take the navigation container which holds the next and previous buttons (in case you’re using image sets) and bind it there, because it’s more visible to the browser (z-index is around 10). Okay so find the _set_interface() function in lightbox.js. Mine is on line 126. Somewhere after the $(‘body’).append part type in this code:

$("#lightbox-nav").click(function() {
	location.href = settings.imageArray[settings.activeImage][2];
});

The settings.imageArray is the one being filled at the _start point we changed previously. We added a third index to the array, therefore we use the [2] (zero-based, remember?). Okay, done. Go ahead and try it out. Hope it worked for you too ;)