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/

Shantishantung

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 +']');

            });     

Bircher

McNab your a lifesaver. It worked first time. Thank you you so much for the reply and help. – Shantishantung

Answer 2

I maybe came with easier solution, I am just going through all my gallery div in each function and then initializing the prettyPhoto in images inside them.

$(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});
    });
});

Birecree

Why downvote?It's simple, it's working and your HTML markup don't have to change from gallery to gallery (which is great because users can add or remove galleries on my web) – Birecree

Answer 3

All that needs to be done is to change the rel in the html where you add your gallery that looks something like this rel="prettyPhoto[pp_gal]"

in your first gallery you create inside your div change the rel="prettyPhoto[pp_gal]" to "prettyPhoto[gallery1]" (for example)

and the next to "prettyPhoto[gallery2]" and so on.

Realgar