lightgallery.js 多个实例不起作用答案

【问题标题】：lightgallery.js multiple instances not workinglightgallery.js 多个实例不起作用
【发布时间】：2016-08-28 13:59:16
【问题描述】：

我正在尝试在我的页面中使用"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'
});

谢谢你

【问题讨论】：

标签： jquery html lightgallery

【解决方案1】：

修复：

<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'
});

附：哈希：真 https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-hash

【讨论】：

【解决方案2】：

您必须为同一页面上的不同画廊使用不同的 ID，因为在 github 上阅读，已经有一个未解决的问题。有关更多详细信息，您可以在这里查看github

【讨论】：

【解决方案3】：

如果您想要更程序化的方式，可以使用此解决方案。我将组用于相同的链接但不同的标签，我使用香草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);
}

【讨论】：