Question

i have a tricky problem I’m not able to solve. I’m using jquery.prettyphoto.js to display a set of images in a “lightbox”.

The first photo in that set is the “AvatarPhoto” and it’s rendered twice on the page. First on top, standing alone and also in a slider with all the other photos. Both are linking to the same picture in the same gallery.

Take a look at this: http://jsfiddle.net/wtZLY/

okay I solved that based on halfer´s answer, simply gave the first link of “allFotos” an id :

    $('#profilePicture').click(function() {
    $('#foto_0').click();
    });

but I wonder if I can´t use the prettyphoto API

$.prettyPhoto.open()

but looks like I there is no possibility to simply open the prettyPhoto[gallery1] down on the page. I would have to pass all images and titles as an Array and in my case this would be heavy repeating myself.

Answer 1

Your selector works on this attribute:

data-rel="prettyPhoto[gallery1]"

If it is not your intention to add the first picture to the gallery, remove the data-rel attribute from that image, and it will work.

Personally, I’d use standard tags/ids/classes for this. In your JS you could alternatively use this:

$("#allpictures a").prettyPhoto();

That will select all links that are a descendent of the allpictures element.

Addendum: if you want to open the gallery using your profile picture, then I suggest you use the above for the gallery items, but have a special click handler for the profile. Set up an id for each image, such that the profile picture can be used to determine the gallery copy. For example you could use profile_123 and gallery_123.

This will permit you to add a click handler on the profile image, derive the id of the gallery copy, and to raise the click event on that element.