PhotoSwipe

JavaScript

タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応しているJavaScriptイメージギャラリーです。画像をズームしたりピンチインでクローズしたりと何かと使い勝手の良いUIを実装することができます。

[ads_center]

PhotoSwipe

デモやダウンロード、または使い方の詳細に関しては以下のサイトから確認することができます。

PhotoSwipe

PhotoSwipey

実際にiPhoneからアクセスしてみたところ、このようにレイアウトも最適化され動作もとてもスムーズでした。かなりいい感じのギャラリーです。

iPhoneからアクセス

デモではAll controlsとMinimalの2タイプから選ぶことができるようになっています。All controlsではキャプションやシェア、それにフルスクリーン機能もついています。Minimalにはキャプションなどの機能はついていません。

タッチジェスチャーの使い方では、主に下記の4つの機能を利用できるようになっています。

  • ピンチアウトで画像をズーム
  • ピンチインで画像をクローズ
  • 上下の垂直方向へのスワイプで画像をクローズ
  • 左右の水平方向へのスワイプで画像切り替え

機能的にスマホでここまでできるなら充分といったところではないでしょうか。

そんなわけで、色々と高性能なイメージギャラリーを実装することができるPhotoSwipeのご紹介でした。

関連記事

  1. no-image
  2. jQuery Accordion
  3. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  4. jQuery liMarquee
  5. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  6. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

最近の記事

  1. 久保田城
  2. ハードサイド CS80
  3. ACC-TRBX
  4. ピスタチオ クリスマス ツリー フラペチーノ

Instagram始めました

Facebookページ

PAGE TOP