请有人帮我,非常感谢我能得到的任何帮助
HTML
<a id="fancybox" href="javascript:;">Gallery 1</a>
<br />
<a id="fancybox" href="javascript:;">Gallery 2</a>
<br />
<a id="fancybox" href="javascript:;">Gallery 3</a>
JS-
$(document).ready(function() {
$("#fancybox").click(function() {
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : 'My title'
}, {
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
}, {
href : 'http://fancyapps.com/fancybox/demo/3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
正如你所看到的,只有第一个链接在工作,但我希望每个链接都有一组不同的图像
for example ( this is what I need to achieve )
<a id="fancybox" href="javascript:;">Gallery 1</a>
<div>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="4.jpg">
</div>
<br />
<a id="fancybox" href="javascript:;">Gallery 2</a>
<div>
<img src="5.jpg">
<img src="6.jpg">
<img src="7.jpg">
<img src="8.jpg">
</div>
<br />
<a id="fancybox" href="javascript:;">Gallery 3</a>
<div>
<img src="9.jpg">
<img src="10.jpg">
<img src="11.jpg">
<img src="12.jpg">
</div>
谢谢我这里有一把小提琴
页面上只能有一个具有相同id的元素。将id="fancyfox"
更改为class="fancyfox"
,将选择器更改为.fancyfox
,您应该是金色的。
为了获得每个链接的不同内容,您可以考虑:
<a class="fancybox" href="javascript:;">Gallery 1
<div class="content" style="display:none;">
<img src="1.jpg" title="test 1">
<img src="2.jpg" title="test 2">
<img src="3.jpg" title="test 3">
<img src="4.jpg" title="test 4">
</div>
</a>
然后在点击事件中,您可以使用获取图像
$(".fancybox").click(function() {
var images=[];
$(this).find(".content img").each(function(index,img) {
var $img = $(img);
images.push({ "href": $img.attr("src"), "title": $img.attr("title") });
});
$.fancybox.open(images, {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
尝试将其设置为类而不是id。
<a class="fancybox" href="javascript:;">Gallery 1</a>
<br />
<a class="fancybox" href="javascript:;">Gallery 2</a>
<br />
<a class="fancybox" href="javascript:;">Gallery 3</a>
链路
如果你想为每个链接指定一个特定的库,你必须定义它们的内容,并为它们提供自己的事件处理程序。