Question

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

谢谢你

Answer 1

FIX：

<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＆lt; - 删除它。默认情况下为“True”https://sachinchoolur.github.io/lightGallery/docs/api.html#lg-hash

Answer 2

你必须在同一页面上为不同的画廊使用不同的id，因为在github上阅读，已经存在一个未解决的问题。有关详细信息，请查看此处github

Answer 3

如果您想要更多的编程方式，则可以使用此解决方案。我将组用于相同的链接，但使用了不同的标签，并且使用了香草lightgallery.js

您可以在here

中找到一个有效的示例

import java.util.Scanner;  // Import the Scanner class
import java.util.LinkedList; 
import java.util.Queue; 



public class HelloWorld{
    private static class Node{
        public Node left;
        public Node right;
        public String value;
        public Node(String v){
            value = v;
        }
    }
     public static void main(String []args){
        Scanner scanner = new Scanner(System.in);
        //String userInput = scanner.nextLine();
        String userInput = "10 12 15 25 30 26 27";
        String[] values = userInput.split(" ");
        Node root = new Node(values[0]);
        Queue<Node> q = new LinkedList<>();
        q.add(root);
        for(int i = 1; i < values.length; i = i + 2){
            Node current = q.remove();
            current.left = new Node(values[i]);
            current.right = new Node(values[i + 1]);
            q.add(current.left);
            q.add(current.right);
        }

     }
}

<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>

lightgallery.js多个实例无法正常工作

3 个答案: