jQueryで利用する角丸LightBox『prettyPhoto』

Check このエントリーをはてなブックマークに追加

配布元：prettyPhoto
ライセンス：Commons Attribution 2.5

prettyPhotoは角丸でLightBox風の画像拡大を再現できるJavaScriptライブラリです。

prettyPhotoの利用方法

jQueryよりjQuery本体をダウンロードし、prettyPhotoよりダウンロードしたprettyPhoto.jsとprettyPhoto.cssと共に本体に読み込みます。

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

画像を拡大する

サムネイル画像をa要素で包みそのhref属性に拡大後の画像のURLを記述し、a要素のrel属性にprettyPhotoという値を設定します。

a要素のtitle属性に説明を記述することにより拡大後の画像の下に、img要素のalt属性に説明を記述することにより拡大後の画像の上に説明を付けることが可能です。

<a href="images/image-1.jpg" rel="prettyPhoto" title="a要素のtitle属性"><img src="images/image-1-s.jpg" alt="img要素のalt属性" /></a>

サンプル

複数画像のギャラリー

a要素のrel属性のprettyPhotoの後ろにという風にグループ名を付けることにより、複数画像をグループ化してギャラリーにすることが可能です。

<a href="images/image-1.jpg" rel="prettyPhoto" title="a要素のtitle属性"><img src="images/image-1-s.jpg" alt="img要素のalt属性" /></a>
<a href="images/image-2.jpg" rel="prettyPhoto" title="a要素のtitle属性"><img src="images/image-2-s.jpg" alt="img要素のalt属性" /></a>
<a href="images/image-3.jpg" rel="prettyPhoto" title="a要素のtitle属性"><img src="images/image-3-s.jpg" alt="img要素のalt属性" /></a>

サンプル

スポンサードリンク

コメント

カテゴリー：jQuery ライブラリ 拡大 画像