0

我有一个关于如何重写使用 jquery 的灯箱脚本的问题。

它使用 div id 来区分画廊。我想让它使用该rel=""属性，可能带有一个尾随数字。可以这样写来检查诸如rel="gallery1"但在增加数字的循环内的东西吗？我不熟悉此类事情的 js 语法。或者可能是一个循环检查具有该 rel 的对象的 dom。谢谢。

Javascript

$(function() {
    $('#gallery1 a').lightBox();
    $('#gallery2 a').lightBox();
});
4

1 回答 1

0

这将通过 for 循环 3 次调用.lightBox()带有relofgallery1和gallery2的链接gallery3。您可以将循环数增加到您想要的任意数量。

Javascript

for (x = 1; x <= 3; x += 1) {
    $('a[@rel*=gallery' + x + ']').lightBox();
}​

尽管我认为您可以通过指定不同的rel属性并调用.lightBox()所有链接来对灯箱进行分组。

为您的所有灯箱链接指定一个类别，lightbox然后为所有链接指定不同的rel组，例如gallery1,gallery2和gallery3。然后调用以下，我认为.lightBox()它们都应该单独分组。

HTML

<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery1">[link text or thumbnail]</a>

<a href="[image_src]" class="lightbox" rel="gallery2">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery2">[link text or thumbnail]</a>

<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>
<a href="[image_src]" class="lightbox" rel="gallery3">[link text or thumbnail]</a>

Javascript

$('a.lightbox').lightBox();

应该发生的是gallery1链接组在一起，gallery2链接组在一起，gallery3链接组在一起。这应该默认发生。

我希望这有帮助。

编辑 1

需要注意的是，jQuery 灯箱插件已经 4.5 年没有更新了。您可能希望查看维护更好的替代方案，例如colorbox。

于 2012-11-26T22:29:34.113 回答