Question

我试图找出如何从FancyBox 3画廊中创建图片的方法，比如说一个包含128张图片的文件夹。我该怎么做？我尝试自己创建它，但是没有运气。我读了另一个StackOverflow答案，但这是从FancyBox的早期版本中获得的，所以我无法弄清楚。

这是旧的链接： JS to automatically make a fancybox Gallery

以下是带有API信息的FancyBox 3的新文档： https://fancyapps.com/fancybox/3/docs/#api

这是我的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FancyBox JavaScript Gallery from Folder</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

    <!-- Your HTML content goes here -->
    <a id="Gallery_A" href="javascript:;" class="btn btn-primary">Gallery A</a>

    <!-- JS -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>

    <script>

        $("#Gallery_A").on('click', function() {

          $.fancybox.open([

            //Image 1  
            {
              src  : '_assets/_images/gallery_a/0.jpg',
              type : 'image',
              opts : {
                //caption : 'Image 1',
                //thumb   : '_assets/_images/gallery_a/0.jpg'
              }
            },

            // Lets say this folder has 128 images in it  
            // Clearly I dont want to do this 128 times  
            // So I need a JavaScript For Loop  

            //Image 128  
            {
              src  : '_assets/_images/gallery_a/127.jpg',
              type : 'image',
              opts : {
                //caption : 'Image 128',
                //thumb   : '_assets/_images/gallery_a/127.jpg'
              }
            }

          ], {
            loop : true,
            thumbs : {
              autoStart : true
            }
          });

        });

    </script>   

</body>
</html>

任何帮助将不胜感激。

Answer 1

实际上，您可以轻松地将该答案移植到v3，只需将href替换为src，将$.fancybox(..)替换为$.fancybox.open(..)。

这是一个（略有不同）的演示-https://codepen.io/anon/pen/MqKpPL?editors=1010

文件夹项目中的JS Fancybox 3 Gallery

1 个答案: