我正在尝试弄清楚如何从例如包含 128 张图片的文件夹中创建一个 FancyBox 3 画廊。我该怎么做？我曾尝试自己创建它，但没有运气。我读了另一个StackOverflow的答案，但它来自FancyBox的早期版本，所以我无法弄清楚。
这是旧链接： JS自动制作花哨的图库
以下是 FancyBox 3 的新文档，其中包含 API 信息： 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>
任何帮助将不胜感激。
实际上，您可以轻松地将该答案移植到v3，您只需要将href替换为src并$.fancybox(..)即可$.fancybox.open(..)。
这是一个(略有不同的(演示 - https://codepen.io/anon/pen/MqKpPL?editors=1010