Как включить next/prev с prettyPhoto, когда ссылки находятся внутри

У меня есть галерея со следующей разметкой:

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

насколько я могу судить, для автоматической следующей/предыдущей навигации ссылки на изображения должны быть рядом друг с другом в DOM. Есть ли простой способ заставить его работать с вышеуказанной структурой? Я просмотрел варианты, но не увидел ничего очевидного.

7
jquery prettyphoto

3 ответов

все, что я сделал, чтобы получить эту работу, чтобы изменить rel атрибут изображений, так что это:

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

становится этот:

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

это дало мне следующие / предыдущие элементы управления. Я нашел детали для этого на prettyPhoto Домашняя страница.

мой Javascript был таким:

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

по словам документация вы можете просто использовать публичный API.

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

например, попробуйте добавить что-то подобное в свою разметку:

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

я исправил свою проблему отсутствия навигации по prettyPhoto, просто добавив [ppgal] в кавычки

такой:

rel="prettyPhoto[pp_gal]"
1