Question

我有这个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/

Answer 1

fancybox OLDER比2.0 VS fancybox 2.0 +

Fancybox OLDER而不是2.0（http://fancybox.net/）

似乎支持仅 rel attrubute进行分组

Fancybox 2.0+（http://fancyapps.com/fancybox/）

支持= rel属性＆amp;＆amp; data-fancybox-group属性

因此，如果您使用的是早于2.0版本的fancybox，这可能是您的问题：）

Answer 2

我认为您缺少的是锚标签上匹配的“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

当我在页面的控制台中运行以下代码时，它会为每个图像添加next / prev按钮。我不是100％肯定fancybox如何工作，但在启动器中使用jQuery的.attr（）选择器可能存在问题。

jQuery('.photocontent p a').data('fancyboxGroup','gallery').fancybox();

Fancybox next / prev not working

2 个答案: