0

我正在尝试我的第一个灯箱插件，并试图弄清楚如何处理设置导航控件。我知道这必须是一个简单的修复，但我完全想多了。它支持 html 内容和图像，并使用标准 rel 属性进行画廊连接。我的问题是：如何根据 rel 从 1 个图像（或 div）导航到下一个图像？

起初我虽然 $(this).nextAll('[rel="ExampleGallery"]') 会工作，但不幸的是这并不针对下一个。所以......我可能完全偏离了轨道，但是如果循环调用插件的对象，检测它们是否有 rel 标签，然后如果它们确实将它们的值推送到动态创建的数组中，我现在要做的是Gallery Names 作为数组名称。然后只需使用数组中的索引来浏览对象...

HTML

<img src="images/pic1.png" width="230px" height="215px" rel="Gallery1"/>
<img src="images/pic2.png" width="230px" height="215px" rel="Gallery2"/>
<img src="images/pic3.png" width="230px" height="215px" rel="Gallery1"/>

大批

Gallery1                  Gallery2

0 (ref to img tag 1)      0 (ref to img tag 2)
1 (ref to img tag 3)

再一次，我认为我做错了，如果这太糟糕了，我很抱歉。我将如何为此编写JS？

1- 根据 rel 名称动态创建数组 2- 将对象推送到数组以便稍后引用

非常感谢！

4

1 回答 1

2

我认为您应该重新考虑要为此使用的数据结构。但是，要简单地收集图像，这将起作用：

var arrays = {};
$('img').each(function(){
    var arrayName = $(this).attr('rel');
    if(arrays.hasOwnProperty(arrayName)) {
        arrays[arrayName].push(this);
    }
    else {
        arrays[arrayName] = [this];
    }
}

最后： arrays是{ Gallery1: [img1, img3], Gallery2: [img2] }

于 2012-07-23T00:43:59.270 回答