如何不总是从第一张照片开始？
如何不总是从第一张照片开始？
提问于 2019-08-29 06:17:15
我得到了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张照片的机会？
Stack Overflow用户
回答已采纳
发布于 2019-08-29 13:56:51
您只需将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)
);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57700696
复制相关文章
相似问题
腾讯云开发者
