![](/img/trans.png)
[英]Svelte: How can I set the focus to the previous/next element in the list item when pressing UP arrow and DOWN arrow keys?
[英]How can I make Fancybox switch to the next or previous gallery upon pressing the 'up' or 'down' arrow keys?
我有一列垂直的缩略图,每个缩略图都对应于自己的画廊(带有其他图像)。 当前,当我单击缩略图时,它的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,也不允许用户在画廊之间跳转。
您的hidden
类仍然可以按相同方式使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.