WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] How to close lightbox when clicking outside the picture (41 posts)

  1. tiofelix
    Member
    Posted 2 years ago #

    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/

  2. tiofelix
    Member
    Posted 2 years ago #

    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.

  3. Peet23
    Member
    Posted 2 years ago #

    You are my hero!
    Nice post!

  4. skip405
    Member
    Posted 2 years ago #

    Thanks a lot, man! That's great!!! :)

  5. skip405
    Member
    Posted 2 years ago #

    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;

  6. sickdelusion
    Member
    Posted 2 years ago #

    Heya, thanks! :)

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

  7. tiofelix
    Member
    Posted 2 years ago #

    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?

  8. sickdelusion
    Member
    Posted 2 years ago #

    Yeah, but it didn't help...

  9. skip405
    Member
    Posted 2 years ago #

    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.

  10. tiofelix
    Member
    Posted 2 years ago #

    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 )

  11. sickdelusion
    Member
    Posted 2 years ago #

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

  12. youlikeit
    Member
    Posted 2 years ago #

    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.. :)

  13. skip405
    Member
    Posted 2 years ago #

    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)))

  14. youlikeit
    Member
    Posted 2 years ago #

    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?

  15. tiofelix
    Member
    Posted 2 years ago #

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

  16. joatblog1
    Member
    Posted 2 years ago #

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

  17. sickdelusion
    Member
    Posted 2 years ago #

    @ joatblog1
    If I use "Thickbox" instead, the images don't "pop up" but are opened on a new, blank "page", so just the image is shown outside of the website. Well, that's not what I want either :/ But glad it works for you know at least.

    @ tiofelix
    That would be awesome if you could do that. My gallery can be found here: http://sickdelusion.de/?page_id=57

  18. skip405
    Member
    Posted 2 years ago #

    sickdelusion, joatblog1, it looks like it's browser sprecific. It only doesn't work in Firefox where the page is indeed scrolled up to the top :( It works ok in Opera, IE7&8 and Chrome. I didn't test it in Safari, though.

  19. sickdelusion
    Member
    Posted 2 years ago #

    Hm, yeah, I'm using Firefox. Any solution for making it work in FF, too?

  20. tiofelix
    Member
    Posted 2 years ago #

    Heya guys =)

    @sickdelusion and @joatblog1, i have good news. After analizing this happening on @sickdelusion gallery, i think i discovered what caused the damned top scrolling.

    And guess what, not a glitch. It was proposital. (why, gallery devs, why???) Anyway, here's how i fixed it. (Btw i mostly use FF 7 when developing too. Even though i haven't tested this solution in all browsers).

    wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js

    Two lines to edit.

    First let's go to Line 157:

    window.scrollTo(0,t.Top);

    This line ALONE makes the window scroll to the top of the NG GALLERY DIV when you trigger the "hideShutter" action.

    Now, Line 159:

    document.documentElement.style.overflowX = '';

    Even though i helped you guys through this, my javascript knowledge is still VERY limited, so i really don't know how exactly a overflow-x css change can make your whole window scroll to the top, but it does. I'll be glad if someone tell me how.

    Why all of this happens and why had the dev put it into the code? That i do not know neither i feel like finding out now. Just comment both lines or either totally blast it out of your script if you're feeling hardcore (or either frustated)

    I did this on a new website i'm working on and it worked just fine. Actually, i noticed a little "flicking" on the background when you click on the image to open... but it only happens the first time you click on any image after the page loads.
    (almost like the "hideShutter" trigger "FIXES IT" somehow. i really don't have a single idea what is going on on this code, even though it's fun to hack and slash through it.)

    Anyway, if this fixes for both of you, please tell us. It worked for me.

    Aaaand as a side off-topic note, @sickdelusion, i kinda enjoy your art style, you won yourself a new visitor. Gotta check more of your galleries when i get home.

    Btw, i'm sleepy again. As always.

  21. sickdelusion
    Member
    Posted 2 years ago #

    Hey tio,
    thank you so much, that fixed it for me :) So happy it works now the way I want it to :)

    And also thx to you for your comment about my art, I'm happy you like it and I would be glad if you drop by now and then and just peek a bit ;D Always much appreciated! :)

  22. MindaugasLT
    Member
    Posted 2 years ago #

    Thanks! It worked!

  23. ceviz ms
    Member
    Posted 2 years ago #

    Hey @tiofelix,
    You said;

    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">

    But there is nothing like this in that line.
    There is something like that at 276 in my shutter-reloaded.js
    D.innerHTML = '<div id="shWrap"><img src="'+shutterLinks[ln].link+'" id="shTopImg" title="' + t.msgClose + '" onload="shutterReloaded.showImg();" onclick="shutterReloaded.hideShutter();" />' + NavBar +'</div>';
    Somethings has changed with the version or what? Seems its been 3 months :D

  24. tiofelix
    Member
    Posted 2 years ago #

    @ceviz ms - Yeah... Maybe there's a new version out there which i'm not using =P Mine is very old.

    But are you having trouble finding something i mentioned?

  25. Dom
    Member
    Posted 2 years ago #

    @ceviz ms --- I think that we both have the newest version of the plugin installed. You should alter these lines:

    1. Look for the hideShutter : function() - around line 160 for me
    S.setAttribute('onclick','shutterReloaded.hideShutter();');

    Your function should now look like this:

    hideShutter : function() {
    var t = this, D, S;
    if ( D = t.I('shDisplay') ) D.parentNode.removeChild(D);
    if ( S = t.I('shShutter') ) S.parentNode.removeChild(S);
    S.setAttribute('onclick','shutterReloaded.hideShutter();');
    t.hideTags(true);
    window.scrollTo(0,t.Top);
    window.onresize = t.FS = t.Top = t.VP = null;
    document.documentElement.style.overflowX = '';
    document.onkeydown = null;
    },

    2. Replace the original D.innerHTML bit (line 139) with the following

    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;

    Good luck! And thanks for posting @tiofelix. You're a live saver! Or at least an evening saver!

  26. tiofelix
    Member
    Posted 2 years ago #

    @Dom - You're most welcome. I'm not usually able to help people on forums... (Specially when i'm the OP, now that's even more rare) So when i do, it's my pleasure.

    Also, thanks for posting the changes on the new version of the plugin. Frankly, I wonder why haven't the author fixed this issue yet... Maybe we should show him this thread?

  27. Yosua
    Member
    Posted 2 years ago #

    Hi tiofelix,
    Thanks for your solution, it's awesome.
    But I have another condition, I've changed my D.innerHTML code before applying yours, so when I click on the image it will show next image.
    But after applying you codes, the function is gone, because its on the shWrap. So how could I keep both of the function(click image to show next image and click background to close view)?

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

    Thanks for your time

  28. tiofelix
    Member
    Posted 2 years ago #

    @Yosua, i'll see if i can figure it out. Can you tell me your plugin version (I think you can check it on the update plugins section on wp-admin) and also put your entire "shutter-reloaded.js" in a pastebin.com page, so i can test it with your own code?

  29. ceviz ms
    Member
    Posted 2 years ago #

    @tiofelix, I wonder if you can tell me why my carousel does not work here: http://goo.gl/xZes7
    when page loads its ok to click the pictures, the lightbox opens up normally but when I click next for once or twice it opens the image like a normal link :(

    I am trying to implement JJ NextGen JQuery Carousel but could not do the math do give the same visuals I have right now:)

  30. tiofelix
    Member
    Posted 2 years ago #

    @ceviz ms Zing! I think it's because of the behaviour of the carousel arrows.

    I noticed that the pics on your carousel have this following id pattern:

    ngg-image-65
    ngg-image-66
    ngg-image-67

    and so on.

    Well, when you click the carousel arrows, it CREATES a new li element, and somehow, it uses an id that it's already being used on another picture.

    I noticed this when i left the firebug window open while clicking on the arrows.

    I don't have the time right now to check on some of your js code (specially cause i'm still a js beginner, the shutter thingy i fixed was basically pure luck added with some logic.) but i suggest you trying to NOT let the arrows create new elements.

    Put them straight on the HTML, and the arrows would just MOVE your view, or maybe the elements itselves, after all, what's important it's the carousel effect being shown, not how it was done.

    Having your pics straight into the HTML open you to some new improvements:

    - You can store them in a database and print using a loop.
    - You can also create an User-friendly interface to add new pics.

    Well, that's it. ;) Hope i helped.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.