JS自动制作fancybox Gallery答案

【问题标题】：JS to automatically make a fancybox GalleryJS自动制作fancybox Gallery
【发布时间】：2013-10-31 02:25:17
【问题描述】：

您好，我有一个包含几张图片的文件夹，我正在使用 FancyBox 在画廊中展示它们。但是一张一张放太费时间了，还得回代码放另一张图。我想知道是否有人知道可以将某个文件夹中的所有图像放入 FancyBox Gallery 以自动放入的 JS。现在我正在这样做：

<div class="selCuad" id="Reg"><a class="fancybox-thumb aMenu" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8507/8454547519_f8116520e1_b.jpg" title="Ayvalık, Turkey (Nejdet Düzen)">GALERÍA</a>
        <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7152/6394238505_c94fdd1d89_b.jpg" title="Sicilian Scratches   erice (italianoadoravel on/off coming back)"></a>
        <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8481/8215602321_69d9939b8b_b.jpg" title="The Trail (Msjunior-Check out my galleries)"></a>
        <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8200/8220393833_e52cabfe80_b.jpg" title="Trees (Joerg Marx)"></a>
        </div>

我想放一个主播，让 JS 调用其余的。这个可以做吗？我也在我这边搜索。如果我找到答案我会在这里发布：D

【问题讨论】：

从文件夹中读取文件？我猜你宁愿需要 php。我编写了本教程，它从文件夹中读取图像并使用 php picssel.com/… 自动创建缩略图和链接（本教程假设您熟悉 php 命令和语法。）Saludos Regio
这真的很酷。我喜欢它，但我可以让它工作，以便通过锚点而不是缩略图打开它吗？我对 php 不是很熟悉：S
无论您在锚点内放置什么文字或缩略图，都由您决定。除非您使用外部模块/API 或通过 ajax 调用 php 脚本，否则使用纯 javascript 从文件夹中读取文件是不可能的（主要是出于安全原因）。
好的，我看看我是否可以调整您的示例以适合我的页面：D。仍然是一个非常好的教程。感谢您的帮助：D

标签： javascript html fancybox image-gallery

【解决方案1】：

如果您愿意使用一些 javascript 并将自己限制在某些限制范围内，您可以创建一个帮助函数来为您加快进程。

Fancybox API 允许您调用函数以动态生成新图库：

$.fancybox( [A], {B});

其中 [A] 是一个对象数组，每个对象指定一个 content 对象（它们出现在 fancybox 演示文稿中的顺序将与它们在数组中的索引相对应）；并且 {B} 是一个 options 对象，其中包含您想要为此 fancybox 实例进行的自定义。

content 对象可以有多种可选属性，fancybox 使用这些属性来丰富展示，例如图像的 title，但在这种情况下，我们只需要地址路径，留给你例如：

var content = {
    href: "path/to/image.jpg"
};

如果您的图像位于已知位置并以连续数字顺序命名，则可以创建一个函数，用该图像的所有单独位置填充数组以传递给$.fancybox( [A], {B}) 函数：

//remember that your first image must have "0" as number!!

function createPaths(prefix, amount, sufix) {
    var addresses = [];

    for(var i = 0; i < amount; i++) {
        var thisAddress = prefix + i + sufix;
        addresses[i] = { href: thisAddress };
    }

    return addresses;
}

然后你为每个完整的演示文稿调用这个函数，例如：

//This variable will store 124 objects with
// the images' paths (path/to/0.jpg, path/to/1.jpg ... path/to/123.jpg)
var allImages_gallery_1 = createPaths("path/to/" , 124, ".jpg");

最后，将此数组传递给$.fancybox();，但将其放入另一个函数中，如下所示：

function open_gallery_1() {
    $.fancybox( allImages_gallery_1, optionsObject );
}

然后，在您的 HTML 中，您可以使用 onclick="" 属性调用此函数，例如：

<img src="image.jpg" onclick="open_gallery_1();">

【讨论】：