Lightbox

JavaScript

jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

LightboxはjQueryに依存することなくシンプルなライトボックス機能を実装することができます。さまざまなブラウザをサポートしているほか、オプションもそれなりに揃っているところに使い勝手のよさを感じます。

Lightbox

デモ

デモでは各サムネイルをクリックすると拡大して表示されます。左右両端には前後移動できる矢印が設置されているほか、右上には拡大表示を閉じるバツ印も設置されています。

矢印をクリックすると、前後のアイテムにスライドで切り替えることが可能です。シンプルな分、動作もサクサクで操作性も良好ですね。

また、オプションもいろいろ用意されており、captions、captionsSelector、captionAttribute、nav、navText、close、closeText、counter、keyboard、zoom、zoomText、docClose、swipeClose、scrollといった項目のセッティンができるようになっています。

キャプション、ナビゲーション、クローズアイコン、キーボード、ズームなど、いろんな設定ができるので、カスタマイズして使いたい人にもうれしいですね。

サポートしているブラウザは、IE 10+、Chrome、Firefox、Opera、Safariとのこと。

というわけで、jQueryに依存することなくシンプルながらもカスタマイズ性にも優れたライトボックス機能を実装したい人は、ぜひ「Lightbox」をチェックしてみてはいかがでしょうか?

Lightbox

関連記事

  1. no-image

    JavaScript

    Bootstrap 4を使ったステッパープラグイン「bs-stepper」

    bs-stepperはBootstrap 4を使ったステッパーを実装で…

  2. jQuery Navobile
  3. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  4. jQuery Brazzers Carousel Plugin
  5. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  6. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP