本ページはプロモーションが含まれている場合があります
このブログは画像拡大表示の動作（lightbox）には prettyPhoto というjQueryのプログラムを使用しています。
複数の画像をグループとして表示したり、YouTubeやvimeoの動画を表示することができたりと高機能のlightboxプログラムです。（下の画像もPCで見た場合、クリックするとprettyPhotoのlightboxで表示されます）
画像出典：jQuery lightbox（No Margin For Errors）
このprettyPhotoですが、トップページのサンプルのページに以下の様に書いてあります。
- Create a link (<a href="#">).
- Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
- Change the href of your link so it points to the full size image.
jQuery lightbox for images, videos, YouTube, iframes, ajaxStephane Caron ? No Margin For Errors
実際これはこれで問題ないのですが、毎回「<a href="画像のファイル名" rel="prettyPhoto">」と「rel="prettyPhoto"」をaタグに追加して書くのは面倒ではないですか？
私は面倒です。
また、このブログは最近デザインをリニューアルしましたが、過去の画像のリンクに「rel="prettyPhoto"」と加えるのは現実的に無理です。
なので、楽をしましょう。
●手順
読み込んでいるJavaScriptに以下のコードを追加しましょう。
jQuery(document).ready(function() { jQuery("a[href$='.png'],a[href$='.PNG'],a[href$='.jpg'],a[href$='.JPG'],a[href$='.gif'],a[href$='.GIF']").prettyPhoto({social_tools: false}); });
たったこれだけ。
aタグのhrefには拡大後の画像のアドレスが入っているわけですが、このhrefの内容の末尾が「.png」「.PNG」「.jpg」「.JPG」「.gif」「.GIF」の場合にprettyPhotoのスクリプトが動くように指定しています。
他に加えたい拡張子があれば、「,」で区切って追加していけばOKです。
あとは画像に拡大後の画像のアドレスをリンクするだけで勝手にprettyPhotoのlightboxプログラムが動作します。もう「rel="prettyPhoto"」は必要ありません。
毎回「rel="prettyPhoto"」と書くのが面倒な方は、ぜひこのワザを使ってみてくださいね。
それでは。