Question

我正在尝试使用Fancybox创建（组合）图像和YouTube视频库，同时还使用Fancybox拇指。我遇到了两个问题：

当您点击视频的链接时（第一个链接 - PS，我没有尝试Rick滚动你点击它大声笑），它打开了，但它没有显示拇指或让您浏览组中的其他项目
如果您点击图片的链接（第二个或第三个链接），它会显示所有生成的缩略图 - 包括视频的缩略图...但是当您点击视频的缩略图时，它不会＃39; t跳到视频。

思想？

$('.fancybox-thumbs').fancybox({
    prevEffect: 'none',
    nextEffect: 'none',
    closeBtn  : true,
    arrows    : true,
    nextClick : true,
    helpers   : {thumbs: {width: 50, height: 50}}
});

$('.fancybox-media')
    .attr('rel', 'media-gallery')
    .fancybox({
        openEffect : 'none',
        closeEffect: 'none',
        prevEffect : 'none',
        nextEffect : 'none',
        arrows     : true,
        helpers    : {media: {}, buttons: {}}
});

到目前为止我所拥有的内容：http://jsfiddle.net/6j7wxr8e/

Answer 1

首先请注意fancybox图库的所有元素必须共享两个，相同的选择器和相同的rel属性（或相同的data-fancybox-group属性）

在您的示例中，选择器.fancybox-thumbs和.fancybox-media不能属于同一个库，无论它们是否共享相同的rel属性。这也适用于共享相同选择器但具有不同rel属性值的元素。它有意义吗？

因此，请确保您的元素共享相同的选择器，如

<a class="fancybox">
<a class="fancybox">
<a class="fancybox">

您可能不需要对rel属性进行硬编码，因为您可以初始化fancybox，如：

$('.fancybox').attr('rel', 'media-gallery').fancybox();

...它为 class rel的所有元素设置了相同的media-gallery属性（fancybox）。

然后，您可以在一个初始化脚本中对所有API选项进行分组，包括fancybox助手媒体，拇指，按钮等。

jQuery(document).ready(function ($) {
    $('.fancybox').attr('rel', 'media-gallery').fancybox({
        prevEffect: 'none',
        nextEffect: 'none',
        closeBtn: true,
        arrows: true,
        nextClick: true,
        helpers: {
            thumbs: {
                width: 50,
                height: 50
            }, // requires to include thumbs js and css files
            media: {}, // requires to include media js file
            buttons: {} // requires to include buttons js and css files
        }
    });
});

查看您的分叉 JSFIDDLE

使用fancybox-media和fancybox-thumbs

1 个答案: