概要 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"」と書くのが面倒な方は、ぜひこのワザを使ってみてくださいね。


それでは。


●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索