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 函数，我将在其中一张一张地添加图片，因为我没有任何普通的数据库，只有不同名称的图片。
• 我画廊的代码:

  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
});