prettyPhoto multiple galleries on one page

Question

I am building a worpdress site and have multiple galleries on a page built using the shortcode. At the moment all the image are given the rel attribute 'prettyPhoto[1]' but I need each gallery to be separate. I have 56 images in total on the page, so when the first image of gallery 1 opens in lightbox it says 1/56 and I can click through all 56 images, what I want is for gallery one to say 1/16 then gallery 1/16 etc. I was told to edit this line of script in my raw.js file:

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

but nor sure what to do it with it? Any help would be greatly appreciated. Here is a link to the page in question:

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

Answer 1

prettyPhoto groups galleries together based on the contents of the square brackets. So you are getting all 56 images in the same gallery because they have all been assigned to gallery 1.

What you really want is the first sixteen in gallery 1;

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

And the next 16 in gallery 2;

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

The question is- how to do that given that the rel attribute is being assigned via JS? Well I would look at doing it based on the parent parent div id. Each gallery-icon element has a gallery-item parent. Each of those is part of a gallery class which has a specific ID. For example

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

So you would want to assign that unique gallery id as the pretty photo rel value. ie;

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

I would do it by finding all gallery-icons and using closest() to find the parent gallery id, like this;

Finding the id of a parent div using Jquery

I've not tested it or anything but something like this should get you going in the right direction;

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

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

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

            });