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文件名有关，这些文件名对于每个项目都是相同的。我不知道。

希望这是有帮助的。