Question

使用fancyBox 2，如何避免在包含指向该图库中多个不同图像的多个链接的页面上的图库中重复缩略图帮助图像？

实例：http://publications.iodp.org/proceedings/349/101/349_101.html

参见＆＃34;简介＆＃34;，第一句，＆＃34;图F1，F2和＃34;用于样本链接。

资产：jQuery 1.8.3，Twitter Bootstrap 2.2.2，fancyBox 2.1.5

示例链接代码：

<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();
            }
        }
    }
});

我还没有看到这个具体的问题在任何地方得到解答，我希望这个答案对任何想要使用fancyBox创建一个页面上有多个标注的图库的人都有用。我还检查了可能已经有你答案的问题清单＆＃34;在撰写这个问题时，却找不到答案。文章我在过去三周内搜索了解决方案：1， 2， 3， 4， 5， 6， 7， 8， 9， 10， 11， 12， 13， 14， 15， 16

背景资料：

页面可能包含1到500多个数字（图片和字幕）。

页面上有三种方式引用数字：

来自文本（例如＆＃34; F1。第一个图标题。＆＃34;）在右侧固定导航的图表列表中 - 每个图形被引用一次，rel =＆＃34; navfigures＆＃34 ;;没有缩略图助手重复问题。
从文本中第一次提到图形后的文本中的灰色框（）中的图像中再次引用每个图形一次，rel =＆＃34; thumb＆＃34 ;;没有缩略图助手重复问题。
从页面文本中的文字（例如＆＃34; F1＆＃34;，＆＃34; F14＆＃34;等），其中可能包含一个或多个链接到这些中的任何一个图像（例如图F1可以在文本中从1到x次调出）; thumbnail helper按照调用它们的顺序为每个引用的图形创建缩略图。

前两种方式不涉及对任何一个数字的多次引用，因此不会导致重复缩略图。但是，第三种方式确实涉及多个引用，因此导致重复。例如，包含调出图F1，F2，F3，F3，F3，F1，F4的文本的页面将生成一个库，其中缩略图帮助器显示F1，F2，F3，F3，F3，F1，F4，而不是只有F1，F2，F3，F4。

使用beforeLoad回调从包含HTML标题的隐藏div中提取图形标题（每fancyBox documentation,提示和技巧，2。标题 - 使用元素而不是属性）。

只要每个图像只有一个链接，使用rel属性定义图库，就像文本中的缩略图图像和侧面导航中的图形列表一样。在文本主体中使用链接到图形的rel属性会导致缩略图的极端重复。

回答时请注意以下事项：我有使用HTML和CSS的经验，但使用JavaScript时几乎没有，使用jQuery几乎没有;我尽可能快地进行自我训练。

Answer 1

我一直在研究这个并且我不确定是否有任何基于配置的解决方案，但我发现工作的程序化方法是为每个相关的点击完全重新应用fancybox（）函数，首先循环遍历所有链接，保留每个href的字典并设置rel =＆＃34; gallery＆＃34;仅对于唯一的网址，通过首先添加它来确保点击的项目是其中之一。

$('.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块，如下图所示，每个块（gallery1，gallery2等）中的图像具有不同的rel属性，因此每个块都有自己的图库。但实际上所有图像都混合或重复......可能是因为我也有移动版本的隐藏部分，其中也包含所有这些块。所有隐藏，删除，重新排列或其他任何东西的尝试都是无用的。无论如何缩略图都在重复和混合..

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文件名有关。我不知道。

希望这有用。

当页面包含指向一个图像的多个链接时，fancyBox会复制缩略图帮助程序图像

2 个答案: