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

jquery.autoscroll-text-tapeテキストを自動スクロールできる「jquery.autoscroll-text-tape」前のページ

軽量でシンプルで依存性のないカルーセルを実装できる「Siema」次のページSiema

関連記事

  1. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  2. Basic Metro Dynamic jQuery Tab Menu
  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. Zoomify

    JavaScript

    画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」

    Zoomifyは、画像のズーム効果を備えたシンプルなライトボックスのた…

  5. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

  6. no-image

    JavaScript

    立体的なナビゲーションメニューを実装できる「Sidebar Menu Concept」

    Sidebar Menu Conceptは立体的なナビゲーションメニュ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP