目前我使用这个代码适用的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') });
});
如果没有运气,你有什么建议吗?
对于这个问题的答案没有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> <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
据看中箱:
注 - 画廊是从谁具有相同的“相对”的标签,例如元素创建的:
看看页面的底部位置
因此,尝试设置相对:
$("img[alt=lightbox]").each(function(){
$(this).attr("rel", "gallery");
$(this).fancybox({ href : $(this).attr('src') });
});