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

@ 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: https://sickdelusion.de/?page_id=57

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.

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

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.

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! ??

Thanks! It worked!

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

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

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

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

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

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

@tiofelix, I wonder if you can tell me why my carousel does not work here: https://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:)

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

LOL had a mail that @tiofelix replied but cannot see it here:(
Did you delete it tiofelix?