WordPress.org

Support

Support » Plugins and Hacks » NextGEN Gallery - WordPress Gallery Plugin » [Resolved] [Plugin: NextGEN Gallery] How to close lightbox when clicking outside the picture

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

  • Making it simple, just as the title says.

    I’ve been searching on the forums and also read the whole FAQ… No luck at all =(

    Any of you guys have strumbled upon this issue?

    Or… In case there’s no solution created yet, can anyone please help me locate the files where the HTML code for the shutter is made? Then i could try applying some kind of CSS workaround… And yes, i’ll publish here in case i get it working.

    Thanks in advance. =)

    Regards,
    A fellow web-dev,
    TioFelix.

    http://wordpress.org/extend/plugins/nextgen-gallery/

Viewing 15 replies - 1 through 15 (of 40 total)
  • EUREKA! I solved it! =) It took me a workaround way, but it’s fine enough for me.

    Here’s how i’ve done it, in case someone have the same problem:

    I edited only the following file:
    /wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js

    When you click on the image, it closes the box, so, i took a look on the code and noticed it has this function for the onClick attribute: shutterReloaded.hideShutter();

    Then, go down to the line 93. After that line, put the following declaration:
    S.setAttribute('onclick','shutterReloaded.hideShutter();');

    This will put the same closing function to the whole lightbox, but that’s not enough.

    So far, if you test now, the lightbox closes if you click anywhere above or bellow the image.

    And why? Cause the image has two wrappers on it, making the function not work on them. Oh fiddlesticks, what now?

    Easy. We just have to put the function on the wrapper too!

    Line 131 (or 130 if you haven’t edited the file yet.)

    You can see this bit of code at the beginning of the line:
    D.innerHTML = '<div id="shWrap">

    Just add the onclick in there too, like this:
    D.innerHTML = '<div id="shWrap" onclick="shutterReloaded.hideShutter();">

    Good, now, anywhere around the image closes the lightbox. =)
    Are we done? NOPE. Not yet!

    This caused another issue:

    Giving the fact the “title” and “next/prev” divs are INSIDE the same wrapper, clicking on the “next/prev” links make the lightbox close too. =( Oh bloody whiskers. What now?

    Easy, once again =) Luckily, there are TWO wrappers holding both image and the “navigation” bar. (shDisplay and shWrap)

    Since we added the close function to the “shWrap“, take a wild guess where we should put the navigation bar?

    Yes, you got it right. Just edit the line 131 once again:

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

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

    And there you go! Now it’s done. It’s working just as i wanted too.

    Yes, i know, the TINY area of the same height of the navigation bar doesn’t have the close function working, but c’mon, it’d be such a bad luck if someone click on there, and even if it happens, people will mostly likely try clicking again on another area. =) Just fine.

    You are my hero!
    Nice post!

    Thanks a lot, man! That’s great!!! 🙂

    By the way, your “way” of closing the lightbox doesn’t scroll the page to the top (which is also great) whereas clicking the image does) and that’s really annoying.

    Hm. Another thing to notice)))

    I changed line 131 and deleted the onclick="shutterReloaded.hideShutter(); part on an img – and guess what?))) It miraculously closes the lightbox EVEN when clicking whithin an image, and what is more – the page isn’t scrolled to the top 😉

    My line 131 now looks like this:

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

    Heya, thanks! 🙂

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

    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?

    Yeah, but it didn’t help…

    sickdelusion, my advice is doublecheck everything. I am using the latest version of the plugin and did everything exactly like tiofelix had done, the only thing that I changed futher was line 131.

    Also, remember that my solution only works for the SHUTTER mode. You can check what mode you’re using by going inside the plugin options (go wp-admin > plugins > next-gen options > gallery )

    Yeah, I have the Shutter mode enabled and i doublechecked everything and used the line 131 of you, skip… :/

    Hey TioFelix and Skip!! This is really great.. and much kudos for the smarts and time Tio originally put into this to get this working for many nextgen plugin users. I JUST CAN’T BELIEVE THAT THE AUTHOR would not have added this functionality. It’s just so weird that it’s not a part of the core functions as an option. SO LAME. And what’s worse is that they don’t seem to want to address it.

    Anyway, enough with my rant. I DO have a question. Could either of you suggest a way to add an “X” as well to the image, just to give it that extra feature and to spell out even more for visitors that they can click there to close the image. Thanks again guys. thanks for the great work!!!

    So my question, how can we add an X image or something in the image or somewhere to signify a user can close the image by clicking there or soemwhere.. 🙂

    youlikeit, yeah, I agree that this functionality should be included in the box. The only thing I can add to defend the plugin makers is that PROBABLY they think most of the people use Lightbox or whatever other thing but not Shutter))) Or probably nobody has submitted this feature request.

    As to your question. I think I will not be mistaken if I say that adding a span in line 131 would do your trick.

    Your line 131 might look like this I guess.

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

    But make sure that shWrap is relatively (or absolutely) positioned and position mysuperclassname absolutely.

    If not a span an a tag would arguably be a more semantic variant. If you don’t like using empty tags you can add some words into an a and hide them with your preferred way.

    P.s. I didn’t test it. If I had some more time I would test before writing, but sorry if it fails)))

    Hey Skip, thanks! So are you saying create a “mysuperclassname” in CSS and create the span in the js.shutter file? Sorry, I’m a nooob. lol

    Umm, also, how do I make an X with the span?

    @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.

    @sickdelusion – I carefully altered my Shutter code (and verified in the options that I was in Shutter mode too), but unfortunately it didn’t help me either. When you close the photo, it still scrolls to the top.

    My simple solution was to bail on Shutter, and switch to “Thickbox” mode. It looks just as good, and it doesn’t scroll to the top when you close the image.

Viewing 15 replies - 1 through 15 (of 40 total)
  • The topic ‘[Resolved] [Plugin: NextGEN Gallery] How to close lightbox when clicking outside the picture’ is closed to new replies.
Skip to toolbar