如何使用Fancybox对来自两个不同div的图像进行分组？

我正试图将Fancybox实施到一个小画廊。如何使用Fancybox对来自两个不同div的图像进行分组？

该画廊有一个主图像缩略图如下。（请参阅小提琴：http://jsfiddle.net/rCBHL/1/）

我尝试使用rel="gallery"和data-fancybox-group="gallery"将图像分组。但是我仍然无法通过单击箭头（未显示）看到下一张图像。

有人可以发现为什么我无法使用Fancybox浏览图像吗？

HTML代码：

<div class="column5 main-image"> 
      <div class="big"> 
      <a href="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg" data-fancybox-group="gallery" rel="gallery" id="large-image"> 
      <img alt="Prosjektbilde" src="http://farm3.static.flickr.com/2591/4135665747_3091966c91.jpg">   </a> 
      <div class="expand"></div> 
      </div> 

      <div class="project-thumbs"> 

       <div class="thumb"> 
        <a data-fancybox-group="gallery" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg" rel="gallery" class="thumb_link"> 
        <img src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg"> 
        </a> 
        <div class="mask"> 
        <div class="more"></div> 
        </div> 
       </div> 
       <div class="thumb"> 
        <a data-fancybox-group="gallery" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg" rel="gallery" class="thumb_link"> 
        <img src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg"> 
        </a> 
        <div class="mask"> 
        <div class="more"></div> 
        </div> 
       </div> 
       <div class="thumb"> 
        <a data-fancybox-group="gallery" href="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg" rel="gallery" class="thumb_link"> 
        <img src="http://farm3.static.flickr.com/2641/4163443812_df0b200930_m.jpg"> 
        </a> 
        <div class="mask"> 
        <div class="more"></div> 
        </div> 
       </div>   </div> 
     </div>

jQuery代码：

$("#large-image").attr('rel', 'gallery').fancybox({ 
    closeClick : true, 
    padding: 0, 
    helpers : { 
     overlay : { 
      css : { 
       'background' : 'rgba(238,238,238,0.85)' 
      } 
     } 
    } 
});

来源

2013-07-08 Steven

可能重复[如何在同一页上创建单独的Fancybox图库？]（http://stackoverflow.com/questions/9486034/how-to-create-separate-fancybox-galleries-on-the-same-页） – JFK

也检查此http://stackoverflow.com/a/17034211/1055987 – JFK

不，它只是一个画廊，我找到了解决方案。 – Steven

我必须做什么，是要创建一个围绕主图像和缩略图的包装。
然后我不得不确保我所有的<a>都有data-fancybox-group="gallery"。

在我的jQuery，我不得不使用

$(".wrapper a").fancybox();

现在的fancybox将被应用到包装内的所有链接。

来源

2013-07-08 16:40:46 Steven

或将相同的类添加到所有链接并将此类绑定到fancybox，如提供的示例中所示 – JFK

如何使用Fancybox对来自两个不同div的图像进行分组？

回答

相关问题