How to enable next/prev with prettyPhoto when links are within <li>

Question

I have a gallery with the following markup:

<ul>
<li>
    <figure>
        <a href="myimg1.jpg" rel="prettyPhoto"><img src="thumb1.jpg" /></a>
        <figcaption>
        some stuff here
        </figcaption>
    </figure>
</li>
<li>
    <figure>
        <a href="myimg2.jpg" rel="prettyPhoto"><img src="thumb2.jpg" /></a>
        <figcaption>
        some stuff here
        </figcaption>
    </figure>
</li>
</ul>

As far as I can tell, for the automated next/previous navigation to work, the image links need to be beside each other in the DOM. Is there any easy way to get it to work with the above structure? I looked over the options but couldn't see anything obvious.

Answer 1

All I did to get this working was to modify the rel attribute of the images, so this:

<a href="myimg1.jpg" rel="prettyPhoto"><img src="thumb1.jpg" /></a>
<a href="myimg2.jpg" rel="prettyPhoto"><img src="thumb2.jpg" /></a>

Becomes this:

<a href="myimg1.jpg" rel="prettyPhoto[gallery_name]"><img src="thumb1.jpg" /></a>
<a href="myimg2.jpg" rel="prettyPhoto[gallery_name]"><img src="thumb2.jpg" /></a>

Doing so got me the next/previous controls. I found the details for this on the prettyPhoto home page.

My Javascript was this:

$(document).ready(function () {
    $("a[rel^='prettyPhoto']").prettyPhoto({
        theme: 'facebook',
        slideshow: 5000,
        autoplay_slideshow: false
    });
});

Answer 2

According to the documentation you can simply use the public API.

jQuery.prettyPhoto.changePage('next');
jQuery.prettyPhoto.changePage('previous');

For example try adding something like this to your markup:

<div id="prettyphoto-controls">
  <span onclick="jQuery.prettyPhoto.changePage('next');">&lt; Previous</span> |
  <span onclick="jQuery.prettyPhoto.changePage('next');">Next &gt;</span>
</div>