ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

jQuery「prettyPhoto」でおしゃれに画像を拡大表示する使い方【lightbox系】

      2016/04/05

 - javascript

lightbox系のプラグイン、jQueryで利用するJavaScriptライブラリ「prettyPhoto」の使い方、設定のまとめ。
prettyPhotoは画像拡大表示のほかに、動画の拡大表示にも対応しています。
Youtube、Quicktime、FLASH、VIDEOファイルなどをおしゃれに拡大表示することができます。
ページ内の画像をグループ化することで自動再生スライドショーも可能。

サンプルデモ

必要なファイルは以下URLのダウンロードより
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

prettyPhotoの設定方法

jQueryとprettyPhotoよりダウンロードしたprettyPhoto.jsとprettyPhoto.cssをヘッダで読み込む。

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

ヘッダscript内で以下のコード記述

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

拡大させたい画像のimgタグにaタグを追記し、拡大用画像を指定します。
rel属性に「prettyPhoto」と指定します。

<a href="拡大用画像のURLを指定" rel="prettyPhoto" title="下部キャプション"><img src="サムネイル画像のURLを指定" alt="上部キャプション" width="481" height="319" /></a>

ギャラリーとして複数画像をグループ化させる場合はprettyPhoto[gallery1]と指定。gallery1の箇所は任意に指定。自動スライドショー表示させることができます。

<a href="拡大用画像1のURLを指定" rel="prettyPhoto[gallery1]" title="下部キャプション"><img src="サムネイル画像1のURLを指定" alt="上部キャプション" width="481" height="319" /></a>
<a href="拡大用画像2のURLを指定" rel="prettyPhoto[gallery1]" title="下部キャプション"><img src="サムネイル画像2のURLを指定" alt="上部キャプション" width="481" height="319" /></a>

aタグのtitle属性に画像のキャプションを指定すると拡大表示時に画像下部分に表示されます。
imgタグのalt属性を記述すると拡大後の画像上部分に表示されます。

以上で設定完了です。

prettyPhotoのカスタマイズ(ソーシャルボタンの非表示)

上記デフォルト設定のままでは、ツイッター、facebookのソーシャルボタンがデフォルトで表示されています。
表示させたくない場合はjquery.prettyPhoto.jsに修正が必要になります。(v3.1.4時点)

jquery.prettyPhoto.jsの34行目あたりの以下のコードを削除します。

<div>{pp_social}</div> 

prettyPhotoのカスタマイズ(ハッシュタグを消す)

デフォルト設定ではprettyPhotoを設定した画像をクリックした時にURLに「#prettyPhoto」が付与されます。
これを表示させたくない場合もjquery.prettyPhoto.jsに修正が必要になります。

jquery.prettyPhoto.jsのおわりの方、82行目あたり、以下のコード部分をコメントアウトします。

function setHashtag(){if(typeof theRel=='undefined')return;
/*location.hash=theRel+'/'+rel_index+'/';*/
};
function clearHashtag(){
/*if(location.href.indexOf('#prettyPhoto')!==-1)location.hash="prettyPhoto";*/
}

prettyPhotoカスタマイズ サンプルデモ

14人の方が、「この記事が参考になった」と評価しています。