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