Fancybox下一个/上一个不起作用 [英] Fancybox next/prev not working

问题描述

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

I have this html with the data-fancybox-group attribute set on the link around the image just as in the demo to enable the next/previous but it's not working. I'm including the buttons js and css and they're loading in correctly so I have no idea why it's not working. Can anyone help?

   <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:

The script is working perfectly other than this, here's the 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 });    

});

截止日期是昨天，所以任何帮助都将不胜感激！

The deadline for this was yesterday so any help greatly appreciated!

页面在此处: http://nduna.demo.provokateur.com/media-中心/

推荐答案

fancybox比2.0 VS fancybox 2.0+更旧

Fancybox的版本早于2.0( http://fancybox.net/)

Fancybox OLDER than 2.0 ( http://fancybox.net/ )

• 似乎支持仅 rel分组分组

• appears to support ONLY rel attrubute for grouping

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

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

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

• supports both = rel attribute && data-fancybox-group attribute

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

So if you are using older than 2.0 version of fancybox this is probably your issue :)

这篇关于Fancybox下一个/上一个不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！