[JS] 画像の拡大やシェア、タッチジェスチャーに対応したLightbox風「PhotoSwipe」

記事内にプロモーションを含む場合があります。

PhotoSwipe 01

PhotoSwipe」は、ページの画像をページ内にポップアップ表示させる、Lightbox風のJavaScript画像ギャラリー。

画像の表示方法がかなりよろしくて、拡大表示、キー操作、タッチジェスチャー、FacebookやTwitterへのシェアボタンなどが付いています。

拡大表示は、画像をフルサイズで見せたいときに有効ですし、タッチジェスチャーではスワイプでの画像送り以外に画像をつまんでの拡大・クローズに対応しているので、スマホユーザーには使いやすいでしょう。

導入方法は、PhotoSwipe Documentationの通りに一式をダウンロードしてアップロード。ファイルパスを変更して、cssやjsをヘッダーで読み込み。<body> 〜 </body>間にギャラリー用のタグを追記。

タグを追記する以外は、基本的にはその他のLightbox系と変わりません。

Source: PhotoSwipe