Question

目前，我使用此代码将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') });
});

没有运气，你有什么建议吗？

Answer 1

此问题 Fancybox gallery without a href? 的答案是针对fancybox v1.3.4编写的。

同样的解决方案同样适用于fancybox v2.x，但请记住 fancybox v2.x API选项是新的，与以前的版本不兼容 ...所以你实际上已经升级了使其适用于v2.x的API选项

这是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

当然，这是 the DEMO

Answer 2

根据花哨的盒子：

注意 - 图库是从具有相同“rel”标记的元素创建的，例如：

请查看页面底部here

所以尝试设置rel：

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

如何在Fancybox中为没有链接的图像设置组？

2 个答案: