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. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  2. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

  3. no-image
  4. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  5. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  6. ajSlider

    JavaScript

    シンプルでさりげないアニメーションが素敵なスライドショー実装「ajSlider」

    ajSliderはシンプルなスライドショーを実装することができるjQu…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP