1

現在、このコードを使用して、タグでラップされていない一連の画像にFancyboxを適用しています<A>。

$("img[alt=lightbox]").each(function(){
   $(this).fancybox({ href : $(this).attr('src') });
});

この方法で追加されたすべての画像を同じグループに追加したいと思います。

私は試してみました：

$("img[alt=lightbox]").each(function(){
   $(this).attr("data-fancybox-group", "gallery");
   $(this).fancybox({ href : $(this).attr('src') });
});

運が悪ければ、何かアドバイスはありますか？

4

2 に答える 2

3

この質問に対する答えは、hrefのないFancyboxギャラリーですか？fancyboxv1.3.4用に作成されました。

同じソリューションがfancyboxv2.xでも同様に機能しますが、 fancybox v2.x APIオプションは新しく、以前のバージョンと互換性がないことに注意してください...したがって、実際にAPIオプションをアップグレードしてv2で機能させる必要があります。バツ

これがv2.xアップデートです：

基本的なhtml：

 <div id="myContainer">
  <img src="images/01t.jpg" data-href="images/01.jpg" alt=""  />
  <img src="images/02t.jpg" data-href="images/02.jpg" alt=""  />
  <img src="images/03t.jpg" data-href="images/03.jpg" alt=""  />
  <img src="images/04t.jpg" data-href="images/04.jpg" alt=""  />
  <img src="images/05t.jpg" data-href="images/05.jpg" alt=""  />
 </div>

... （HTML5）（）属性を使用して大きな画像をターゲットにし、この属性でサムネイルをターゲットにしていることに注意してください。data-*data-hrefsrc

次に、js： 

// the function we call when we click on each img tag
function fancyBoxMe(e) {
    var numElemets = $("#myContainer img").size();
    if ((e + 1) == numElemets) {
        nexT = 0
    } else {
        nexT = e + 1
    }
    if (e == 0) {
        preV = (numElemets - 1)
    } else {
        preV = e - 1
    }
    var tarGet = $('#myContainer img').eq(e).data('href');
    $.fancybox({
        href: tarGet,
        helpers: {
            title: {
                type: 'inside'
            }
        },
        afterLoad: function () {
            this.title = 'Image ' + (e + 1) + ' of ' + numElemets + ' :: <a href="javascript:;" onclick="fancyBoxMe(' + preV + ')">prev</a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="fancyBoxMe(' + nexT + ')">next</a>'
        }
    }); // fancybox
} // fancyBoxMe

// bind click to each img tag 
$(document).ready(function () {
    $("#myContainer img").each(function (i) {
        $(this).bind('click', function () {
            fancyBoxMe(i);
        }); //bind      
    }); //each
}); // ready

そしてもちろん、ここにデモがあります

于 2013-02-12T00:43:41.933 に答える
1

ファンシーボックスによると：

注-ギャラリーは、同じ「rel」タグを持つ要素から作成されます。例：

ここのページの下部を見てください

したがって、relを設定してみてください。

$("img[alt=lightbox]").each(function(){
  $(this).attr("rel", "gallery");
  $(this).fancybox({ href : $(this).attr('src') });
});
于 2013-02-11T21:31:09.147 に答える