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

这个问题的答案Fancybox Gallery without a href？是为fancybox v1.3.4 编写的。

同样的解决方案同样适用于 fancybox v2.x，但请记住，fancybox v2.x API 选项是新的，并且与以前的版本不兼容……因此您实际上必须升级 API 选项以使其与 v2 一起使用。 X

这是 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-href) 属性来定位大图像，并让该src属性定位缩略图。

然后是 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 回答