no-image

JavaScript

タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

simplelightboxはレスポンシブ対応でタッチフレンドリーなlightboxを実装できるjQueryプラグインです。スワイプジェスチャーで前後の画像を快適に切り替えていくことができます。パソコンからの閲覧だけでなくスマホなどでも快適に動作するのがいいですね。

simplelightbox

デモ

デモではいくつかのサムネイル画像が並べられており、いずれかの画像をクリックすると拡大画像が表示されます。左右の両端には矢印アイコンが設置されています。ここから前後の画像に切り替えることが可能です。モバイル版ではスワイプジェスチャーでサクサクと前後の画像へ切り替えられます。さらにキーボードもサポートされていることから、キーボードの左右矢印キーからでも画像の切り替えが可能です。

また、左上には画像の総数と現在表示されている画像の番号が記載されているので、現在どの位置にいるのかを把握しやすくなっています。

拡大画像を閉じる場合は右上にあるバツ印や画像の外側をクリックすると最初のサムネイル画像一覧ページに戻ります。

拡大時には背景に白っぽいオーバーレイがかかるので、画像にも集中しやすいのがいいですね。

オプションもかなり種類があり、先ほどのオーバーレイの有無やスピナーやナビの有無、それからキャプション、スワイプ、クローズ、アニメーションスピード、ループなどなど、多彩なカスタマイズが可能になっています。

オプションだけでなく、イベントやメソッドもいろいろ用意されているので、気になる人はぜひチェックしてみてください。というわけで、レスポンシブに対応したタッチフレンドリーなlightboxを実装できるjQueryプラグイン「simplelightbox」の紹介でした。

simplelightbox

関連記事

  1. SVG 3D Tag Cloud jQuery Plugin
  2. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  3. jQuery Text Fade Delay
  4. no-image
  5. no-image
  6. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP