プラカンブログSTAFF BLOG

2017.11.29

【jQueryプラグイン】prettyPhotoでエンターキーを押した時にウィンドウを閉じるようにする方法

jsについては勉強不足でまだ見よう見まねで試行錯誤しているOHMATAです。

Lightbox系のjQueryプラグインprettyPhotoを使っているのですが、エンターキーを押した時の挙動に違和感があったのでエンターキーでウィンドウを閉じるようにしました。
今回はその方法をご紹介します。
※バージョンにより記述方法が少し違うみたいなので、そちらについては後ほどご紹介します。

prettyPhotoは画像だけでなく動画の拡大表示ができ、ページ内の画像であればグループでまとめてスライドショーにすることもできます。
元々はエスケープキーで閉じるようになっているので、そこにエンターキーでも閉じる記述を追加します。
jquery.prettyPhoto.js内でエスケープキーのキーコードである「27」を検索。

case 27:settings.modal||e.prettyPhoto.close(),

このような記述が見つかると思いますので、エンターキーのキーコード13を追記して下記のように変更します。

case 27:settings.modal||e.prettyPhoto.close();
case 13:settings.modal||e.prettyPhoto.close(),

これでエンターキーでもウィンドウが閉じるようになりました。

他のバージョンについて

元々使っていたバージョン(3.1.4)では記述方法が少し違いましたので、こちらもご紹介します。
先程と同様でキーコードの「27」を検索します。

case 27:if(!settings.modal)
$.prettyPhoto.close();

このような記述が見つかりますので、同じく13を追加して下記のように変更します。

case 27:if(!settings.modal)
$.prettyPhoto.close();
case 13:if(!settings.modal)
$.prettyPhoto.close();

その他のキーでも閉じるようにできます。
キーコードについてはこちら(キーコード一覧 【JavaScript 動的サンプル】│CMAN)でご確認ください。

他にも次へ・前へなどのページ送りを矢印以外のキーに指定することもできるので、色々試してみても良いかもしれません。

この記事は1年以上前の記事で内容が古くなっている場合があります。

+dc (大)

この記事は、OHMATA が書きました。