no-image

JavaScript

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

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

simplelightbox

デモ

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

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

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

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

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

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

simplelightbox

関連記事

  1. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  2. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  3. Yet Another Ripple Plugin
  4. jQuery LED

    JavaScript

    LEDディスプレイのようなカウントダウン・タイマー・時計を実装できる「jQuery LED」

    jQuery LEDは、LEDディスプレイで表示されるようなカウントダ…

  5. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  6. Tikslus Carousel

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP