Uncaught TypeError: gallery.justifiedGallery is not a function

[vtomyev]

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


This is he HTML that loads. I can see the picture there.


The gallery is supposed to be between the heading and the social media buttons.

Can anyone please help me?

[mfg92]

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]

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:



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

[mfg92]

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]

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?

[mfg92]

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

[rhizoet]

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

So I think I must enable jQuery.

[vtomyev]

Yes, I have tried that but I get the exact same error.

…

On January 21, 2024 1:25:11 PM PST, Marius ***@***.***> wrote: Yes, I've tried. But then I get `Uncaught ReferenceError: jQuery is not defined`. So I think I must enable jQuery. -- Reply to this email directly or view it on GitHub: #66 (comment) You are receiving this because you authored the thread. Message ID: ***@***.***>

[mfg92]

@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.

[rhizoet]

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

[vtomyev]

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

[mfg92]

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]

@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.