画像もYouTubeもカッコよく表示出来るjQuery prettyPhotoがいい感じ

複数のの画像や動画を分かりやすくかつカッコよく見せるjQueryのプラグインは色々あります。

特にlightbox系のプラグインは人気が高く種類も豊富です。

ところが、先日必要があってYouTubeの表示にも対応しているプラグインを探していて気づいたのですが、YouTube表示可能なlightbox系のプラグインは意外と少ないのですね。


そんな中見つけたprettyPhotoが非常にイイ感じなので紹介したいと思います。

prettyPhoto



使い方はいたって簡単です。


上記のサイトからファイルを一式ダウンロードしてインクルードします。

<link rel="stylesheet" href="prettyPhoto.css" type="text/css" />
<script type="text/javascript" src="jquery.prettyPhoto">

表示したい形式によってHTMLのマークアップの仕方が若干異なります。

単一画像

<a href="image01.png" title="説明" class="prettyPhoto">
  <img src="thumbnail01.png" alt="タイトル" />
</a>

複数画像 (前/次のナビゲーション表示)

<a href="image01.png" title="説明" rel="prettyPhoto[pp_gal] class="prettyPhoto">
  <img src="thumbnail01.png" alt="タイトル" />
</a>
<a href="image02.png" title="説明" rel="prettyPhoto[pp_gal]" class="prettyPhoto">
  <img src="thumbnail02.png" alt="タイトル" />
</a>

YouTube

<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" class="prettyPhoto">YouTube</a>

あとはプラグインをセットすれば完了です。

<script type="text/javascript">
$(document).reach(function () {
  $('a.prettyPhoto').prettyPhoto();
});
</script>

指定できるオプションはこちら (一部)

animationSpeed
アニメーションのスピード fast/slow/normal
デフォルト: normal

opacity
透明度 0から1を指定
デフォルト: 0.80

showTitle
タイトルを表示するか boolean
デフォルト: true

allowresize
リサイズ可能か boolean
デフォルト: true

default_width
デフォルトの幅
デフォルト: 500

default_height
デフォルトの高さ
デフォルト: 344

theme
テーマ light_rounded / dark_rounded / light_square / dark_square / facebookから指定
デフォルト: light_rounded

hideflash
flashオブジェクトを隠すか boolean
デフォルト: false

autoplay
ビデオを自動再生するか boolean
デフォルト: true

modal
closeボタンだけがprettyPhotoを閉じることが可能か boolean
デフォルト false

changepicturecallback
アイテムが表示/変化した時に実行されるコールバック関数

callback
prettyPhotoを閉じた時に実行されるコールバック関数




lightbox系のプラグインはこちらに色々紹介されているので、合わせてどうぞ

Most Useful Modal Window Plugins for jQuery