mfg92/hugo-shortcode-gallery

Uncaught TypeError: gallery.justifiedGallery is not a function

Closed this issue · 12 comments

vtomyev commented

I installed the shortcode using hugo modules. When I attempt to run the shortcode nothing shows up on the screen. To be fair im a bit new to this.

Here is the error I see in the console
Screenshot from 2023-12-31 20-22-49

This is he HTML that loads. I can see the picture there.
Screenshot from 2023-12-31 20-23-21

The gallery is supposed to be between the heading and the social media buttons.
Screenshot from 2023-12-31 20-23-36

Can anyone please help me?

mfg92 commented

Can you show how you included the gallery into your markdown file?
Also, please check your browser's devtools network tab to see if all files are loading successfully. The error you are experiencing may indicate that the Justified-Gallery JS could not be loaded.

vtomyev commented

Thank you for taking the time out of your day to help me with this!
Here is how I'm using the shortcode in my markdown:
image


This is my network tab in the browser when I try to load the gallery page:
image

mfg92 commented

There are two versions of jQuery loaded on your page, one from hugo-shortcode-gallery (jquery-3.7.1.min.js) and another, probably from your theme (jquery.min.js). Having two versions of jQuery in parallel will lead to errors. You can tell hugo-shortcode-gallery not to load it's own jQuery, but to use the jQuery provided by your theme. To do this, simply remove the loadJQuery parameter from the shortcode.

rhizoet commented

I have the same problem. I'm using the universal theme and the latest hugo version.

I've included it with the following shortcode
{{< gallery match="images/*" sortOrder="asc" rowHeight="150" margins="5" thumbnailResizeOptions="500x500 q90 Lanczos" showExif=false previewType="blur" embedPreview=true loadJQuery=true >}}

All resources load correctly (take a look at screenshot) and only in Console I see

Uncaught TypeError: gallery.justifiedGallery is not a function
    at HTMLDocument.<anonymous> (impressionen/:2748:11)
    at e (jquery-3.7.1.min.js:2:27028)
    at t (jquery-3.7.1.min.js:2:27330)

I don't know what to do. Do you have an hint for me?

Bildschirmfoto_2024-01-21_18-29-34

mfg92 commented

@rhizoet Have you tried removing loadJQuery=true from the shortcode?

rhizoet commented

Yes, I've tried. But then I get
Uncaught ReferenceError: jQuery is not defined.

So I think I must enable jQuery.

vtomyev commented
mfg92 commented

@rhizoet & @vtomyev:

This is most likely due to your website/theme loading a second instance of jQuery after the gallery has been partially initialised.

I have implemented something that should prevent the gallery from breaking in such cases, its on the jquery-loading-robustness branch. Together with loadJQuery=true this should solve your problem. Please try it and let me know if it works.

  • ❤️1
  • 🚀1
rhizoet commented

@mfg92 Thank you very much for your hard work. It works perfectly on my sites.

vtomyev commented

Hey, I'm sorry to be bugging you with this. Mine still is not working...
Now I'm getting this error:
image

mfg92 commented

Hey, I'm sorry to be bugging you with this. Mine still is not working... Now I'm getting this error:

Are you sure you have checked out the jquery-loading-robustness branch?
If you have, and you are still getting this exception, I need more information. Best would be a ZIP or github repository containing a minimal example of a complete hugo project where this problem occurs.

mfg92 commented

@rhizoet I have merged the changes into main, thank you for testing.

@vtomyev I will close this issue as I have not heard from you, if you still have problems please open a new issue with a minimal sample project that shows your problem.

  • 👍1