JavaScript，fancybox 画廊

Question

您好，我在使用 JS 创建动态图库时遇到问题：

• 我不知道如何使用 JS 获取我的画廊 - “gallery-pk-1-1”

  <a data-fancybox="gallery-pk-1-1" href="data/images/sertificate/PARK TOWER/1 rooms/1 type/main.jpg" data-caption="">
    <img class="img-fluid" src="data/images/sertificate/PARK TOWER/1 rooms/1 type/main.jpg" alt="" style="height: auto">
  </a>
  

• 我不知道如何用 JS 在图库中添加图片
• 点击打开精美图库（如果我只是使用上面的代码添加更多图片，这很容易，但我的网站加载缓慢，因为有很多图片 - 这就是为什么我只想在用户点击主图片时创建图库）
• 我想为 1 个画廊创建 1 个 JS 函数，我将在其中一张一张添加图片，因为我没有任何普通的 DB，只有不同名称的图片。
• 我的画廊代码：

  JS:
    <script id="gallery" type="text/javascript">
      $.fancybox.open({
          src  : 'link-to-your-page.html',
          type : 'iframe',
          opts : {
              afterShow : function( instance, current ) {
                  console.info( 'done!' );
              }
          }
      });
    </script>
  HTML:
    <a data-fancybox="gallery-pk-1-1" href="data/images/sertificate/PARK TOWER/1 rooms/1 type/render/1.jpg" data-caption="">
      <img class="img-fluid" src="data/images/sertificate/PARK TOWER/1 rooms/1 type/render/1.jpg" alt="" style="height: auto">
    </a>
    <a data-fancybox="gallery-pk-1-1" href="data/images/sertificate/PARK TOWER/1 rooms/1 type/render/2.jpg" data-caption="">
      <img class="img-fluid" src="data/images/sertificate/PARK TOWER/1 rooms/1 type/render/2.jpg" alt="" style="height: auto">
    </a>
  ...
  

Answer 1

所以，基本上，您只想为每个画廊显示一个预览图像？您可以为其他图像创建隐藏链接，就像这样

<a href="https://source.unsplash.com/Ai2TRdvI6gM/1500x1000" data-fancybox="images-preview" 
     data-width="1500" data-height="1000"
     data-thumb="https://source.unsplash.com/Ai2TRdvI6gM/240x160"></a>

查看此演示 https://codepen.io/fancyapps/pen/EeqJPG?editors=1000（查找“带有一张预览图像的图库”）。

或者，您可以在预览图像上创建自定义点击事件，您可以在其中使用 API 启动 fancybox：

$.fancybox.open([
    {
        src  : '1_b.jpg',
        opts : {
            caption : 'First caption',
            thumb   : '1_s.jpg'
        }
    },
    {
        src  : '2_b.jpg',
        opts : {
            caption : 'Second caption',
            thumb   : '2_s.jpg'
        }
    }
], {
    loop : false
});