Issue in gallery.justifiedGallery is not a function in theme hugo-theme-massively

Question

Issue in gallery.justifiedGallery is not a function in theme hugo-theme-massively

Closed this issue 3 years ago · 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

Answer 1 · 2021-03-21T12:13:32.000Z

Hi @alexvanderberkel,
can you provide me a minimal example project that is affected from this issue as zip file or git repo?

Answer 2 · 2021-03-21T12:21:45.000Z

mysite.zip

Hi @mfg92,
I used this example to check your shortcode. Thanks for the swift reply. Cheers, Alex

Answer 3 · 2021-03-22T20:50:33.000Z

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>

Answer 4 · 2021-03-22T21:00:42.000Z

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!

Answer 5 · 2021-03-22T21:09:33.000Z

@mfg92 I reopened the issue as this leads to the effect that the background image will not be loaded any more in pages.

Answer 6 · 2021-03-22T21:36:08.000Z

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.

Answer 7 · 2021-03-22T21:38:57.000Z

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

Answer 8 · 2021-03-22T21:43:06.000Z

I close this issue as it related to the theme. Thanks for your help Matze!

Answer 9 · 2022-06-19T09:41:39.000Z

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

Answer 10 · 2024-02-06T12:46:08.000Z

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.