Another Lightbox hack

When opening an image via lightbox, closing an image can get very counter intuitive. The close button is at the bottom right, which sucks if you have an image that’s larger than the viewing area. Trying to move that close button on the upper right can be too tedious as it requires a lot of modification on the DOM script and CSS. The easier thing would be to simply allow users to close the image when they click on it, after all, what else does one person usually do after viewing an image but close it right?

A hack for this is easy to do, however this usually broke Lightbox‘s “group” mode – instead of moving to the previous/next image, it prioritizes the close function assigned to the image container instead of the group mode’s prev/next overlays – resulting in the image closing anywhere you click.

The trick was to find another place where I could inject similar code, while making sure that it only does it when it’s viewing a single image.As of v2.02, search for this code (should be somewhere around line 436)

// if image is part of set display ‘Image x of x’ if(imageArray.length > 1){ Element.show(‘numberDisplay’); Element.setInnerHTML( ‘numberDisplay’, “Image ” + eval(activeImage + 1) + ” of ” + imageArray.length); }

Replace the last } (in line 440) with this:

document.getElementById(‘imageContainer’).onclick = function() { return false; } } else { document.getElementById(‘imageContainer’).onclick = function() { myLightbox.end(); return false; } }

What this does is it applies the onclick close function only when you’re viewing a single image. As you can see, the first chunk of code is the part where it displays Image x of x when viewing a set of pictures. The if conditional statement simply checks if the imageArray.length ¹ Simply put, this checks how many images are part of the particular Lightbox instance is more than one (more than one image) – then appropriately engages and displays the line Image x of x

By that logic, you can simply say that adding an else would mean it would apply to those that are not greater than one… practically speaking that means one. So I decided to plug the close function there.

If you’re asking why I seemingly put a blank onclick function before the else, it’s because for some reason, when you have grouped and single images in one page, Once you engage a single-mode lightbox, it apparently sets the close function permanently, ² Subsequent clicks to any Lightbox image (grouped or otherwise, will be closed) so I guess I just tried explicitly telling it to reset the onclick function to nothing.

Demonstration

These first two engage a single-mode lightbox view, hence you should be able to close the lightbox by clicking anywhere on the image.

These next two are the same images, but now grouped in a set. You should be able to click on the next/prev overlay without accidentally closing the lightbox.