1

我有这个 html，在图像周围的链接上设置了 data-fancybox-group 属性，就像在演示中一样，可以启用下一个/上一个，但它不起作用。我包括按钮 js 和 css 并且它们正确加载，所以我不知道为什么它不起作用。任何人都可以帮忙吗？

   <ul class="gallery photos">                              

      <li>
        <div>
          <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/">Amy Robbins</a></h4>
          <div class="photocontent">
            <p>
              <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1.jpg">
            <img class="alignnone size-thumbnail wp-image-1082" title="Homepage-Together" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/amy-robbins/" class="cta">Show image</a>
    </div>

  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/">Indrias Getachew</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F.jpg">
            <img class="alignnone size-thumbnail wp-image-942" title="070149F" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/070149F-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/unicef-hq07-0149indrias-getachew/" class="cta">Show image</a>
    </div>
  </li>
  <li>
    <div>
      <h4><a href="http://nduna.demo.provokateur.com/media-center/photos/dsc-0103/">DSC 0103</a></h4>
      <div class="photocontent">
        <p>
          <a href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103.jpg">
            <img class="alignnone size-thumbnail wp-image-943" title="DSC_0103" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/07/DSC_0103-200x88.jpg" alt="" width="200" height="88" />
          </a>
        </p>
      </div>
      <a href="http://nduna.demo.provokateur.com/media-center/photos/dsc-0103/" class="cta">Show image</a>
    </div>
  </li>
</ul>

除此以外，该脚本运行良好，这是js：

$('.homepnl.photo li, .gallery.photos li, .lb-photos').each(function(i,itm){
var photolink = $('.photocontent a',$(itm)).attr('href');
// var title = $('.wp-caption-text',$(itm)).text();

$('a',$(itm)).click(function(evt){
  evt.preventDefault();
});


// $(itm).attr('title',title);
$(itm).attr('href',photolink);
$('.photocontent p a').attr(data-fancybox-group','gallery');

//applying the fancybook plugin to the item. 
$(itm).fancybox({href:photolink, 'autoDimensions': true });

});

截止日期是昨天，因此非常感谢您的帮助！

该页面在这里： http: //nduna.demo.provokateur.com/media-center/

4

2 回答 2

5

fancybox OLDER than 2.0 VS fancybox 2.0+

Fancybox OLDER 早于 2.0 ( http://fancybox.net/ )

  • 似乎只 rel支持分组的属性

Fancybox 2.0+ ( http://fancyapps.com/fancybox/ )

  • 支持 =rel属性 &&data-fancybox-group属性

因此，如果您使用的是旧于 2.0 版本的 fancybox，这可能是您的问题 :)

于 2013-09-03T09:40:13.120 回答
0

我认为您缺少的是锚标签上匹配的“rel”属性。从 Fancybox 文档（http://fancybox.net/howto）：

注意 - 画廊是从具有相同“rel”标签的元素创建的，例如：

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>     

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */

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

编辑：

因此，从您的代码中，您可以执行以下操作（对于您的所有图像）：

<a rel="gallery-one" href="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1.jpg"><img class="alignnone size-thumbnail wp-image-1082" title="Homepage-Together" src="http://nduna.demo.provokateur.com/wp-content/uploads/2012/12/Homepage-Together1-200x88.jpg" alt="" width="200" height="88" /></a>

编辑 2

当我在您页面的控制台中运行以下代码时，它会将下一个/上一个按钮添加到每个图像。我不能 100% 确定 fancybox 是如何工作的，但是在启动器中使用 jQuery 的 .attr() 选择器可能存在问题。

jQuery('.photocontent p a').data('fancyboxGroup','gallery').fancybox();
于 2012-12-07T13:44:04.367 回答