0

我正在尝试将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)'
            }
        }
    }
});
4

1 回答 1

0

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

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

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

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

于 2013-07-08T16:40:46.123 回答