jQuery-LightBox

JavaScript

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

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

jQuery-LightBox

デモ

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

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

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

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

jQuery-LightBox

関連記事

  1. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  2. JavaScript

    画像にマウスオーバーするとズームして綺麗にエフェクトがかかるjQueryプラグイン「Swish」

    画像にマウスオーバーをするとズームして綺麗なオーバーレイのエフェクトが…

  3. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  4. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  5. JavaScript

    リストなど複数の要素をランダムにフェードで表示していくjQueryプラグイン「champagne.j…

    どこかで使う機会がありそうな感じのjQueryプラグイン「champa…

  6. no-image

    JavaScript

    チェックボックスをアニメーショントグルにする「jquery-simpletoggler」

    jquery-simpletogglerは、デフォルトのチェックボック…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP