[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe

スワイプでの操作が非常に快適な画像ギャラリーのスクリプトを紹介します。

スマホやタブレットだけでなく、デスクトップでのクリックやドラッグ、そしてキーボード操作にも対応している優れ物です。

PhotoSwipe
PhotoSwipe -GitHub

• PhotoSwipeのデモ
• PhotoSwipeの使い方

PhotoSwipeのデモ

デモはタブレットやスマホで、もちろんデスクトップでも楽しめます。

デモページ

デスクトップの場合は、クリックやドラッグ（水平・垂直）で操作できます。
キーボード操作にも対応しています。

デモページ：画像を拡大

スマホ・タブレットの方が動作が快適です。

デモページ：スマホで表示

タップで画像拡大、ダブルタップで拡大・縮小、水平スワイプで画像のスライド、垂直スワイプでギャラリーの終了、ピンチアウトで拡大、ピンチインで終了、となっています。
表示されているアイコンでも操作ができます。

サポートするタッチジェスチャーの一覧

PhotoSwipeの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (optional) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script> 

Step 2: HTML

figure要素で、サムネイル画像・拡大画像・キャプションのテキストを配置します。

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">

    <figure itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>

    <figure itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>


</div>

ギャラリー用の枠はHTMLで作成します。
詳しい実装方法は、下記ページのドキュメントをご覧ください。

Documentation -PhotoSwipe