lightgallery.js 多个实例不工作
lightgallery.js multiple instances not working
我正在尝试在我的页面中使用 "LighGallery.js"。
情况:我有几组图像,每组都应该显示在自己的图库中。
对于每个组,有 1 张图像可见,其余图像是隐藏的,将在单击第一张可见图像时显示在图库中。
问题:图库仅针对第一个类别触发。它不会触发其余图像的图库视图。
问题:如何使用多个画廊实例。我似乎无法从文档中弄清楚。有人以前做过这个吗?
我尝试了什么: 我四处阅读并尝试使用随附的 Hash 插件。还是不行:
代码结构:
HTML:
<div class="topleft">
<!--Gallery 1st picture triggers-->
<ul>
<li>
<a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
<li>
<a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
</ul>
<!------------------->
<!--Individual galleries surrounded by DIVs-->
<div>
<a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
<a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</div>
<div>
<a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
<a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</div>
<!------------------->
</div>
JS:
$(".topleft").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery1",
selector: '.gallery1'
});
$(".topleft").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery2",
selector: '.gallery2'
});
谢谢你
您必须为同一页面上的不同画廊使用不同的 ID,因为在 github 上阅读时,已经有一个未解决的问题。有关详细信息,您可以在此处查看 github
修复:
<div class="topleft--g1">
<div class="topleft--g2">
<!--Gallery 1st picture triggers-->
<ul>
<li>
<a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
<li>
<a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
</ul>
</div>
</div>
$(".topleft--g1").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery1",
selector: '.gallery1'
});
$(".topleft--g2").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery2",
selector: '.gallery2'
});
P.S。 hash: true <- 删除它。
'True' 默认 https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-hash
如果您想要一种更具程序化的方式,可以使用此解决方案。我为相同的链接使用了不同标签的组,我使用了 vanilla lightgallery.js
您可以在 here
找到工作示例
<div class="container">
<div class="columns is-multiline">
<div class="column is-full">
<h2 class="title has-text-centered">TITLE</h2>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
</div>
</div>
var $galleries = [].slice.call(document.querySelectorAll('.light-gallery'));
if ($galleries.length > 0) {
var lightGalleryOptions = {
mode: 'lg-soft-zoom'
};
// Check first element have light-gallery-single class
// Used for more control over light-gallery instances
if ($galleries[0].classList.contains('light-gallery-single')) {
var $parentNode = getParentElement($galleries[0], 'columns');
// Check first element have data-group attribute
if ($galleries[0].getAttribute('data-group')) {
var groups = [];
// Getting all data-group
for (var i = 0, length = $galleries.length; i < length; i++) {
var group = $galleries[i].getAttribute('data-group');
// Checks unique group names
if (!groups.includes(group)) {
groups.push(group);
}
}
// Start instances for each group
for (var k = 0, length2 = groups.length; k < length2; k++) {
lightGalleryOptions.selector = '.light-gallery-single[data-group="' + groups[k] + '"]';
// if first parent element used, change parentNode to parentNode's parentNode
if (k > 0) {
$parentNode = $parentNode.parentNode;
}
lightGallery($parentNode, lightGalleryOptions);
}
} else {
lightGalleryOptions.selector = '.light-gallery-single';
lightGallery($parentNode, lightGalleryOptions);
}
}
}
// Finds closest parent element
function getParentElement(element, classname) {
if (element.className) {
if (element.className.split(' ').indexOf(classname) >= 0) {
return element;
}
}
return getParentElement(element.parentNode, classname);
}
我正在尝试在我的页面中使用 "LighGallery.js"。
情况:我有几组图像,每组都应该显示在自己的图库中。 对于每个组,有 1 张图像可见,其余图像是隐藏的,将在单击第一张可见图像时显示在图库中。
问题:图库仅针对第一个类别触发。它不会触发其余图像的图库视图。
问题:如何使用多个画廊实例。我似乎无法从文档中弄清楚。有人以前做过这个吗?
我尝试了什么: 我四处阅读并尝试使用随附的 Hash 插件。还是不行:
代码结构:
HTML:
<div class="topleft">
<!--Gallery 1st picture triggers-->
<ul>
<li>
<a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
<li>
<a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
</ul>
<!------------------->
<!--Individual galleries surrounded by DIVs-->
<div>
<a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
<a class="gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</div>
<div>
<a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
<a class="gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</div>
<!------------------->
</div>
JS:
$(".topleft").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery1",
selector: '.gallery1'
});
$(".topleft").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery2",
selector: '.gallery2'
});
谢谢你
您必须为同一页面上的不同画廊使用不同的 ID,因为在 github 上阅读时,已经有一个未解决的问题。有关详细信息,您可以在此处查看 github
修复:
<div class="topleft--g1">
<div class="topleft--g2">
<!--Gallery 1st picture triggers-->
<ul>
<li>
<a class="gthumbnail gallery1" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
<li>
<a class="gthumbnail gallery2" href="http://lorempixel.com/320/240"><img src="http://lorempixel.com/320/240" alt=""></a>
</li>
</ul>
</div>
</div>
$(".topleft--g1").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery1",
selector: '.gallery1'
});
$(".topleft--g2").lightGallery({
thumbnail: true,
hash: true,
galleryId: "gallery2",
selector: '.gallery2'
});
P.S。 hash: true <- 删除它。 'True' 默认 https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-hash
如果您想要一种更具程序化的方式,可以使用此解决方案。我为相同的链接使用了不同标签的组,我使用了 vanilla lightgallery.js
您可以在 here
找到工作示例<div class="container">
<div class="columns is-multiline">
<div class="column is-full">
<h2 class="title has-text-centered">TITLE</h2>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a class="light-gallery light-gallery-single" data-group="light-gallery-1" href="http://lorempixel.com/400/300" target="_blank"><img src="http://lorempixel.com/400/300"></a>
</figure>
</div>
<div class="card-content">
<h2><a class="light-gallery light-gallery-single" data-group="light-gallery-2" href="http://lorempixel.com/400/300" target="_blank">Lorem Ipsum dolor site amet</a></h2>
</div>
</div>
</div>
</div>
</div>
var $galleries = [].slice.call(document.querySelectorAll('.light-gallery'));
if ($galleries.length > 0) {
var lightGalleryOptions = {
mode: 'lg-soft-zoom'
};
// Check first element have light-gallery-single class
// Used for more control over light-gallery instances
if ($galleries[0].classList.contains('light-gallery-single')) {
var $parentNode = getParentElement($galleries[0], 'columns');
// Check first element have data-group attribute
if ($galleries[0].getAttribute('data-group')) {
var groups = [];
// Getting all data-group
for (var i = 0, length = $galleries.length; i < length; i++) {
var group = $galleries[i].getAttribute('data-group');
// Checks unique group names
if (!groups.includes(group)) {
groups.push(group);
}
}
// Start instances for each group
for (var k = 0, length2 = groups.length; k < length2; k++) {
lightGalleryOptions.selector = '.light-gallery-single[data-group="' + groups[k] + '"]';
// if first parent element used, change parentNode to parentNode's parentNode
if (k > 0) {
$parentNode = $parentNode.parentNode;
}
lightGallery($parentNode, lightGalleryOptions);
}
} else {
lightGalleryOptions.selector = '.light-gallery-single';
lightGallery($parentNode, lightGalleryOptions);
}
}
}
// Finds closest parent element
function getParentElement(element, classname) {
if (element.className) {
if (element.className.split(' ').indexOf(classname) >= 0) {
return element;
}
}
return getParentElement(element.parentNode, classname);
}