Question

嗨，我遇到Lightbox的问题，它会从我的画廊复制我的图像。例如，如果我放入一行3个图像，它将在屏幕上显示3个图像，但点击时，它将显示6个图像。

以下是一些代码，可以让您更好地了解我在做什么以及我的问题是什么。

System.out.println(ucWord("the codes are better than words !!"));// in main method

private static String ucWord(String word) {
    word = word.toLowerCase();
    char[] c = word.toCharArray();
    c[0] = Character.toUpperCase(c[0]);
    int len = c.length;
    for (int i = 1; i < len; i++) {
        if (c[i - 1] == ' ') {
            c[i] = Character.toUpperCase(c[i]);
        }
    }
    word = String.valueOf(c);
    return word;
}

Answer 1

它显示6个图像而不是3个，因为您对所有6个图像使用data-lightbox = "person1"。从文档：如果您想要将一组相关图像合并到一个集合中，请为所有图像使用相同的数据灯箱属性值。 简单的解决方案是为集合中所需的每组图像使用不同的数据灯箱值。

Answer 2

我在灯箱复制图像时遇到了类似的麻烦，在我的情况下，我有一个div，其中包含图像，图标和一些文本。我在外部div上设置了灯箱的锚点，它将图像复制了3次（因为其中有3个元素）。我找到了一种解决方案，可以使用不同的数据灯箱为每个单个元素重新分配锚点，并且一切正常。希望这可以帮助您解决情况。

以此显示了我的图像三遍：

<div class="col-md-3 wow fadeInUp" data-wow-delay="0.1s">
<a href="img/campi/campob.jpg" data-lightbox="campob" title="Campo B">
   <div class="about-col">
       <div class="img">
          <img src="img/campi/campob.jpg" alt="" class="img-fluid">
          <div class="icon"><i class="ion-ios-search"></i></div>
       </div>
       <h2 class="title"><a>Campo B</a></h2><br>
   </div>
</a>
</div>

为此，效果很好：

<div class="col-md-3 wow fadeInUp">
    <div class="about-col">
       <div class="img">
          <a href="img/campi/campoa.jpg" data-lightbox="campoa2" title="Campo A">
            <img src="img/campi/campoa.jpg" alt="" class="img-fluid">
          </a>

          <a href="img/campi/campoa.jpg" data-lightbox="campoa" title="Campo A">
            <div class="icon"><i class="ion-ios-search"></i></div>
          </a>
       </div>

       <h2 class="title">
         <a href="img/campi/campoa.jpg" data-lightbox="campoa3" title="Campo A">
           Campo A
         </a>
       </h2>
       <br>
   </div>

</div>

Lightbox Bootstrap画廊在打开时复制每个图像

2 个答案: