-1

この Fancybox の例で行ったのと同じことをしようとしています: http://jsfiddle.net/jekAe/

私がそれを行うと、すべてのリンクの 2 番目のギャラリーが開かれ続けます。ここに私が持っているものがあります:

私のJS：

$(document).ready(function() {
var images = {
    1: [
        {
            href : 'images/1.jpg',                
        },
        {
            href : 'images/2.jpg',                
        },
        {
            href : 'images/3.jpg',                
        },
        {
            href : 'images/4.jpg',                
        },
        {
            href : 'images/5.jpg',                
        }
    ],
    2: [
        {
            href : 'images/6.jpg',                
        },
        {
            href : 'images/7.jpg',                
        },
        {
            href : 'images/8.jpg',                
        },
        {
            href : 'images/9.jpg',                
        },
        {
            href : 'images/10.jpg',                
        }
    ],
    3: [
        {
            href : 'images/11.jpg',                
        },
        {
            href : 'images/12.jpg',                
        },
        {
            href : 'images/13.jpg',                
        }
    ]
};

$(".open_fancybox").click(function() {
    $.fancybox.open(images[ $(this).index() + 1], {
        padding : 0
    });

    return false;
});
});

私のHTML：

<a class="open_fancybox" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a>

ここで何が間違っているのかわかりません。私は jQuery をほとんど知りません。jsfiddle のサンプル コードから、3 つのギャラリーでまったく同じことができると思っていましたが、うまくいきません。

どのリンクをクリックしても、常に 2 番目のギャラリーが開きます。

4

4 に答える 4

0

おそらくこれを行うための最良の方法ではありませんが、私は上記の人が推奨したことを行いました. これが私がしたことです：

$(".open_fancybox1").click(function() {
    $.fancybox.open(images[ $(this).index() + 0], {
        padding : 0
    });

    return false;
});
$(".open_fancybox2").click(function() {
    $.fancybox.open(images[ $(this).index() + 1], {
        padding : 0
    });

    return false;
});
$(".open_fancybox3").click(function() {
    $.fancybox.open(images[ $(this).index() + 2], {
        padding : 0
    });

    return false;
});

<a class="open_fancybox1" href="images/1.jpg"><img src="images/services-bg-01.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox2" href="images/6.jpg"><img src="images/services-bg-02.jpg" alt="" width="290" height="140" class="services-bg" /></a>
<a class="open_fancybox3" href="images/11.jpg"><img src="images/services-bg-03.jpg" alt="" width="290" height="140" class="services-bg" /></a>
于 2013-08-27T23:25:25.747 に答える
0

提案されているように、fancybox を 3 回宣言する必要はないかもしれません。さらにギャラリーを追加することにした場合はどうでしょうか。毎回新しいスクリプトを追加したくありませんよね?

を使用.each()すると、旅行を節約できます。

$(".open_fancybox").each(function (i) {
    $(this).on("click", function () {
        $.fancybox.open(images[i + 1], {
            padding: 0
        });
        return false;
    });
});

JSFIDDLEを参照してください

于 2013-08-27T23:56:38.180 に答える
-1

各画像に個別の/一意のクラスを与えてから、新しいクラスごとに 1 つずつ、fancybox を 3 回宣言する必要があります。

于 2013-08-27T20:21:28.703 に答える