3

jqueryオプションではなく、htmlのギャラリーの手動呼び出しでファンシーボックスを開く方法で提供されているソリューションを変換しようとしましたか? いくつかのギャラリーに適用するためですが、正しく機能させることはできません。

私が持っているのは、次の属性を持ついくつかのリンクです。

<a href="#" class="open-album" data-open-id="album-1">Album 1</a>
<a href="#" class="open-album" data-open-id="album-2">Album 2</a>

等

これらは、それぞれの Fancybox 対応アルバムに適用されるはずです。たとえば、次のようになります。

 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>

と

 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>

Fancybox は.image-showクラスを探し、画像自体をクリックすると正常に動作します。

次の jQuery コードは、アルバム タイトルをそれぞれのアルバムの最初の画像にリンクすることになっています。

 $('.open-album').click(function(e) {
    var el, id = $(this.element).data('open-id');
    if(id){
        el = $('.image-show[rel=' + id + ']:eq(0)');
        e.preventDefault();
        el.click();
    }
});

ご覧のとおり、目標はdata-open-idアルバム タイトルから を取得し、それを使用して、属性として値を持つ最初の Fancybox アイテムを開くことでしたrel。残念ながら、うまくいきません。何がうまくいかないのかについてのアイデアはありますか? あなたの助けは大歓迎です！

前もって感謝します！

4

1 に答える 1

4

セレクター.image-showを fancybox にバインドしていると思いますね。

$(".image-show").fancybox();

もしそうなら、あなたのコードの問題はそれがfancyboxコールバック内でのみ$(this.element)使用されるべきであることですが、あなたは通常のjQueryメソッド（）を使用しているので、現在の要素を次のように参照する必要があります.click()$(this)

$('.open-album').click(function(e) {
    var el, id = $(this).data('open-id');
    if(id){
        el = $('.image-show[rel=' + id + ']:eq(0)');
        e.preventDefault();
        el.click();
    }
});

JSFIDDLEを参照してください

于 2013-08-25T19:16:37.107 に答える