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

$(".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来完成此操作;

使用Jquery查找父div的id

我没有测试它或任何东西,但这样的东西应该让你朝着正确的方向前进;

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

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

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

            });