fancyBox在頁面包含多個鏈接到一個圖像時複製縮圖幫助圖像

Question

隨着fancyBox 2，我如何避免在包含該圖庫中多個不同圖像的多個鏈接的頁面上的圖庫中重疊縮略圖幫助圖像？

活生生的例子：http://publications.iodp.org/proceedings/349/101/349_101.html

見 「導言」，第一句話， 「圖形F1，F2」 爲樣本的鏈接。

資產：jQuery的1.8.3，Twitter的引導2.2.2，2.1.5的fancybox

樣本鏈接代碼：

<a class="fancybox-xtitle Link" rel="fancybox-xtitle" data-title-id="F1title" href="figures/01_F01.png">F1,</a> <a class="fancybox-xtitle Link" rel="fancybox-xtitle" data-title-id="F2title" href="figures/01_F02.png">F2</a> 

JavaScript示例：

$(".fancybox-xtitle") 
.attr('rel', 'gallery') 
.fancybox({ 
    openEffect : 'none', 
    closeEffect : 'none', 
    prevEffect : 'none', 
    nextEffect : 'none', 
    closeBtn : false, 
    arrows : false, 
    padding : [15, 15, 55, 15], 
    minWidth : 300, 
    maxWidth : 1200, 
    helpers : { 
     thumbs : { 
      width : 50, 
      height : 50 
     }, 
     title : { 
      type : 'inside', 
      position : 'top' 
     }, 
     buttons : {}, 
    }, 
    beforeLoad: function() { 
     var el, id = $(this.element).data('title-id'); 
     if (id) { 
      el = $('#' + id);    
      if (el.length) { 
       this.title = el.html(); 
      } 
     } 
    } 
}); 

我沒有在任何地方看到這個具體問題，我希望答案對任何人都有用ho希望使用fancyBox在頁面上創建一個包含多個標註的圖庫。在編寫此問題時，我還查看了「可能已經有答案的問題」列表，但未找到答案。我已經尋找解決方案，在過去三週文章：1， 2， 3， 4， 5， 6， 7， 8， 9， 10， 11， 12， 13， 14, 15, 16

背景資料：

頁面可以具有從1至500 +數字（影像加上字幕）。

有三種方式，其中數字是在頁面上引用：

1. 從文本（例如「 F1第一張圖說明」）在圖形列表在固定導航到右每個圖都被引用一次，rel =「navfigures」;沒有縮略圖助手重複問題。

2. 從第一次提到文字中的圖形後的文本中的灰色方框（）中的圖像 - 再次引用每個圖形，rel =「thumb」;沒有縮略圖助手重複問題。

3. 從頁面文本中的文本（例如「F1」，「F14」等）可能包含一個或多個鏈接到這些圖像中的任何一個（例如圖F1可能會在文本中調出從1到x次）;縮略圖助手爲每個被引用的圖形按照它們被調出的順序創建縮略圖。

前兩種方式不涉及多個引用任何一個數字，因此不會導致縮略圖重複。然而，第三種方法涉及多個參考，因此會導致重複。例如，包含調出圖F1，F2，F3，F3，F3，F1，F4的文本的頁面將導致縮略圖助手顯示F1，F2，F3，F3，F3，F1，F4的庫只有F1，F2，F3，F4。

使用beforeLoad回調（每fancyBox documentation,提示&技巧，2.標題 - 使用元素而不是屬性）從包含HTML中的標題的隱藏div中提取數字標題。

只要每個圖像只有一個鏈接，就像文本中的縮略圖圖像和側面導航中的圖形列表一樣，使用rel屬性定義圖庫效果很好。在鏈接到文本正文中的數字的鏈接上使用rel屬性導致縮略圖的極度重複。

回答時請注意以下幾點：我有使用HTML和CSS的經驗，但使用JavaScript並沒有太多，而幾乎沒有使用jQuery;我儘可能快地進行自我訓練。

Answer 1

我一直在看這個，我不確定是否有任何基於配置的解決方案，但我發現的一個編程方法是爲每個相關點擊完全重新應用fancybox（）函數，在首先遍歷所有鏈接後，保留每個href的字典並僅爲獨特的url設置rel =「gallery」，確保點擊的項目是其中的一個，方法是首先添加它。

$('.fancybox').click(function(e) { 
    var uniques = {};  
    $(this).attr('rel', 'gallery'); 
    uniques[$(this).attr('href')] = true; 
    $('.fancybox').not(this).each(function() { 
     href = $(this).attr('href'); 
     if(!uniques[href]) { 
      $(this).attr('rel', 'gallery'); 
      uniques[href] = true; 
     } else { 
      $(this).attr('rel', ''); 
     } 
    }); 

    $('.fancybox').fancybox({ 
     helpers : { 
      thumbs : { 
       width : 50, 
       height : 50 
      } 
     } 
    }); 
}); 

希望有幫助。演示請參閱https://jsfiddle.net/gL6578m3/。

Answer 2

下面是我的工作完美更優雅的解決方案：

起初我有很多project塊象下面這樣具有在每個塊具有不同rel屬性的圖像（gallery1，庫2等），使每塊都有自己的畫廊。但實際上所有圖像都是混合或重複的......可能是因爲我也有隱藏的部分，包含所有這些塊的移動版本。所有試圖隱藏，刪除，重新排列或其他任何東西都是無用的。縮略圖被複制反正混合..

HTML結構：

<div class="project"> 
    <div class="img_container"> 
     <a href="img/a/01.jpg" class="fancybox-thumb" rel="gallery1"> 
      <img src="img/a/01.jpg"/> 
     </a> 
     <a href="img/a/02.jpg" class="fancybox-thumb" rel="gallery1"> 
      <img src="img/a/02.jpg"/> 
     </a> 
     <a href="img/a/03.jpg" class="fancybox-thumb" rel="gallery1"> 
      <img src="img/a/03.jpg"/> 
     </a> 
    </div> 
</div> 

<div class="project"> 
    <div class="img_container"> 
     <a href="img/b/01.jpg" class="fancybox-thumb" rel="gallery2"> 
      <img src="img/b/01.jpg"/> 
     </a> 
     <a href="img/b/02.jpg" class="fancybox-thumb" rel="gallery2"> 
      <img src="img/b/02.jpg"/> 
     </a> 
     <a href="img/b/03.jpg" class="fancybox-thumb" rel="gallery2"> 
      <img src="img/b/03.jpg"/> 
     </a> 
    </div> 
</div> 

只有2塊在這裏，想象有超過15個，像我一樣。

這裏的jQuery的解決方案：

var fan = $('.fancybox-thumb'); //caching 
    fan.click(function() { 
     fan.attr('rel', ''); //clear rel attribute of all images 
     $(this).parents().children().attr('rel', 'gallery'); //set rel to current group of images 

     fan.fancybox({ 
      //all those settings 
      helpers : { 
       thumbs : { 
        width : 195, 
        height : 131 
       } 
      } 
     }); 

    }); 

所以，畢竟可以使rel=''每一個形象，它不再重要。用.fancybox類抓取所有圖像，清除rel屬性並將其添加到您需要的圖像。

PS：可能與這些01.jpg文件名有關，這些文件名對於每個項目都是相同的。我不知道。

希望這是有幫助的。