tiofelix

I’ve found it. =)

The problem it’s because the “#main” div has an overflow: hidden; on it.

When you input overflow: hidden; to any div, it doesn’t matter if you have floated, positioned or whatever element inside of it, nothing, absolutely nothing will wander outside the div space. Imagine that like a big chainsaw running around the border of the div in infinite loop, hehe.

If you take it off, it’ll work. =)

Yes, but… OMG WHERE DID MY BACKGROUND GO???

Yeah, i noticed that too. It happens because you have floated elements inside the #main div, and they don’t add “content-generated-height” to it, thus in this case, creating no height at all.

It was working with overflow: hidden; because when you apply overflow rule to a div, the browser understands that you’ll need a rule to any elements that wander outside, so it somehow wraps up the whole thing.

Yeah, cool, but how do i solve this?

Analizing your code, i noticed that the “#content” div ocuppies the same bodyspace as the #main div, so, just put the background on it, and there you go, problem solved. ??

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.

@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: https://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.

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 )

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?

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.