Touch Gallery takes two clicks to close
Permalink Browser Info Environment
Hello, I have used your Touch Gallery umpteen times with no problems, however recently I have been using the latest version of Mega Menu and I have noticed that when I set it to use the Hamburger setting it disturbs my Touch Gallery block (which always normally works perfectly). Basically you have to click the X twice to get the image to close. It seems to be loading twice. You can see an example here:
https://www.dunheanish.com/accommodation/...
I am assuming it is a javascript conflict, but I have no idea how to attempt to fix it! I contacted the developer of Mega Menu and he took a look but suggested I go to you to ask if you had any ideas. Here is what he wrote:
"That's a very odd bug, and I think you're right that there's a JS clash somewhere. I deliberately design my add-ons to be as robust as possible, trying to avoid JS clashes with other add-ons and themes.
Because of the sheer complexity of the Mega Menu add-on, it would be simpler and quicker to tackle this from the Touch Gallery end. I've looked at the JS code on your site:
https://www.dunheanish.com/packages/touch_gallery/js/touch-gallery.m...
And the "close" functions don't seem to stand out as clashing to me (same names), and the HTML element IDs aren't clashing either. If you were able to get hold of a non-minified version of Touch Gallery's JS code then it would be easier to troubleshoot. Naturally, if the developer for that add-on wouldn't give that up (which I'd understand) then he might be able to troubleshoot it from his end."
I hope you can shed some light on this as I use both these add ons very frequently. I did notice that you are updating the gallery versions for Concrete 5.7 but I rarely use that version as I really don't like it!
Thanks in advance
Lucy
https://www.dunheanish.com/accommodation/...
I am assuming it is a javascript conflict, but I have no idea how to attempt to fix it! I contacted the developer of Mega Menu and he took a look but suggested I go to you to ask if you had any ideas. Here is what he wrote:
"That's a very odd bug, and I think you're right that there's a JS clash somewhere. I deliberately design my add-ons to be as robust as possible, trying to avoid JS clashes with other add-ons and themes.
Because of the sheer complexity of the Mega Menu add-on, it would be simpler and quicker to tackle this from the Touch Gallery end. I've looked at the JS code on your site:
https://www.dunheanish.com/packages/touch_gallery/js/touch-gallery.m...
And the "close" functions don't seem to stand out as clashing to me (same names), and the HTML element IDs aren't clashing either. If you were able to get hold of a non-minified version of Touch Gallery's JS code then it would be easier to troubleshoot. Naturally, if the developer for that add-on wouldn't give that up (which I'd understand) then he might be able to troubleshoot it from his end."
I hope you can shed some light on this as I use both these add ons very frequently. I did notice that you are updating the gallery versions for Concrete 5.7 but I rarely use that version as I really don't like it!
Thanks in advance
Lucy
| Type: | Ticket |
|---|---|
| Status: | Archived |
OK I figured it out. It's due to a weird behaviour of jQuery which is triggered by mega menu.
Here's the explanation so you can tell mega menu's developer.
When Touch Gallery is loaded, first in PHP it creates the thumbnails grid and right below that it inserts a bit of javascript which calls the gallery script to instantiate the gallery.
When the gallery is instantiated, it appends at the end of the body the elements of the lightbox's overlay including the 2 arrows and the close button so they are ready when needed. That's the DIV with class galleryOverlay at the bottom
Then mega menu has a bit of code, inserted directly in the page's markup: $("body").wrapInner('<div id="panel"></div>');
And that is what is creating the problem.
You see, when using wrapInner() on the body like that, it also wraps any javascript inside the body and triggers it again.
So when using wrapInner, Touch Gallery is actually instantiated a second time and we now have a second overlay with exactly the same ID which is not allowed.
If you check your page source in your browser's developer tools, you will find twice the DIV with class galleryOverlay, once at the end of the DIV with ID panel (the one wrapped around everything by mega menu) and one just before the closing BODY tag.
The one inside DIV#panel is the first one created and the other one is the one created when touch gallery was triggered a second time.
If you want to test that, using your browser's developer tool, simply delete the one inside DIV#panel and you will see the gallery will work normally.
There is a possible solution on this page:https://stackoverflow.com/questions/10640620/jquery-wrapinner-trigge...
I am not sure how viable it is though but I'm sure mega menu's dev can figure it out, he knows what he's doing
Here's the explanation so you can tell mega menu's developer.
When Touch Gallery is loaded, first in PHP it creates the thumbnails grid and right below that it inserts a bit of javascript which calls the gallery script to instantiate the gallery.
When the gallery is instantiated, it appends at the end of the body the elements of the lightbox's overlay including the 2 arrows and the close button so they are ready when needed. That's the DIV with class galleryOverlay at the bottom
Then mega menu has a bit of code, inserted directly in the page's markup: $("body").wrapInner('<div id="panel"></div>');
And that is what is creating the problem.
You see, when using wrapInner() on the body like that, it also wraps any javascript inside the body and triggers it again.
So when using wrapInner, Touch Gallery is actually instantiated a second time and we now have a second overlay with exactly the same ID which is not allowed.
If you check your page source in your browser's developer tools, you will find twice the DIV with class galleryOverlay, once at the end of the DIV with ID panel (the one wrapped around everything by mega menu) and one just before the closing BODY tag.
The one inside DIV#panel is the first one created and the other one is the one created when touch gallery was triggered a second time.
If you want to test that, using your browser's developer tool, simply delete the one inside DIV#panel and you will see the gallery will work normally.
There is a possible solution on this page:https://stackoverflow.com/questions/10640620/jquery-wrapinner-trigge...
I am not sure how viable it is though but I'm sure mega menu's dev can figure it out, he knows what he's doing
As an aside, can I ask you what you don't like about the 5.7 version?
Did you get my answer?
Sorry yes! I wrote a message "Thanks so much for your quick response! I have messaged the developer of Mega Menu so hopefully this will all get sorted soon."
And then I started to tell you why I can't get on with Concrete 5.7 but it was such a massive task that I didn't actually post my reply! If I get a chance I'll put it into a separate reply...
Thanks again!
And then I started to tell you why I can't get on with Concrete 5.7 but it was such a massive task that I didn't actually post my reply! If I get a chance I'll put it into a separate reply...
Thanks again!
oh, don't worry about it. Initially, I thought you said you didn't like Touch gallery for 5.7 :)
So I'm (kind of) glad to hear Touch Gallery is not the issue.
Let me know if there's anything else I can do to help with.
So I'm (kind of) glad to hear Touch Gallery is not the issue.
Let me know if there's anything else I can do to help with.
Oh sorry for the misunderstanding! I haven't actually used Touch Gallery for Concrete 5.7 as I've only built 2 sites with it and both clients wanted masonry galleries so I used one called ES Galleries. Out of interest do you have any plans for a masonry gallery? I like them!
I have to say I have mixed feelings about Masonry Galleries, for several reasons.
First, I find them t be clunky as soon as the screen is resized. Also, it is very hard to find a masonry script that works well but doesn't weight 60ko.
I tried as much as possible to keep Touch Gallery as small and fast as possible so masonry scripts never seemed to fit.
Another problem is I'd have to add several settings just to deal with that...
I have to admit I was asked about it several times and considered it. I think if I ever add it, it will be as a template, not as an option from the settings.
I have had plans to make an advanced version for Touch Gallery for a very long time to include more design possibilities, Masonry layouts, flexible sizing, pagination... all the bells and whistles. But it always seemed that most people just wanted something simple with just the right options for their use case and nobody would really want all the stuff at once.
It's still somewhere on my "future plans" shelf but probably far far future
First, I find them t be clunky as soon as the screen is resized. Also, it is very hard to find a masonry script that works well but doesn't weight 60ko.
I tried as much as possible to keep Touch Gallery as small and fast as possible so masonry scripts never seemed to fit.
Another problem is I'd have to add several settings just to deal with that...
I have to admit I was asked about it several times and considered it. I think if I ever add it, it will be as a template, not as an option from the settings.
I have had plans to make an advanced version for Touch Gallery for a very long time to include more design possibilities, Masonry layouts, flexible sizing, pagination... all the bells and whistles. But it always seemed that most people just wanted something simple with just the right options for their use case and nobody would really want all the stuff at once.
It's still somewhere on my "future plans" shelf but probably far far future
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
no problem I'll have a look and will let you know shortly. Thank you for bringing this up to my attention and for your continuous support. You are by far my most frequent Touch Gallery user :-)