JS自动制作fancybox画廊 [英] JS to automatically make a fancybox Gallery

问题描述

你好，我有一个包含一些图像的文件夹，我使用FancyBox在图库中显示它们.但是，一个接一个地放置会花费太多时间，我必须回到代码来放置另一个图片.我想知道是否有人知道有一种JS，可以将FJS放在某个文件夹中的所有图像自动放入FancyBox Gallery中.现在我正在这样做:

Hello I have a folder with a few images, and im using FancyBox to show them in a gallery. But puting one by one takes too much time and I have to go back to the code to put another picture. I was wondering if anyone knew a JS that could put in a FancyBox Gallery all the images in a certain folder to be put automatically. Right now Im doing this:

<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

I want to put maybe one anchore and let a JS call the rest. Could this be made? Im searching on my side also. If I find a answer Ill post it here :D

推荐答案

如果您愿意使用某些javascript并将自己限制在某些限制内，则可以创建一个帮助程序功能，以帮助您加快这一过程.

If you're willing to use some javascript and constrain yourself within certain limitations, you could make a helper function that can speed up the process for you.

Fancybox API允许您调用一个函数来动态生成一个新的画廊:

Fancybox API allows you to call a function to generate a new gallery on the fly:

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

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

Where [A] is an array of objects, each one specifying a content object (and the order in wich they appear in the fancybox presentation will correspond with their index in the array); and {B} is an options object containing the customisations you want for this instance of fancybox.

content 对象可以具有fancybox用来丰富演示文稿的多个可选属性，例如图像的 title ，但是在这种情况下，我们只需要地址路径，例如:

The content objects can have multiple optional properties that fancybox uses to enrich the presentation, such as a title for the image, but in this case we only need the address path, leaving you with e.g:

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

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

If you have your images in a known location and named in secuential numeric order, you can make a function that fills an array with all the individual locations of this images to pass to the $.fancybox( [A], {B}) function:

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

然后您为整个演示文稿调用此函数，例如:

Then you call this function for each whole presentation, eg:

//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();，但将其放入另一个函数中，如下所示:

And finally, pass this array to $.fancybox();, but put it inside another function, like this:

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

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

Then, in your HTML you can make anything call this function with the onclick="" attribute, eg:

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

这篇关于JS自动制作fancybox画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！