PhotoSwipeプラグイン
jQuery用プラグイン “PhotoSwipe“ を、jQuery Mobileに適用したサンプルを試してみました。
これは、jQueryを使ってタッチデバイス上でスタイリッシュなイメージギャラリーを作るためのプラグインです。jQuery Mobileに特化したものではないですが、親和性は高いはずなので、組み合わせてみます。
PhotoSwipeの基本的な機能は、アンカーで参照した先にある複数の画像を、インターフェースのついたスライドとして見せてくれるものです。今回は提供されているサンプルを踏襲して、3×3のサムネイル画面をつくり、サムネイルがクリックされるとスライドショーが開始されるようにしたいと思います。ただし、サンプルにはjQuery Mobile的にまずい点があるので、その辺の修正コードも含むようにしています。
さておき、簡単な実装方法とデモを用意してみました。
デモ
簡易的なデモページを、下に用意しました。
最初のサムネイル画面は、特にPhotoSwipeとは関係ありません。リストにアンカー付きの画像を並べ、それらをスタイルシートで制御しているだけです。ただ、これもレスポンシブ・レイアウトを用いた画像サイズによらない簡単なテクニックを使っていますので、興味のある方はヘッド要素内のスタイル定義を見てみてください。レスポンシブ・レイアウトについては、こちらから。
任意のサムネイルをクリックすると、PhotoSwipeが発動します。前後の画像へ切り替え、自動再生、プレビューモードの終了、ホイールやスワイプによる画像切り替えなどが出来ます。スマートフォンなど非力な端末上でも快適に動作します。
実装方法
このプラグインは画像なども含むため、まずは 公式ページ から最新版のファイル一式をダウンロードします。そして解凍し、適当な場所に配置してください。
次に、head要素内でプラグイン用のCSSとJS、それにライブラリとなるklassを取り込みます。
<link rel="stylesheet" href="/doc/js/jqm-plugins/photoswipe/photoswipe.css" />
<script type="text/javascript" src="/doc/js/jqm-plugins/photoswipe/lib/klass.min.js"></script>
<script type="text/javascript" src="/doc/js/jqm-plugins/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>
HTMLには、サムネイル画像と実画像へのリンクを並べます。サムネイルのスタイルについては、適当に。
<ul class="gallery">
<li><a href="kamui001.jpg" data-ajax="false"><img src="t_kamui001.jpg" alt="Kamui 001" /></a></li>
<li><a href="kamui002.jpg" data-ajax="false"><img src="t_kamui002.jpg" alt="Kamui 002" /></a></li>
<li><a href="kamui003.jpg" data-ajax="false"><img src="t_kamui003.jpg" alt="Kamui 003" /></a></li>
<li><a href="kamui004.jpg" data-ajax="false"><img src="t_kamui004.jpg" alt="Kamui 004" /></a></li>
<li><a href="kamui005.jpg" data-ajax="false"><img src="t_kamui005.jpg" alt="Kamui 005" /></a></li>
<li><a href="kamui006.jpg" data-ajax="false"><img src="t_kamui006.jpg" alt="Kamui 006" /></a></li>
<li><a href="kamui007.jpg" data-ajax="false"><img src="t_kamui007.jpg" alt="Kamui 007" /></a></li>
<li><a href="kamui008.jpg" data-ajax="false"><img src="t_kamui008.jpg" alt="Kamui 008" /></a></li>
<li><a href="kamui009.jpg" data-ajax="false"><img src="t_kamui009.jpg" alt="Kamui 009" /></a></li>
</ul>
この時、アンカーには data-ajax=“false” を指定するのを忘れないようにしてください。これが無いと、リンクをjQuery Mobileのフレームワークが引き受けてしまい、PhotoSwipeがハンドルできません。PhotoSwipeの公式ページにはここに rel=“external” を指定するよう指示しています。しかし、この指定は外部サイトへのリンクを意味するものです。結果的に「Ajaxによるページ遷移を行わせない」という意味では同じことですが、セマンティックな観点から data-ajax による指定を用いるのが正しいでしょう(実際にリンク先がFlickrなどの外部サイトである場合などは、external指定でも構わないかもしれませんが)。
次に、プラグインの呼び出しを行うコードを記述します。後述しますが、これはhead要素内の jQuery CoreとPhotoSwipeプラグインのJSを読み込んだ後、jQuery Mobileを取り込む前 に記述してください。
<script type="text/javascript">
(function(window, $, PhotoSwipe){
$(document).bind('mobileinit', function(){
$('#pg-gallery')
.live('pageinit', function(e){
var $cp = $(e.target);
var opt = {},
photoSwipeInstance = $('ul.gallery a', e.target).photoSwipe(opt, $cp.attr('id'));
return true;
})
.live('pageremove', function(e){
var $cp = $(e.target);
var photoSwipeInstance = PhotoSwipe.getInstance($cp.attr('id'));
if(typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null){
PhotoSwipe.detatch(photoSwipeIstance);
}
return true;
});
});
}(window, jQuery, window.Code.PhotoSwipe));
</script>
公式のサンプルでは、$(document).ready()を使って処理をバインドしています。しかし、これは1つ前にリンクページが存在している複数ページテンプレートだから正常に動作する形であって、jQuery Mobileの典型的なパターンからは外れたスタイルです。この辺のことは 日本語リファレンスにも記述してある ので、参考にしてください。
処理はプラグインの呼び出しとしては少し長くなっていますが、難しいことはしていません。ページが初期化された際にプラグインを適用し、ページが削除された際にはメモリを解放するようにしています。これも元のサンプルは pageshow と pagehide を使っていますが、キャッシュされている場合などに処理を無駄に繰り返すことになってしまうので、イベントの場所を pageinit と pageremove に変えています。
基本的に、やるべきことはこれだけです。
jQuery Mobileと組み合わせずとも、単体で実績のあるプラグインですので、動作も安定しています。こうしたコンテンツを作る需要は高いと思いますので、積極的に活用できれば。