javascript - 使用通过单击单独的 div 激活的灯箱集

Question

我的灯箱已经正常工作了，太棒了!在我的网站上，我有多个图像(与不同的组织相关)，当您单击特定灯箱打开的图像时。

我不知道如何在网页上不显示集合中的所有图像的情况下设置灯箱？ (只有当有人点击触发图像时，我才会显示它们 - 不包含在灯箱中)。

灯箱中一张图片的代码如下:

<div class="belmont" style="margin-left:30px; margin-top:30px;">
    <a href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
</div>

提前致谢!

Answer 1

你可以简单地隐藏其他的。

<style>
  /* straight outta boilerplate h5bp.com */
  /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
     .visuallyhidden { 
        border: 0; clip: rect(0 0 0 0); 
        height: 1px; margin: -1px; 
        overflow: hidden; padding: 0; 
        position: absolute; width: 1px; 
      }

      /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
      .visuallyhidden.focusable:active, 
      .visuallyhidden.focusable:focus { 
         clip: auto; 
         height: auto; 
         margin: 0; 
         overflow: visible; 
         position: static; 
         width: auto; 
      }

</style>

<div class="belmont" style="margin-left:30px; margin-top:30px;">
    <a href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
    <a class="visuallyhidden" href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
    <a class="visuallyhidden" href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
</div>