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

目前，我使用此代码将Fancybox应用于未由标记包装的一组图像：

 $("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

这个问题的答案没有href的Fancybox画廊？ 是为fancybox v1.3.4编写的。

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

这是v2.x更新：

基本的html：

… 注意我们使用（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 + ' :: prev   next' } }); // 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 

当然，这是DEMO

Answer 2

根据花哨的盒子：

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

请看这里的页面底部

所以尝试设置rel：

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