1

我制作了一个包含多个相册的图片库，每个相册包含不同数量的照片。我正在尝试获得两种花式行为

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

Req 2 - 在每个相册下面我都有一个锚标签，它显示相册中的照片数量。当我点击这个锚标签时，花哨的盒子应该只浏览那个特定相册的照片。我不确定如何将此锚标记绑定到触发器幻想框并浏览相册中的图像。我有一个静态 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>';
                }
            });

});
4

2 回答 2

0

为您的要求 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>

这对我来说非常有效。希望能帮助到你！

于 2012-06-25T23:03:11.140 回答
0

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

专辑一：

<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 中的最后一个元素开始

于 2012-06-26T16:58:06.803 回答