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

Hi Felix, sorry for my late reply.
I have NextGen Gallery v1.9.0
Here’s my ShutterReloaded.js link, https://pastebin.com/D99PJMc2
Thanks

@ceviz ms Nope, i didn’t. The thread has become way too long and the forum spread it into two pages. You’re probably browsing the 2nd page. *points to the pagination on the top-right corner* Zing!

@yosua, i’ll try take a look, see if i can knack something out of it. Can’t guarantee i’ll find the solution today, though ??

Thanka Felix,
I just want to check it, no rush at all, take your time ??
Thanks for your time

Hi, guys! Could you help me with that kind of problem:
I have new version of gallery. So i have made as @dom said. Now the window closes when you click on the left or the right side. But above and below it doesn’t. That i am ready to accept.

I want to make switching pictures by clicking on them. After making some changes it works. Unfortunately after that, clicking on the left or the right side also leads to switching the img to the next. So, that what i need:
1) Switching images by clicking on them.
at the same time
2) Closing the window, when clicking on the right or the left of the picture (as in the sample of Felix)

How can i do this???

p.s. This is that page:
https://www.alcantara-msk.ru/расцветка/

Best regards, Alex.

Hi all,

Some really useful info on this thread. I’m also looking for a way to close the shutter box by clicking outside of it while still being able to proceed to the next image by clicking on the image in the box.

I have edited my shutter-reloaded.js file to accomplish the “click image to go to next” and the result can be viewed here: https://pastebin.com/f14FfFFv

Basically I’ve changed:

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

So that the onclick event for shTopImg is:

shutterReloaded.make('+next+');return false

And I’ve changed

case 27:
if (closelink) closelink.onclick();

To

case 27:
if (closelink) shutterReloaded.hideShutter();

Now my question is how do I work the closing of the box into that? I’ve tried Dom’s method of editing the more recent shutter-reloaded.js file but the box doesn’t close no matter where I click. Can anybody help?

@setagana85

I’ve tried to check your code, but after it the image doesn’t come in a box, it comes in a new page with white background

@manlog

Apologies you’re quite right, I stuck the wrong version in pastebin which had some syntax errors in it. This should work better: https://pastebin.com/MVaEKLy0

Hi there! Hi managed the below
1) Switching images by clicking on them.
at the same time
2) Closing the window, when clicking on the right or the left of the picture or when last image is reached
adding those linese

if(document.getElementById('prevpic')){
	document.getElementById('prevpic').onclick = function(e){e.stopPropagation();shutterReloaded.make(prev);};
}
if(document.getElementById('nextpic')){
	document.getElementById('nextpic').onclick = function(e){e.stopPropagation();shutterReloaded.make(next);};
}
document.getElementById('shWrap').onclick = function(e){shutterReloaded.hideShutter();};

if(nextlink == ''){
	document.getElementById('shTopImg').onclick = function(e){shutterReloaded.hideShutter();};
}else{
	document.getElementById('shTopImg').onclick = function(e){e.stopPropagation();shutterReloaded.make(next);};
}

around line 138, right under
D.innerHTML = '<div id="shWrap"><img src="'+shutterLinks[ln].link+'" id="shTopImg" title="' + t.msgClose + '" onload="shutterReloaded.showImg();" />' + NavBar +'</div>';

i postet the whole shutter-reloaded.js there https://pastebin.com/Rx3bcyna

@jahnni: Thank you so much that was *exactly* what I was looking for and your code just worked perfectly!
Well… Almost! It didn’t close the window when clicking on top or bottom of the image, so I added
document.getElementById('shShutter').onclick = function(e){shutterReloaded.hideShutter();};
Under the one for shWrap and that’s it. Thank you!

@jahnni and @babou

Thanks so much for adding this functionality. I’ve incorporated your code with some of my preferences and stuck it up on pastebin here: https://pastebin.com/aYs8HQxv

My version of shutter reloaded with Jahnni and BabOu’s help has these features:

* Click anywhere outside image to close shutter
* Esc to close shutter
* Click image to advance to next image
* Loop back to first image in set when advancing from last image
* Changed hover-over text to accurately reflect what clicking on the image will do (“Click to advance”)