[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe
Post on:2014年12月16日
sponsorsr
スワイプでの操作が非常に快適な画像ギャラリーのスクリプトを紹介します。
スマホやタブレットだけでなく、デスクトップでのクリックやドラッグ、そしてキーボード操作にも対応している優れ物です。
PhotoSwipeのデモ
デモはタブレットやスマホで、もちろんデスクトップでも楽しめます。
デスクトップの場合は、クリックやドラッグ（水平・垂直）で操作できます。
キーボード操作にも対応しています。
デモページ：画像を拡大
スマホ・タブレットの方が動作が快適です。
デモページ：スマホで表示
タップで画像拡大、ダブルタップで拡大・縮小、水平スワイプで画像のスライド、垂直スワイプでギャラリーの終了、ピンチアウトで拡大、ピンチインで終了、となっています。
表示されているアイコンでも操作ができます。
サポートするタッチジェスチャーの一覧
PhotoSwipeの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
[html]
[/html]
Step 2: HTML
figure要素で、サムネイル画像・拡大画像・キャプションのテキストを配置します。
[html]
[/html]
ギャラリー用の枠はHTMLで作成します。
詳しい実装方法は、下記ページのドキュメントをご覧ください。
sponsors
