How to enable next / prev with prettyPhoto when links are inside <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 automated next / previous navigation, image links should be next to each other in the DOM. Is there an easy way to make it work with the above structure? I looked through the options, but did not see anything obvious.

Answer 1

All I did for this job was to change the rel attribute of the images, so this is:

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

Becomes as follows:

 <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> 

Having done this, I got the next / previous controls. I found details for this on the prettyPhoto homepage .

My Javascript was as follows:

 $(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 open 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> 

Answer 3

I fixed my problem without navigating prettyPhoto by simply adding [ppgal] in quotation marks

Like this:

 rel="prettyPhoto[pp_gal]"