jQuery-LightBox

JavaScript

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

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

jQuery-LightBox

デモ

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

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

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

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

jQuery-LightBox

関連記事

  1. SuperEmbed.js

    JavaScript

    さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」

    SuperEmbed.jsは、さまざまな埋め込み型の動画をレスポンシブ…

  2. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  3. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  4. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでアニメーション動作中と停止中で処理を分ける:animatedと:not(:animat…

    jQueryでアニメーションが動作中の時だけ、またはアニメーションが停…

  6. jCalculator

    JavaScript

    jQueryプラグインで電卓を実装できる「jCalculator」

    jCalculatorというjQueryプラグインを使えば入力フィール…

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP