Canvas Support

Lightbox "gallery-item" will not work with isotope on 7.1.1

3 replies·opened Jun 28, 2023
R
rezn8dJun 28, 2023

Lightbox pops up fine when I use data-lightbox="image" but will not work with "gallery" or "gallery-item" if it is in an isotope filter grid.
I have tried this with both javascript load types:

<script src='/theme/7.1.1/js/plugins.min.js' type="text/javascript" defer></script>
<script src='/theme/7.1.1/js/functions.bundle.js' type="text/javascript" defer></script>

and

<script src='/theme/7.1.1/js/jquery.js' type="text/javascript" defer></script>
<script src='/theme/7.1.1/js/functions.js' type="text/javascript" defer></script>

This code uses GoHugo templating: https://gohugo.io/

WORKS:

<div id="media" class="post-box widget clearfix">
 	<h4><i class="fa-solid fa-image"></i> Media Gallery</h4>
	<div id="portfolio" class="portfolio row grid-container g-0 text-center has-init-isotope" data-lightbox="gallery">
		{{ if (isset .Params "banner") }}
		<a class="portfolio-item col-md-4 col-sm-6 col-12 p-1" href="/wmh/img/fullsize/{{ .Params.banner }}" data-lightbox="gallery-item" data-zoom="true" title="{{ .Params.banner | humanize }}">
			<div class="grid-inner imagescale">
				<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="/wmh/img/preview/{{ .Params.banner }}" alt="{{ .Params.banner | humanize }}">
				<div class="borderline bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="uil-plus h4 mb-0 animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></i>
					</div>
					<div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></div>
				</div>
			</div>
		</a>
		{{ end }}
		{{ range $index, $imgs := .Params.image }}
		<a class="portfolio-item col-md-4 col-sm-6 col-12 p-1" href="/wmh/img/fullsize/{{ . }}" data-lightbox="gallery-item" data-zoom="true" title="{{ . | humanize }}">
			<div class="grid-inner imagescale">
				<img class="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="/wmh/img/preview/{{ . }}" alt="{{ . | humanize }}">
				<div class="borderline bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="uil-plus h4 mb-0 animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></i>
					</div>
					<div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></div>
				</div>
			</div>
		</a>
		{{ end }}
		{{ range $index, $vids := .Params.video }}
			<a class="portfolio-item col-md-4 col-sm-6 col-12 p-1 mfp-iframe" href="https://www.youtube.com/watch?v={{ . }}" data-lightbox="gallery-item">
				<div class="video-container grid-inner lazy" data-bg="https://img.youtube.com/vi/{{ . }}/hqdefault.jpg">
					<span class="rollover"><i class="fa-solid fa-circle-play"></i></span>
				</div>
			</a>
		{{ end }}
	</div>
</div>

DOES NOT WORK:

<section class="container-fluid clearfix darkest-bg borderline-row">
	<div class="container">
		<div id="newspapers" class="grid-filter-wrap dark py-3">

			<!-- Portfolio Filter
			============================================= -->
			<ul id="newspaper-categories" class="grid-filter style-3 p-0 m-0 mt-2" data-container="#portfolio">
				<li id="show-all" class="activeFilter"><a class="borderline" href="#" data-filter="*">Show All</a></li>
				<li><a class="borderline" href="#" data-filter=".1800">1800-1949</a></li>
				<li><a class="borderline" href="#" data-filter=".1950">1950</a></li>
				<li><a class="borderline" href="#" data-filter=".1960">1960</a></li>
				<li><a class="borderline" href="#" data-filter=".1970">1970</a></li>
				<li><a class="borderline" href="#" data-filter=".1980">1980-2017</a></li>
				<li>
					<div id="shuffle-grid" class="grid-shuffle btn btn-app rounded-pill ms-3 me-3 px-3 borderline" data-container="#portfolio" title="Shuffle Timeline Entries">
						<i class="fa-solid fa-random"></i><span>Shuffle</span>
					</div>
				</li>
			</ul><!-- .grid-filter end -->

			
		</div>
	</div>
