javascript - prettyPhoto 一页上的多个画廊

Question

我正在构建一个 worpdress 网站，并在使用短代码构建的页面上有多个画廊。目前，所有图像都被赋予了 rel 属性“prettyPhoto[1]”，但我需要将每个画廊分开。 我在页面上总共有 56 张图片，所以当画廊 1 的第一张图片在灯箱中打开时它说 1/56 我可以点击所有 56 张图片，我想要的是画廊一说 1/16 然后画廊 1/16 等 我被告知在我的 raw.js 文件中编辑这行脚本:

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

但不确定如何处理它？任何帮助将不胜感激。 以下是相关页面的链接:

http://www.tetra-shed.co.uk/news/

Answer 1

prettyPhoto 根据方括号的内容将画廊组合在一起。因此，您将在同一个图库中获取所有 56 张图像，因为它们都已分配给图库 1。

您真正想要的是画廊 1 中的前 16 个；

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');

画廊 2 中接下来的 16 个；

$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');

问题是 - 如果 rel 属性是通过 JS 分配的，该怎么做？好吧，我会考虑根据父父 div id 来做这件事。每个 gallery-icon 元素都有一个 gallery-item 父元素。其中每一个都是具有特定 ID 的图库类的一部分。例如

<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'>
    <dl class='gallery-item'>
        <dt class='gallery-icon'>

因此，您可能希望将唯一的画廊 ID 指定为漂亮照片的相对值。即；

$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');

我会通过查找所有图库图标并使用 closest() 查找父图库 ID 来实现，就像这样；

Finding the id of a parent div using Jquery

我没有测试过它或其他任何东西，但像这样的东西应该会让你朝着正确的方向前进；

            $('#content').find('.gallery-icon a').each(function() {

                var gallid = $(this).closest("div").attr("id");

                $(this).attr('rel', 'prettyPhoto['+ gallid +']');

            });