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.

Kassab

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

Jacquelinejacquelyn

Thanks, not sure how i missed it. – Kassab

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>

Juliannajulianne

Given the problem posed in the question, the changePage method probably won't do anything as prettyPhoto only appears to be picking up the first image if we use the given HTML. – Jacquelinejacquelyn

Hm after reading the question again I see what you mean. Your answer is correct. – Juliannajulianne

Answer 3

I fixed my issue of no navigation on prettyPhoto by simply adding [ppgal] within the quotation marks

Like this:

rel="prettyPhoto[pp_gal]"

Potential