5

我正在构建一个 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/

4

3 回答 3

8

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

你真正想要的是画廊 1 中的前十六个；

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

画廊 2 中的下一个 16 个；

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

问题是 - 鉴于rel属性是通过 JS 分配的，如何做到这一点？好吧，我会考虑根据父父 div id 来做。每个画廊图标元素都有一个画廊项目父项。这些中的每一个都是具有特定 ID 的画廊类的一部分。例如

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

因此，您需要将该唯一的画廊 ID 分配为漂亮的照片 rel 值。IE;

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

我会通过查找所有画廊图标并使用closest()来查找父画廊 ID 来做到这一点，就像这样；

使用 Jquery 查找父 div 的 id

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

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

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

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

            });
于 2012-12-13T20:44:27.433 回答
0

我可能会提供更简单的解决方案，我只是div在each功能中浏览我所有的画廊，然后初始化prettyPhoto它们里面的图像。

$(document).ready(function(){
    $.each($(".gallery"), function(i, val) {
        var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
        $(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
    });
});
于 2014-01-04T17:26:01.687 回答
-1

所需要做的就是更改 html 中的 rel，在其中添加画廊，看起来像这样 rel="prettyPhoto[pp_gal]"

在您在 div 中创建的第一个画廊中，将 rel="prettyPhoto[pp_gal]" 更改为 "prettyPhoto[gallery1]" （例如）

以及“prettyPhoto[gallery2]”的旁边等等。

于 2014-02-18T17:48:37.697 回答