我有这个项目,我不能将图像组合成一个复合材料,所以每个叠加层必须有2个图像。到目前为止,下面这个小提琴做了伎俩,但我不能为我的生活找出如何让后面和下一个按钮相互联系。
http://jsfiddle.net/PFVxK/1344/
HTML
<div class="image">
<div rel="gallery1">
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=Before" />
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=After" />
<p class="title">Title Goes Here</p>
</div>
<br style="clear:both;" />
</div>
<div class="image">
<div rel="gallery1">
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=Before2" />
<img src="http://placehold.it/300x300/B7AF90/FFFFFF&text=After2" />
<p class="title">Title Goes Here</p>
</div>
<br style="clear:both;" />
</div>
JQuery的
$(".image").click(function () {
$.fancybox({
type: 'html',
content: $(this).children().html()
}).attr('rel', 'gallery1');
});
答案 0 :(得分:2)
问题在于您使用手动方法(click
)触发fancybox,因此除非您在脚本本身中设置gallery元素,否则无法以这种方式使用图库。
请尝试使用此变体:
var images = [];
$(".image").each(function(i){
images[i] = $(this).children().html();
$(this).on("click", function(){
$.fancybox(images,{
index: i,
type: 'html'
});
})
});
注意 .on()
需要jQuery v1.7 +
参见 JSFIDDLE