</section>
<section class="container-fluid clearfix dark dark-bg borderline-row py-3">
	<div id="portfolio" class="portfolio row grid-container g-0 text-center has-init-isotope" data-lightbox="gallery">
		{{ range $index, $imgs := .Params.image1800 }}
		<a class="portfolio-tem col-xxl-2 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12 p-1 1800" href="/wmh/img/fullsize/newspapers/{{ . }}" data-lightbox="gallery-item" data-zoom="true" title="{{ . | humanize }}">
			<div class="grid-inner imagescale">
				<img class="borderline lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="/wmh/img/preview/newspapers/{{ . }}" alt="{{ . | humanize }}">
				<div class="borderline bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="uil-plus h4 mb-0 animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></i>
					</div>
					<div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></div>
				</div>
			</div>
		</a>
		{{ end }}
		{{ range $index, $imgs := .Params.image1950 }}
		<a class="portfolio-tem col-xxl-2 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12 p-1 1950" href="/wmh/img/fullsize/newspapers/{{ . }}" data-lightbox="gallery-item" data-zoom="true" title="{{ . | humanize }}">
			<div class="grid-inner imagescale">
				<img class="borderline lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="/wmh/img/preview/newspapers/{{ . }}" alt="{{ . | humanize }}">
				<div class="borderline bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="uil-plus h4 mb-0 animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></i>
					</div>
					<div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></div>
				</div>
			</div>
		</a>
		{{ end }}
		{{ range $index, $imgs := .Params.image1960 }}
		<a class="portfolio-tem col-xxl-2 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12 p-1 1960" href="/wmh/img/fullsize/newspapers/{{ . }}" data-lightbox="gallery-item" data-zoom="true" title="{{ . | humanize }}">
			<div class="grid-inner imagescale">
				<img class="borderline lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="/wmh/img/preview/newspapers/{{ . }}" alt="{{ . | humanize }}">
				<div class="borderline bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="uil-plus h4 mb-0 animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></i>
					</div>
					<div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></div>
				</div>
			</div>
		</a>
		{{ end }}
		{{ range $index, $imgs := .Params.image1970 }}
		<a class="portfolio-tem col-xxl-2 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12 p-1 1970" href="/wmh/img/fullsize/newspapers/{{ . }}" data-lightbox="gallery-item" data-zoom="true" title="{{ . | humanize }}">
			<div class="grid-inner imagescale">
				<img class="borderline lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="/wmh/img/preview/newspapers/{{ . }}" alt="{{ . | humanize }}">
				<div class="borderline bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="uil-plus h4 mb-0 animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></i>
					</div>
					<div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></div>
				</div>
			</div>
		</a>
		{{ end }}
		{{ range $index, $imgs := .Params.image1980 }}
		<a class="portfolio-tem col-xxl-2 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12 p-1 1980" href="/wmh/img/fullsize/newspapers/{{ . }}" data-lightbox="gallery-item" data-zoom="true" title="{{ . | humanize }}">
			<div class="grid-inner imagescale">
				<img class="borderline lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3C/svg%3E" width="800" height="600" data-src="/wmh/img/preview/newspapers/{{ . }}" alt="{{ . | humanize }}">
				<div class="borderline bg-overlay">
					<div class="bg-overlay-content dark">
						<i class="uil-plus h4 mb-0 animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></i>
					</div>
					<div class="bg-overlay-bg dark animated fadeOut" data-hover-animate="fadeIn" style="animation-duration: 600ms;"></div>
				</div>
			</div>
		</a>
		{{ end }}
	</div>
</section>
S
SemiColonWebSTAFFJun 29, 2023

Hello,

Apologies for the Inconveniences! This is definitely a bug. Consider finding the following code in both js/functions.bundle.js and js/modules/lightbox.js Files:

delegate: element.hasClass('grid-container-filterable') ? 'a.grid-lightbox-filtered[data-lightbox="gallery-item"]' : 'a[data-lightbox="gallery-item"]',

and replace it with:

delegate: 'a[data-lightbox="gallery-item"]',

This will definitely fix the issue. We will include this fix in the next update. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

R
rezn8dJun 29, 2023

Working perfectly! Thank you.

S
SemiColonWebSTAFFJun 30, 2023

Very Happy to Help! :)

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard