js/my.js conflicts with grav-plugin-shortcode-gallery-plusplus plugin

[sal0max]

Hi,

I got this issue opened for my Shortcode Gallery++ Plugin: https://github.com/sal0max/grav-plugin-shortcode-gallery-plusplus/issues/6

The lightbox doesn't work properly, as the js/my.js script in Quark Open Publishing intercepts the click on an image and opens it in a blank page. A possible workaround that could be done on your side is described in the linked issue. All links that should open with the GLightbox I'm using have a class glightbox-<random number>.

Maybe you want to have a look at it.

Cheers!

[paulhibbitts]

Thanks for letting me know about this @sal0max , I will add a comment to your issue.

[paulhibbitts]

Looks like this issue was solved by disabling the my.js script, so closing this for now.

[sal0max]

Yeah, it's solved for this case.

However, everyone who is using the Open Publishing theme and also the Shortcode Gallery++ plugin will run into the same issue.

How about that change I proposed in the other issue for js/my.js line 8? I tested it, it works:

$('#body-wrapper').on('click', 'a:not(.external-link):not([href^="#"]), a:not([class^="glightbox"])'), function (e) {

instead of just

$('#body-wrapper').on('click', 'a:not(.external-link):not([href^="#"])', function (e) {

[paulhibbitts]

Oh thanks for testing that possible fix, let me also verify on my end. If everything looks good I will release an update and give you credit for the fix🙂

[paulhibbitts]

Hi @sal0max , today I released an update with that fix for the Shortcode Gallery++ plugin but it caused unexpected issues on my online demo site (see below) home page, though my local test site was fine.

To be safe I have removed this fix as it looks like further testing is needed. If you happen to know what the issue might be please let me know (I do not know JS and someone on the Grav Discord helped me with that JS you see in the theme).

Thanks, Paul

[sal0max]

That baffles me a bit, as I don't see where the change could break the site.

Let's analyze your original js code:

$('#body-wrapper').on('click', 'a:not(.external-link):not([href^="#"])', function (e) {

• $('#body-wrapper') is a jQuery selector. which basically selects the entire site: The enclosing div with the id body-wrapper
• .on() attaches an event handler function to this div
  • That first parameter 'click' defines the event type
  • The second parameter 'a:not(.external-link):not([href^="#"])' is again a selector to filter the descendants of the div that trigger the event. In this case: everything, except a elements with the class external-link and also not with a href attribute which begins with #
  • The third parameter function (e) just signals, that the following code inside {} should be executed.
• The code that is executed, basically just alters the link URL in various ways, and also (and that's the problem here) opens a link in a blank page, preventing GLightbox to work.

My proposed modification just adds another selector filter: a:not([class^="glightbox"]):

• This filters every a element with a class that begins with glightbox. I couldn't see how this would affect anything other than the GLightbox links.

But to be sure, I just installed a blank Grav instance, added the Quark Open Publishing theme, added your example pages and tried my modification

I couldn't see anything being broken. You're sure you didn't ran into some caching issue, or had a typo in there?

• BUT: Although the page isn't broken here, the fix just didn't work. That's because the syntax was wrong.
• However, this works:

    $('#body-wrapper').on('click', 'a:not(.external-link, [href^="#"], [class^="glightbox"])', function (e) {

(This is also the correct syntax, according to https://stackoverflow.com/a/6166888/421140)

[paulhibbitts]

Thanks so much @sal0max for looking into what might have been causing the issue - your revised code looks to be working now🙂 https://demo.hibbittsdesign.org/grav-open-publishing-quark/

The homepage now displays correctly, and I manually updated that site's my.js file with your most recent code.

I will now update the theme and re-release🤞

Thanks again! Paul

[paulhibbitts]

Great news @sal0max the release looks good and I have tested it on https://demo.hibbittsdesign.org/grav-open-publishing-quark/ and all is working.

Thanks again for your revised code suggestion! Paul