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

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  2. Multi-Screen.js
  3. Footnoted

    JavaScript

    脚注(注釈)を入れたい時に役立つjQueryプラグイン「Footnoted」

    FootnotedというjQueryプラグインは文章の中に脚注(注釈)…

  4. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  5. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  6. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP