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中的前十六个;

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

画廊2中的下一个16;

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

问题是 - 如果通过JS分配rel属性，如何做到这一点？好吧，我会根据父父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 +']');

            });

Answer 2

我可能会提供更简单的解决方案，我只是浏览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});
    });
});

Answer 3

所有需要做的就是更改html，在你添加你的画廊的地方看起来像这样的rel =＆＃34; prettyPhoto [pp_gal]＆＃34;

在您在div中创建的第一个库中，更改了rel =＆＃34; prettyPhoto [pp_gal]＆＃34; to＆＃34; prettyPhoto [gallery1]＆＃34; （例如）

和下一个＆＃34; prettyPhoto [gallery2]＆＃34;等等。

prettyPhoto在一个页面上的多个画廊

3 个答案: