javascript - prettyPhoto multiple galleries on one page - Stack Overflow

admin管理员组

文章数量:1278984

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:

/

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/

• javascript
• jquery
• wordpress
• lightbox
• prettyphoto

Share Improve this question Follow edited Jan 4, 2014 at 17:26 Petr Mensik 27.5k1717 gold badges9393 silver badges119119 bronze badges asked Dec 13, 2012 at 19:32 Alex GravesAlex Graves 5111 silver badge22 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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

            });     

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

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.

本文标签： javascriptprettyPhoto multiple galleries on one pageStack Overflow