jQuery-LightBox

JavaScript

軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイルフレンドリーなLightboxを実装することができるjQueryプラグインです。分かりやすくて操作がしやすい左右矢印ボタンや閉じるボタンを備えています。複雑な機能もなく、シンプルイズベストなLightbox風イメージギャラリーを取り入れたい人は要チェックです。

jQuery-LightBox

デモ

デモではサムネイル画像が全部で5枚並べられていて、各画像をクリックすると画像が拡大表示されます。背景にはオーバーレイがかかり画像を集中して楽しむことが可能です。また、前後の画像を切り替えられる左右矢印ボタンと右上にはクローズボタンが設置されています。

複雑な機能を求めてなく、必要最低限のシンプルな機能性を有したLightboxを実装したいと思っている人にはピッタリのjQueryプラグインといえますね。

また、jQuery-LightBoxはレスポンシブにも対応しているのでスマホやタブレットなどさまざまなデバイスからでも快適に閲覧することができます。試しにiPhoneでデモページを開いてみましたが、ちゃんと最適化されていました。スワイプなどには対応していませんが、左右矢印ボタンがスマホからだとわりと大きめに感じるので操作性も問題ないと感じました。

実装方法に関しても、特に難しい設定もなくすんなり実装できるのがいいですね。ちなみに、冒頭で紹介したデモページには実際のコードの記述例も記載されています。

jQuery-LightBox

関連記事

  1. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  2. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  3. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

  4. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  5. Accessible Mega Menu
  6. intence

    JavaScript

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

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

最近の記事

  1. Anker PowerCore Lite 20000
  2. ネクスタイム
  3. フォールドオーバーポーチ
  4. 田沢湖
  5. ハクバ シリコンクロス

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP