C04-07 : prettyPhoto

準備

jQueryライブラリのため、jQueryとセットで読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="jquery-1.8.2.min.js"><\/script>')</script>
<link type="text/css" rel="stylesheet" href="prettyPhoto.css">
<script type="text/javascript" src="jquery.prettyPhoto.js"></script>

画像を開く

画像をページ上にオーバーレイ表示します。また、オプション機能を使ってグループ化することでスライドショーを作ることができます。

$(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto();
});

<a href="img/001.jpg" rel="prettyPhoto[group1]"><img src="img/001_t.jpg" height="100" width="100" alt=""></a>
<a href="img/002.jpg" rel="prettyPhoto[group1]"><img src="img/002_t.jpg" height="100" width="100" alt=""></a>
<a href="img/003.jpg" rel="prettyPhoto[group1]"><img src="img/003_t.jpg" height="100" width="100" alt=""></a>
<a href="img/004.jpg" rel="prettyPhoto[group1]"><img src="img/004_t.jpg" height="100" width="100" alt=""></a>
<a href="img/005.jpg" rel="prettyPhoto[group1]"><img src="img/005_t.jpg" height="100" width="100" alt=""></a>

HTMLを開く

Ajax、iframe、inlineの3つの方法でHTMLを読み込み、内容をオーバーレイ表示します。

HTMLの表示（Ajax）
HTMLの表示（iframe）
HTMLの表示（inline） 
$(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto();
});

<a rel="prettyPhoto[ajax]" href="ajax.html?ajax=true&width=600&height=350">HTMLの表示（Ajax）</a>

<a href="iframe.html?iframe=true&width=600&height=350" rel="prettyPhoto">HTMLの表示（iframe）</a>
<a href="#inline" rel="prettyPhoto">HTMLの表示（inline）</a>

同ドキュメント内の要素を移すため、読み込み元のスタイルシートが適用されます。幅・高さは自動的に調整されます。

Web制作の現場では１から機能を作ることは多くありません。Webアプリケーションの制作ともなると、独特な仕様やパフォーマンス向上のために特化したものを作成することはありますが、基本的には実装したい機能の仕様を満たすライブラリがないかを探して使います。
ときにはそのライブラリをカスタマイズして使うこともあるため、高機能かつシンプルでライセンスはMITかGPLのものを選びます。
１から作れる技術力も大事ですが、こうしたライブラリの知識も制作の幅を広げることができますし制作もスピーディに行えるため必須となります。

Youtubeを開く

Youtubeの動画URLをhrefに指定することで、Youtube動画をオーバーレイ表示することができます。

Youtubeの表示 
$(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto();
});

<a href="http://www.youtube.com/watch?v=6PGznR2a9xk" class="youtube">Youtubeの表示</a>

コールバックを受け取る

prettyPhotoを「開く」「スライドを切り替える」「閉じる」といったタイミングでコールバック関数を受け取ることができます。

callbacks 
$(function(){
	$("a[rel^='prettyPhoto[callbacks]']").prettyPhoto({
		changepicturecallback: function(){　alert('prettyPhotoを開く or スライドを切り替える');　},
		callback: function(){　alert('prettyPhotoが閉じられた');　}
	});
});

<a href="img/001.jpg" rel="prettyPhoto[callbacks]">callbacks</a>

オプション

プロパティ 初期値 説明
animation_speed "fast" アニメーションの速度を "fast" or "normal" or "slow" の中からか、ミリ秒単位で設定します。
slideshow 5000 スライドショーの待機時間をミリ秒単位で設定します。
autoplay_slideshow false trueの場合、スライドショーの自動スライド機能をONにします。
opacity 0.80 0～1の範囲でオーバーレイの不透明度を設定します。
show_title true trueの場合、img要素のalt属性に指定した内容を写真の左上にタイトルして表示します。
allow_resize true trueの場合、表示する画像がブラウザより大きい場合、自動で縮小します。
default_width 500 prettyPhotoのデフォルトの幅を設定します。
default_height 344 prettyPhotoのデフォルトの高さを設定します。
counter_separator_label / スライドの合計と現在地の間に入る内容を設定します。
theme pp_default prettyPhotoのテーマを "pp_default" or "light_rounded" or "dark_rounded" or "light_square" or "dark_square" or "facebook の中から選択します。
horizontal_padding 20 画像の両側に余白を設定します。
hideflash false trueの場合、prettyPhotoでFlashコンテンツを表示したときに同ドキュメント中のFlashコンテンツをすべて非表示にします。
wmode opaque prettyPhotoで開いたFlashコンテンツにwmode属性を設定します。
autoplay true trueの場合、prettyPhotoで開いた動画を自動的に再生します。
modal false trueの場合、prettyPhotoの閉じるボタンを押さないと閉じられなくなります。
deeplinking true trueの場合、URLにハッシュがつきます。
overlay_gallery true trueの場合、prettyPhotoの中にスライドギャラリーを表示します。
keyboard_shortcuts true trueの場合、キーボードの左右矢印キーでスライドの移動ができます。
changepicturecallback - prettyPhotoで画像を開いた・切り替えたタイミングでコールバックを受け取ります。 
$("a[rel^='prettyPhoto']").prettyPhoto({
	changepicturecallback: function(){　alert('open');　}
});
callback - prettyPhotoが閉じたタイミングでコールバックを受け取ります。 
$("a[rel^='prettyPhoto']").prettyPhoto({
	callback: function(){　alert('open');　}
});
ie6_fallback true IE6で使えない透過PNGなどを削除したデザインに変更します。