PrettyPhotoをプリティーにするためのメモ

lightboxのようにヌルッと画像を表示してくれるprettyphotoを動かしたくいろいろしたけどうまくいかなかったのでメモ。
数年前に自分で設置してたはずなんだけどすっかり忘れた。反省

まずはふつうに設置

PrettyPhotoダウンロードはこちら
PrettyPhotoの使い方はこちら

ヘッダーに以下挿入

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

jquery.jsはjquery1.x.x.jsみたいになってるのを名前の変更をしただけ。

それからbody終了間際に挿入

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

あとは

<a href="画像パス" rel="prettyPhoto" >

みたいに rel="prettyPhoto"をいれてやる。

とうまくヌルッと画像を表示してくれる予定だった。

うまくいかない

動きました！どうやらPrettyPhotoはPrettyPhoto.csのgallery clearfixクラスを
読み込んで、動いているみたいです。
PrettyPhotoがプリティーじゃない

gallery clearfixが必要らしいので、divで囲ってみた

<div class="gallery clearfix"><a href="画像パス" rel="prettyPhoto" ></div>

うまくいきました。
あとアイコンが表示されなかったり角丸にならない場合はimageフォルダとcssフォルダの位置を見直したほうがいいようです。