按“向上”或“向下”箭头键时，如何让 Fancybox 切换到下一个或上一个画廊？

Question

我有一个垂直的缩略图列，每个都对应于它自己的画廊（附加图像）。目前，当我单击缩略图图像时，它的 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)'
            }
        }
    }
}); 

Answer 1

不修改 Fancyboxs 源代码（或编写插件（有点））是不可能的，简而言之，他们的 API 是不可能的。

但是您可以将所有rel 设置为gallery1，这样用户就可以在不关闭Fancybox 的情况下浏览所有图像和画廊，并且不允许用户在画廊之间跳转。

您的hidden 类仍然可以以相同的方式使用。