我的情况很独特。这是我的场景:
4 个链接到图库的缩略图 + 1 个中等图像(指向与第一个缩略图相同的来源)。
我想通过单击中图像来打开同一个图库,但是当我将它们与
rel
属性链接时,我在循环中出现了两次第一张图片(循环中有 5 个大图像)。
有没有办法在外部链接中调用指定的fancybox图库?这样我就可以触发中图像上的点击功能,并且循环中仍然只有 4 个大图像。请帮忙,我找不到解决方案。
更新
这是我的 HTML
<div class="details_gallery">
<a href="max/1.jpg" class="fancybox"><img src="mid/1.jpg" /></a>
<div class="details_gallery_min">
<a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
<a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
<a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
<a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
</div>
</div>
我想在单击“中间”图像时触发“详细信息”图库。
我要做的是修改“mid”图像的链接以触发图库
onclick
,而不是图库本身的一部分,例如:
<a href="max/1.jpg" onclick="$('a.fancybox').eq(0).trigger('click'); return false;"><img src="mid/1.jpg" alt="mid image" /></a>
.eq()
方法确保图库从第一张图像开始,否则它将从绑定到 fancybox 的最后一个元素开始。不过,您可以指定从图库的另一个元素开始。
<div class="details_gallery">
<a href="#" class="manualfancybox">Manual Call Fancybox</a>
<div class="details_gallery_min">
<a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a>
<a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a>
<a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a>
<a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a>
</div>
</div>
<script>
$(document).ready(function(){
$(".manualfancybox").click(function() {
var photos = new Array();
$(".details_gallery_min a").each(function(){
href = $(this).attr("href");
title = $(this).attr("title");
photos.push({'href': href, 'title': title})
});
jQuery.fancybox(photos ,
{ 'transitionIn' : 'elastic',
'easingIn' : 'easeOutBack',
'transitionOut' : 'elastic',
'easingOut' : 'easeInBack',
'opacity' : false,
'titleShow' : true,
'titlePosition' : 'over',
'type' : 'image',
'titleFromAlt' : true
}
);
});
});
</script>