使用fancybox-media with fancybox-thumbs

Question

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

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

想法？

$('.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(); 

..它将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