Question

我正在尝试将Fancybox实施到一个小型画廊。

图库有一个主图像，下方有缩略图。（见小提琴：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)'
            }
        }
    }
});

Answer 1

我必须做的是在主图像和缩略图周围创建一个包装器然后我必须确保<a>所有人都data-fancybox-group="gallery"。

在我的jQuery中，我不得不使用

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

现在，Fancybox将应用于包装器内的所有链接。

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

1 个答案: