Question

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

使用div ID来区分画廊。我想让它使用rel=""属性，可能是一个尾随数字。是否可以编写这些来检查诸如rel="gallery1"之类的内容，但是在一个增加数字的循环内？我不熟悉这些东西的js语法。或者也许是一个循环，用于检查具有该rel的对象的dom。 THX。

的Javascript

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

Answer 1

这会在.lightBox() rel，gallery1和gallery2 gallery3的链接上循环播放for循环3次for (x = 1; x <= 3; x += 1) { $('a[@rel*=gallery' + x + ']').lightBox(); }。您可以将循环次数增加到任意数量。

<强>的Javascript

rel

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

为您的所有灯箱链接提供rel类，然后为所有链接指定不同的gallery1组，例如gallery2，gallery3和.lightBox()。然后调用以下内容，我认为<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>并且它们应该单独分组。

<强> HTML

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

<强>的Javascript

gallery1

应该将gallery2个链接组合在一起，将gallery3链接组合在一起，将{{1}}链接组合在一起。这应该是默认情况下发生的。

我希望这会有所帮助。

修改1

值得注意的是，jQuery灯箱插件已有4。5年未更新。您可能希望查看更好的维护替代方案，例如colorbox。

将jquery灯箱转换为用户标记的库添加

1 个答案: