8

我有一个带有以下标记的画廊：

<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 中彼此并排。有没有简单的方法让它与上述结构一起工作？我查看了选项，但看不到任何明显的东西。

4

3 回答 3

12

我所做的只是修改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
    });
});
于 2013-02-14T09:20:22.443 回答
1

根据文档，您可以简单地使用公共 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>
于 2013-02-16T15:47:15.523 回答
1

我通过在引号内简单地添加 [ppgal] 解决了我在 prettyPhoto 上没有导航的问题

像这样：

rel="prettyPhoto[pp_gal]"
于 2014-10-21T05:10:59.610 回答