如何不总是从第一张照片开始？

Question

我得到了 5 个缩略图的图库预览，但图库中的照片更多。为了避免将所有内容放入我的代码并通过 CSS 隐藏它们，我正在寻找另一种解决方案。

这是我的 HTML 代码：

<div id="start_slides2">
    <a href="javascript:;"><img src="./thumb1.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb2.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb3.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb4.jpg" alt=""></a>
    <a href="javascript:;"><img src="./thumb5.jpg" alt=""></a>
</div>

目前没问题。我可以使用常见的方式或将其放入这样的对象中：

$("#start_slides2 a").on('click', function () {
    $.fancybox.open([
    { src: 'photo1.jpg', opts: { caption: 'First caption' } },
    { src: 'photo2.jpg', opts: { caption: 'Second caption' } },
    { src: 'photo3.jpg', opts: { caption: 'Third caption' } },
    { src: 'photo4.jpg', opts: { caption: 'Fourth caption' } },
    { src: 'photo5.jpg', opts: { caption: 'Fifth caption' } },
    { src: 'photo6.jpg', opts: { caption: 'Sixth caption' } },
    { src: 'photo7.jpg', opts: { caption: 'Seventh caption' } },
    { src: 'photo8.jpg', opts: { caption: 'Eigth caption' } }],
    { loop: true }
    );
});

问题是它总是从第一项开始，即使用户点击了第三个缩略图，例如

如何才能显示点击的图片，同时保留最多显示 x 张照片的机会？

Answer 1

您只需将 index 作为第三个参数传递（参见文档 https://fancyapps.com/fancybox/3/docs/#api），例如：

var $links = $("#start_slides2 a");

$links.on('click', function () {
    $.fancybox.open([
    { src: 'photo1.jpg', opts: { caption: 'First caption' } },
    { src: 'photo2.jpg', opts: { caption: 'Second caption' } },
    { src: 'photo3.jpg', opts: { caption: 'Third caption' } },
    { src: 'photo4.jpg', opts: { caption: 'Fourth caption' } },
    { src: 'photo5.jpg', opts: { caption: 'Fifth caption' } },
    { src: 'photo6.jpg', opts: { caption: 'Sixth caption' } },
    { src: 'photo7.jpg', opts: { caption: 'Seventh caption' } },
    { src: 'photo8.jpg', opts: { caption: 'Eigth caption' } }],
    { loop: true }, $links.index(this)
    );
});

演示 - https://jsfiddle.net/cfnaw4oL/

如何不总是从第一张照片开始？

How to not always start with first photo?

javascript

jquery

fancybox

fancybox-3