时间戳

首页 > 解决方案 > Fancybox 忽略拇指选项

javascript - Fancybox 忽略拇指选项

问题描述

我得到了五个缩略图的画廊预览，画廊本身有更多的照片。为了避免将所有内容都放入我的代码中，我将它们放在一个数组中。

这是我的 HTML 代码：

<div id="start_slides">
    <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>

我想在右侧显示缩略图。但是我不明白为什么这不起作用。

var $links = $("#start_slides 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,
        thumbs: {
            autoStart: true,
            axis: "y"
        }
    }, $links.index(this)
    );
});

为什么这不起作用，我该如何解决？

标签： javascriptjqueryfancybox

解决方案

您没有为缩略图提供任何值。

代替

{ src: 'photo1.jpg', opts: { caption: 'First caption' } }

和

{ src: 'photo1.jpg', thumb: 'thumb1.jpg', opts: { caption: 'First caption' } }

其余项目以此类推。

推荐阅读