0

こんにちは、いくつかの画像を含むフォルダーがあり、FancyBox を使用してギャラリーに表示しています。しかし、一枚ずつ載せるのは時間がかかりすぎて、コードに戻って別の写真を載せる必要があります。特定のフォルダー内のすべての画像を FancyBox ギャラリーに自動的に配置できる 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>

おそらく 1 つのアンカーを配置し、JS に残りを呼び出させたいと考えています。これは作れますか？私の側でも探しています。答えが見つかったら、ここに投稿します:D

4

1 に答える 1

2

何らかの JavaScript を使用して、特定の制限内に制限する場合は、プロセスを高速化できるヘルパー関数を作成できます。

Fancybox API を使用すると、関数を呼び出してその場で新しいギャラリーを生成できます。 

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

[A] はオブジェクトの配列で、それぞれがコンテンツオブジェクトを指定します (ファンシー ボックス プレゼンテーションに表示される順序は、配列内のインデックスに対応します)。{B} は、この fancybox のインスタンスに必要なカスタマイズを含むオプションオブジェクトです。

コンテンツオブジェクトには、画像のタイトルなど、fancybox がプレゼンテーションを充実させるために使用する複数のオプション プロパティを含めることができますが、この場合はアドレス パスのみが必要であり、次のようになります。

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();">
于 2015-11-20T22:44:35.557 に答える