Issue in gallery.justifiedGallery is not a function in theme hugo-theme-massively
Closed this issue · 10 comments
Hi Matze,
first of all, thank you for your work and time you have put into the hugo-shortcode-gallery. This will be very helpful for me and I am looking forward to use it. However, I have run into an issue which I would like to report. I haven't found a solution so far.
I tried to use your hugo-shortcode-gallery within the theme hugo-theme-massively. Unfortunately I am not able to get a gallery working. I see the following issue in the development tools:
jQuery.Deferred exception: gallery.justifiedGallery is not a function TypeError: gallery.justifiedGallery is not a function
at HTMLDocument. (http://localhost:42399/gallery/:279:11)
at e (http://localhost:42399/shortcode-gallery/jquery-3.6.0.min.js:2:30038)
at t (http://localhost:42399/shortcode-gallery/jquery-3.6.0.min.js:2:30340) undefined
S.Deferred.exceptionHook @ jquery-3.6.0.min.js:2
t @ jquery-3.6.0.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
fire @ jquery-3.6.0.min.js:2
c @ jquery-3.6.0.min.js:2
fireWith @ jquery-3.6.0.min.js:2
ready @ jquery-3.6.0.min.js:2
B @ jquery-3.6.0.min.js:2
jquery-3.6.0.min.js:2 Uncaught TypeError: gallery.justifiedGallery is not a function
at HTMLDocument. ((index):279)
at e (jquery-3.6.0.min.js:2)
at t (jquery-3.6.0.min.js:2)
Cheers and best regards,
Alex
Hi @alexvanderberkel,
can you provide me a minimal example project that is affected from this issue as zip file or git repo?
Hi @mfg92,
I used this example to check your shortcode. Thanks for the swift reply. Cheers, Alex
I have analyzed you supplied code:
The problem is that hugo-theme-massively comes with its own JQuery version and it includes its jQuery at the end of the generated HTML [1, 2]. As a result the jQuery plugins loaded by hugo-shortcode-gallery are inserted into the jQuery of hugo-shortcode-gallery, but later that jQuery is replaced by massivelys jQuery. So jQuery ends up with no knowledge about the jQuery plugins.
The solution is to:
- use
loadJQuery="false"
when linserting the gallery - and move the code that loades massivelys jQuery to the beginning of the HTML
mysite\themes\hugo-theme-massively\layouts_default\single.html:
{{ partial "htmlhead" . }}
<body lang='{{ .Site.Language.Lang | default "en-us" }}' class="is-preload">
<!-- THIS LINE WAS NEAR THE END OF THE DOCUMENT -->
{{ partial "scripts/index" . }}
<!-- Wrapper -->
<div id="wrapper">
{{ partial "header" . }}
{{ partial "nav" . }}
<!-- Main -->
<div id="main">
<!-- Post -->
<section class="post">
<header class="major">
{{ if not .Date.IsZero }}
<span class="date">{{ .Date.Format (.Site.Params.DateFormat | default "January 2, 2006") }}</span>
{{ end }}
<h1>{{ .Title }}</h1>
<p>{{ .Description }}</p>
</header>
{{ if .Params.image }}
<div class="image main"><img src="{{ .Params.image | relURL }}" alt="" /></div>
{{ end }}
{{ .Content }}
{{ partial "postcustom" . }}
{{ if not (eq .Params.disableComments true) }}
{{ template "_internal/disqus.html" . }}
{{ end }}
</section>
</div>
{{ partial "footer/index" . }}
{{ partial "copyright" . }}
</div>
{{ template "_internal/google_analytics.html" . }}
<!-- I HAVE MOVED THE LINE THAT WAS HERE TO LINE 5 -->
</body>
</html>
Thanks Matze for the swift help! It worked! I kind of suspected it but didn't find a solution to that. Thanks for your help!
@mfg92 I reopened the issue as this leads to the effect that the background image will not be loaded any more in pages.
You could modify the massivelys jQuery in a way that it checks if there is already a version of jQuery loaded. If there is already one, it should not do anything.
Another solution is to put it in front of the the content (.Content). Which is apparently okay-ish.
`{{ partial "htmlhead" . }}
<!-- Wrapper -->
<div id="wrapper">
{{ partial "header" . }}
{{ partial "nav" . }}
<!-- Main -->
<div id="main">
<!-- Post -->
<section class="post">
<header class="major">
{{ if not .Date.IsZero }}
<span class="date">{{ .Date.Format (.Site.Params.DateFormat | default "January 2, 2006") }}</span>
{{ end }}
<h1 >{{ .Title }}</h1>
<p>{{ .Description }}</p>
</header>
{{ if .Params.image }}
<div class="image main"><img src="{{ .Params.image | relURL }}" alt="" /></div>
{{ end }}
{{ partial "scripts/index" . }}
{{ .Content }}
{{ partial "postcustom" . }}
{{ if not (eq .Params.disableComments true) }}
{{ template "_internal/disqus.html" . }}
{{ end }}
</section>
</div>
{{ partial "footer/index" . }}
{{ partial "copyright" . }}
</div>
{{ template "_internal/google_analytics.html" . }}
</body>
But that is the quick&dirty solution
I close this issue as it related to the theme. Thanks for your help Matze!
I have analyzed you supplied code: The problem is that hugo-theme-massively comes with its own JQuery version and it includes its jQuery at the end of the generated HTML [1, 2]. As a result the jQuery plugins loaded by hugo-shortcode-gallery are inserted into the jQuery of hugo-shortcode-gallery, but later that jQuery is replaced by massivelys jQuery. So jQuery ends up with no knowledge about the jQuery plugins. The solution is to:
- use
loadJQuery="false"
when linserting the gallery- and move the code that loades massivelys jQuery to the beginning of the HTML
mysite\themes\hugo-theme-massively\layouts_default\single.html:
{{ partial "htmlhead" . }} <body lang='{{ .Site.Language.Lang | default "en-us" }}' class="is-preload"> <!-- THIS LINE WAS NEAR THE END OF THE DOCUMENT --> {{ partial "scripts/index" . }} <!-- Wrapper --> <div id="wrapper"> {{ partial "header" . }} {{ partial "nav" . }} <!-- Main --> <div id="main"> <!-- Post --> <section class="post"> <header class="major"> {{ if not .Date.IsZero }} <span class="date">{{ .Date.Format (.Site.Params.DateFormat | default "January 2, 2006") }}</span> {{ end }} <h1>{{ .Title }}</h1> <p>{{ .Description }}</p> </header> {{ if .Params.image }} <div class="image main"><img src="{{ .Params.image | relURL }}" alt="" /></div> {{ end }} {{ .Content }} {{ partial "postcustom" . }} {{ if not (eq .Params.disableComments true) }} {{ template "_internal/disqus.html" . }} {{ end }} </section> </div> {{ partial "footer/index" . }} {{ partial "copyright" . }} </div> {{ template "_internal/google_analytics.html" . }} <!-- I HAVE MOVED THE LINE THAT WAS HERE TO LINE 5 --> </body> </html>
Thanks mate! This resolved my issue with theme cactus. + I had to manually disable the native gallery loader of the theme
Thanks a lot! I had the same issue with the "Spectral" theme. Solution worked perfectly!
The only thing was that the menu was at first not working - one has to try a bit where to place the scripts-partial.