JQuery prettyPhoto - open gallery from a link that's not an image

Question

I'm using the JQuery prettyPhoto lightbox clone, and it works great, but I have one small issue.

All images have the following format:

<a href='imageURL' rel='prettyPhoto[gallery1]'><img src='imageURL' style='height:100px;' title='photoname' /></a>

I have 4 images showing and another 10 hidden using a <div> with style='display:none;'. Clicking any of the 4 images opens the gallery, showing all 14 photos. That's fine.

But I also need to have a link saying 'view all 14 photos' that, when clicked, opens the gallery. Now, if I don't give <a href='imageURL'> to the text link, it doesn't work. But if I link it to, for example, the first image, then that image is shown twice in the gallery. How can I avoid that?

I thought about linking the text link to one of the hidden images instead, but that's not a solution, since the 4 visible images are randomly chosen using PHP.

Answer 1

Change your link to:

<a id="startPrettyPhoto">View all photos</a>

And add this to the document ready where you set up prettyPhoto

$("#startPrettyPhoto").click(function() {
   $("a[rel^='prettyPhoto']:first").click()
});