Question

我创建了一个包含多个相册的图库，每个相册包含不同数量的照片。我试图获得两个fancybox行为

要求1 - 点击相册的主要图像会打开一个精美的框并浏览所有相册的主要图像。我让这部分工作了

要求2 - 在每张专辑的下方，我都有一个锚标记，用于显示相册中的照片数量。当我点击这个锚标签时，精美的盒子应该只浏览该特定专辑的照片。我不确定如何将此锚标签绑定到触发器fancybox并导航相册中的图像。我有一个静态json文件，我有两个属性primaryPhoto和imagesContained(array)。

有人可以帮助我解决这个问题吗？

$.each(data.gallery,function(i,item) {
 $.each(item.albums, function(i,photos) {
        imageFolder = sec.mediumUrl;
        imgInsert += '<a href="' + photos + '" class="grouped_elements" rel="Gallery' + count + '" class="big_img"'  +'">';
    });
    '<a href="' + imgThumb + '" class="description2" title="Hello world">' + count + '</a></div>'; 
    count++;
});

我试图像这样访问它

$("a.description2").click(function() {
 $("a.grouped_elements").fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none',
                'titlePosition': 'over',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

});

Answer 1

对于您的请求2

我整天都在为自己的项目研究这个问题，我想出了一个解决方案。

说这是您网页上的图库：

<a id="Gallery_1" rel="gallery1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a rel="gallery1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

*注意我已在图库1 *

的第一个链接中添加了名为“Gallery_1”的ID

然后，对于图库下方的文字，请使用以下javascript：

<a style="cursor: pointer;" onclick='$("a#Gallery_1").trigger ("click");'>Your Link Text</a>

这对我来说非常合适。希望它有所帮助！

Answer 2

基本上你的html渲染代码应该是这样的：

专辑1：

<a class="grouped_elements" rel="gallery1" href="image01.jpg" title="title01"><img src="thumb01.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery1" href="image02.jpg" title="title02"><img src="thumb02.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery1" href="image03.jpg" title="title03"><img src="thumb03.jpg" alt="" /></a>

等

专辑2：

<a class="grouped_elements" rel="gallery2" href="image10.jpg" title="title10"><img src="thumb10.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery2" href="image11.jpg" title="title11"><img src="thumb11.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery2" href="image12.jpg" title="title12"><img src="thumb12.jpg" alt="" /></a>

等

专辑3：

<a class="grouped_elements" rel="gallery3" href="image20.jpg" title="title20"><img src="thumb20.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery3" href="image21.jpg" title="title21"><img src="thumb21.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery3" href="image22.jpg" title="title22"><img src="thumb21.jpg" alt="" /></a>

等

注意每个相册都设置了不同的rel属性，无论它们是否共享class，我们都可以使用$("a.grouped_elements").fancybox({// options here})来触发任何专辑的fancybox。

现在，为了从不同的链接启动每个相册（一个锚标记，在示例中显示相册中的照片数量），我们将为共享相同class的每个相册设置一个锚点但是使用不同的ID（@RevCocnept建议并不是一个坏主意。）

<a id="gallery1" class="description2" href="javascript:;">open album 1</a>
<a id="gallery2" class="description2" href="javascript:;">open album 2</a>
<a id="gallery3" class="description2" href="javascript:;">open album 3</a>

注意，每个ID的值与相应相册的rel值完全相同。

现在，我们可以为这三个主播使用单个脚本，定位其共享的class：

$(".description2").click(function(){
 $('.grouped_elements[rel="'+this.id+'"]').eq(0).trigger("click");
});

请注意，我们使用.eq(0)从第一个元素启动库，否则它将从DOM中添加的最后一个元素开始

从页面上的链接触发fancybox - 具有多个专辑的图像库

2 个答案: