如何设置图像组没有的fancybox链接?(How to set group for images

2019-10-17 17:24发布

目前我使用这个代码适用的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:

对于这个问题的答案没有HREF的fancybox的画廊? 为的fancybox V1.3.4写。

同样的解决方案将用于的fancybox V2.X同样的工作,但是记住的fancybox V2.X API选项是新的,不兼容以前的版本熊...所以你实际上已经升级API选项,使其与v2的工作。 X

下面是版本2.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

当然,这里的DEMO



Answer 2:

据看中箱:

注 - 画廊是从谁具有相同的“相对”的标签,例如元素创建的:

看看页面的底部位置

因此,尝试设置相对:

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


文章来源: How to set group for images without link in Fancybox?