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>

使用通过单击单独的div激活的灯箱组

1 个答案: