JS自动制作一个fancybox图库

你好，我有一个文件夹与几个图像，即时通讯使用FancyBox来显示他们在一个画廊。但是一个接一个地花费很多时间，我不得不回到代码去放另一张图片。我想知道是否有人知道一个JS可以放入一个FancyBox库中的某个文件夹中的所有图像自动放置。现在我做到这一点：JS自动制作一个fancybox图库

<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>

我想把也许一个anchore，让一个JS呼叫剩下的。这可以做吗？我也在我身边寻找。如果我找到一个答案，我会在这里发布：D

来源

2013-10-31 Jurgen Feuchter

Readin g文件从一个文件夹？我想你宁愿需要php。我写了这个教程，读取文件夹中的图像，并使用php自动创建缩略图和链接http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox-part-2 -create-image-thumbnails-with-php /（本教程假设您熟悉php命令和语法。）Saludos Regio – JFK

这真的很酷。我喜欢它，但是我可以使它工作，以便我可以通过锚点而不是缩略图打开它吗？我不熟悉php：S –

无论你放在锚点，文本或缩略图中，它都取决于你。除非您使用外部模块/ API或通过ajax调用php脚本，否则从纯文本文件夹中读取文件是不可能的（主要是出于安全原因）。 – JFK

如果你愿意使用一些JavaScript并限制自己在一定的限制之内，你可以做一个帮助函数，可以加快你的过程。

的fancybox API允许你调用一个函数来动态生成一个新的空间：

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

其中[A]是对象的数组，每一个指定一个内容对象（以及它们出现在fancybox演示文稿中的顺序将与它们在数组中的索引一致）;和{B}是一个对象，其中包含您希望为此fancybox实例定制的对象。

的内容对象可以有一个的fancybox用途，以丰富的演示，如标题的图像，但在这种情况下，我们只需要在地址路径，让你如与多个可选属性：

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

如果您的图像在已知位置和secuential数字顺序命名，可以使填充这个图像的所有各个位置的阵列传递给$.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();">

来源

2015-11-20 22:44:35 Oizem

JS自动制作一个fancybox图库

回答

相关问题