no-image

JavaScript

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

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

simplelightbox

デモ

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

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

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

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

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

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

simplelightbox

no-imageシンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」前のページ

テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」次のページno-image

関連記事

  1. no-image

    JavaScript

    jQueryとCSS3を使った縦型アコーディオン「Accordion-menu」

    Accordion-menuは、jQueryとCSS3を使ったシンプル…

  2. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  3. Vague.js

    JavaScript

    要素をぼかすことができるjQueryプラグイン「Vague.js」

    要素をぼかすことができるjQueryプラグイン「Vague.js」が面…

  4. no-image
  5. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  6. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

最近の記事

  1. Aモーニングセット
  2. 白トリュフの塩パンやメロンパンなど
  3. 東京都現代美術館
  4. スーリア バターチキン
  5. そそそ 明太クリームそうめん

アーカイブ

PAGE TOP