我有一个垂直的缩略图列,每个缩略图对应于它自己的画廊(附加图像)。目前,当我单击缩略图时,它的 Fancybox 打开,然后我可以按“左”、“右”、“上”和“下”箭头键前进到相应画廊中的下一张或上一张图像。
这是一个演示:http://jsfiddle.net/Q6tmq/
如何重新映射“向上”和“向下”箭头键以显示下一个或上一个图库中的第一张图片(而不是该图库中的下一张或上一张图片)?
实际上,我希望用户能够打开 Fancybox,并且能够在不关闭 Fancybox 的情况下浏览所有画廊(在给定页面上)中的所有图像。
<!-- GALLERY 1 -->
<li>
<!-- THUMB -->
<a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>
</a>
<!-- IN-GALLERY IMAGES -->
<div class="hidden">
<a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
<a class="fancybox" rel="gallery1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"></a>
</div>
</li>
<!-- GALLERY 2 -->
<li>
<!-- THUMB -->
<a class="fancybox" rel="gallery2" href="http://fancyapps.com/fancybox/demo/4_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt=""/>
</a>
<!-- IN-GALLERY IMAGES -->
<div class="hidden">
<a class="fancybox" rel="gallery2" href="http://fancyapps.com/fancybox/demo/5_b.jpg"></a>
</div>
</li>
$(".fancybox")
.fancybox({
helpers : {
title : {
type : 'over'
},
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.7)'
}
}
}
});
最佳答案
如果不修改 Fancyboxs 源代码(或编写插件(有点))是不可能的,简而言之,他们的 API 是不可能的。 .
但是你可以将所有的rel
设置为gallery1
,这样用户就可以在不关闭Fancybox的情况下浏览所有的图片和画廊,这样就不允许用户在画廊之间跳跃。
您的隐藏
类仍然可以以相同的方式使用。
关于javascript - 如何在按下 'up' 或 'down' 箭头键时让 Fancybox 切换到下一个或上一个画廊?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20793933/