[Plugin: NextGEN Gallery] How to close lightbox when clicking outside the picture

It miraculously closes the lightbox EVEN when clicking whithin an image, and what is more – the page isn’t scrolled to the top 😉

@skip405 Thanks mate, i kinda made that snippet in a hurry so i didn’t even notice that top scrolling… Actually i’m glad that my client hasn’t as well, lol. But i updated it now, many thanks!

The fact that it can close even clicking on the image is not a miracle, you’re actually clicking on both the image and the WRAPPER that folds the image up, so since it still has the onclick code, it works.

But how can I disable that the page is scrolled to the top when I close an image?

@sickdelusion The solution @skip405 provided fixed it for me as well. Have you tried it?

@sickdelusion Something out-of-place must be going on. Could you give me a url that has a gallery with your shutter code? I’ll go check it personally when i have free time =)

@youlikeit I thank you for your praise, brother. But trust me, i’m no smart senior guy, actually i’m not even junior yet. hehehe. Just your average everyday code-joe. Oh, and call me Felix, that’s my surname. “Tio” is just portuguese for “uncle”. A funny nickname some friends gave me cause i used to help them with studies years ago.

For your question about the X button… Well, kinda simple, anyway. But i haven’t tested, so, try what i’m going to explain, and if shit hits the fan, call us again.

First, grab a X button image, yeah, in this case, image would be more visually appealing for some users.

All the images on the website IconArchive are free for use, so help yourself here: http://www.iconarchive.com/search?q=close

Edit it to the size that you want, but try to keep the dimensions, it’ll look better.

Then upload it to the plugin images folder. i THINK it is /wp-content/plugins/nextgen-gallery/images

Name it as “closebutton.png” so you won’t have to edit the code i’ll put just up ahead.

Now, rememeber that you had two wrappers holding the image and the navigation controls? (shDisplay and shWrap)

Well, shWrap has its visibility as hidden, so let’s not mess with it. Let’s try use shDisplay.

Edit their CSS file (/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css) and put this code at the end of the file:

#shDisplay { position: relative; }
#closeButton {
 background: transparent url('../images/closebutton.png');
 width: 100px;
 height: 100px;
 position: absolute;
 top: 0;
 right: 0;
 text-decoration: none;
 color: transparent;
 display: block;
 text-indent: -9999em;
 font-size: 0;
}

Now, first of all, EDIT the WIDTH and HEIGHT on the code above according to the width and height of your “X” image button.

Having that done, edit the .js file once again. ( /wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js )

Now, look for the empty line 130 and add this code:

closeButton = '<a href="#" id="closeButton" onclick="shutterReloaded.hideShutter();" title="Close">Close</a>';

Now let’s edit the polemic line 131 once again, adding or new closeButton:

D.innerHTML = '<div id="shWrap" onclick="shutterReloaded.hideShutter();">' + closeButton + '<img src="'+shutterLinks[ln].link+'" id="shTopImg" onload="shutterReloaded.showImg();" /></div>' + NavBar;

Now, test it. Your button will show up there, but it MIGHT be bad aligned. In that case, twitch the “top” and “right” properties on that css code i typed earlier. Adjust it in pixels, for more or for less, until it shows up as you feel like.

Still, as i said, i’m writting this up from blank. Haven’t tested. If it screws around totally different from what we are expecting, just tell me, if possible with a link with the changes i just mentioned.

Just as an aside didactic note: Putting an absolute positioned element inside a relative positioned element will “cage” it inside the parent element, making it easy to move things that need to be “strapped” to another element.

Pardon me for any english misspellings on this text, i’m kinda sleepy here.