jQueryのlightboxプラグイン「prettyPhoto」のリンクに毎回「rel="prettyPhoto"」と書きたくない場合の解決方法


  • 公開:
  • 更新:
  • 編集:
概要 ▶ jQueryで動作するLightboxプログラムのprettyPhotoで画像拡大のリンクを作る時に楽をするためのコードを紹介します。

このブログは画像拡大表示の動作(lightbox)には prettyPhoto というjQueryのプログラムを使用しています。

複数の画像をグループとして表示したり、YouTubeやvimeoの動画を表示することができたりと高機能のlightboxプログラムです。(下の画像もPCで見た場合、クリックするとprettyPhotoのlightboxで表示されます)

20140428-prettyPhotoカスタマイズ-01

画像出典:jQuery lightbox(No Margin For Errors)


このprettyPhotoですが、トップページのサンプルのページに以下の様に書いてあります。

  1. Create a link (<a href="#">).
  2. Add the rel attribute "prettyPhoto" to it (rel="prettyPhoto").
  3. 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"」と書くのが面倒な方は、ぜひこのワザを使ってみてくださいね。


それでは。

カテゴリー:

このページをぜひシェアしてください