{"id":467,"date":"2006-07-25T05:25:55","date_gmt":"2006-07-25T05:25:55","guid":{"rendered":"http:\/\/www.nargalzius.com\/blog2\/http:\/www.nargalzius.com\/blog2\/archives\/2006\/07\/2006_07_25_1325.php"},"modified":"2017-02-11T08:36:34","modified_gmt":"2017-02-11T08:36:34","slug":"another-lightbox-hack","status":"publish","type":"post","link":"http:\/\/nargalzius.com\/blog\/archives\/2006\/07\/25\/another-lightbox-hack","title":{"rendered":"Another Lightbox hack"},"content":{"rendered":"
\n

NOTICE<\/strong>
CONTENTS NO LONGER APPLICABLE<\/p>\n

The content discussed in this post is no longer valid; as I’m now using a different “lightbox” implementation.
More here<\/a><\/p><\/div>\n

When opening an image via lightbox<\/a>, 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<\/code> 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<\/em> it right?<\/p>\n

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

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<\/strong>)<\/p>\n

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

Replace the last }<\/code> (in line 440<\/strong>) with this:<\/p>\n

document.getElementById(‘imageContainer’).onclick = function() { return false; }\n} else {\ndocument.getElementById(‘imageContainer’).onclick = function() { myLightbox.end(); return false; }\n}<\/p>\n

What this does is it applies the onclick<\/code> close<\/em> function only<\/strong> when you’re viewing a single<\/em> image. As you can see, the first chunk of code is the part where it displays Image x of x<\/em> when viewing a set<\/strong> of pictures. The if<\/code> conditional statement simply checks if the imageArray.length 1 <\/sup><\/a>Simply put, this checks how many images are part of the particular Lightbox instance<\/span><\/span>