Fancybox下一個/上一個不工作

我有這個HTML與數據fancybox組屬性設置在圖像周圍的鏈接，就像在演示中啓用下一個/上一個，但它不工作。我包括按鈕js和css，並且它們正確加載，所以我不知道它爲什麼不起作用。誰能幫忙？Fancybox下一個/上一個不工作

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

來源

2012-12-07 frank

從去年第三在js中實際上是這樣的： $（'。photocontent p a'）。attr（'data-fancybox-group'，'gallery'）; – frank

在頁面底部的照片縮略圖生成的Lightbox上，是否應該有next/prev按鈕？想要確保我在正確的位置尋找。 – Scottie

是的，據我所知，這應該會自動發生，如果他們有相同的數據fancybox組屬性 – frank

我認爲你缺少的是對你的錨標記匹配的「相對」屬性。從的fancybox文檔（http://fancybox.net/howto）： -

注畫廊是從誰具有相同的「相對」標籤，例如元素創建：

/* 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>

EDIT 2

當我運行在你的頁面上的控制檯下面的代碼，它然後將下一/上一個按鈕，每一個圖像。我並不是100％確定fancybox的工作原理，但在啓動器中使用jQuery的.attr（）選擇器可能會有問題。

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

來源

2012-12-07 13:44:04 Scottie

你可以使用rel或數據屬性，既不工作 – frank

檢查我的第二次編輯，可能有一個解決方案在那裏的某個地方給你。 – Scottie

謝謝，我現在嘗試一下，讓你知道 – frank

的fancybox大於2.0 VS的fancybox 2.0+

的fancybox較舊的年齡大於2.0（http://fancybox.net/）

似乎支持ONLYrel attrubute用於分組

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

支持= rel屬性& & data-fancybox-group屬性

所以，如果你使用的是早於2.0版本的fancybox的這可能是你的問題:)

來源

2013-09-03 09:40:13

Fancybox下一個/上一個不工作

回答

相關問題