PhotoSwipe

JavaScript

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

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

[ads_center]

PhotoSwipe

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

PhotoSwipe

PhotoSwipey

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

iPhoneからアクセス

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

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

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

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

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

関連記事

  1. JavaScript

    jQueryで好きな要素を浮遊させることができるプラグイン「jqFloat」を使ってみた

    指定した要素をフワフワと浮遊させることができる面白いプラグインを使って…

  2. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  3. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  4. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  5. parallax-background.js
  6. intence

    JavaScript

    インタラクティブなナビゲーションスクロールバーのJSライブラリ「intence」

    intenceはスクロール中のエリアが分かるインタラクティブなナビゲー…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP