PhotoSwipeで画像を表示する(基本)
PC・モバイルの両環境で、簡単に複数画像を表示可能なプラグインとして、PhotoSwipeを試してみた。ピンチやズーム操作が可能なだけでなく、スワイプ操作で前後の画像に遷移させることができる。(注)PhotoSwipeはjQueryのプラグインではない。
紹介記事：
自作アプリに組み込む際は、以下の手順を踏む必要がある。
- CSSファイルとJSファイルを読み込む
通常ののプラグインと同様、<link>タグや<script>タグで、プラグイン本体を読み込む。 - プラグインの一部コード(JavaScript)を｢手動｣で組み込む
提供されるJavaScriptコード(初期化関数の定義)を、HTMLやjsファイルなどにコピー＆ペーストする。今回はこのプラグイン提供コードを別ファイルとして作成した。 - プラグインの枠部分(HTML)も手動で組み込む
表示したいHTMLファイルにコピー＆ペーストする。今回は、本体の最後(＝ </body> の手前)にそのまま貼り付けた。(当然ながら、プラグインを起動するまでは、画面の見た目に影響しない。) - 元画像の見た目(サイズや並べ方)は自分でCSSを用意して調整する
プラグイン側は特に何もしないので、自分で調整する。
ファイルを分けている理由は、「ユーザが変更を加えたいとき」を考えてのことらしい。
基本的な使い方は以下のとおり。
- 画像を配置する
<div class="my-gallery"> <!-- 表示対象。クラス名は任意。 --> </div>
- プラグインを初期化する
上記の表示画像に付けたクラス名で以下の関数をコール。これ以外に、初期化オプション群をオブジェクトで与える関数もある。initPhotoSwipeFromDOM(".my-gallery");
表示対象を、画像1枚ごとに <figure>…</figure> で囲んで、以下のように記述する。
<figure>
<a href="{画像のURL}" data-size="{プラグインで表示する画像サイズ}">
<img src="{サムネイル画像のURL}" alt="{画像下に表示されるキャプション}" />
</a>
<figcaption>サムネイル下に表示されるメッセージ</figcaption>
</figure>