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 に答える