no-image

JavaScript

スタイリッシュなLightboxギャラリーを実装できる「Bootstrap Lightbox」

Bootstrap Lightboxは、BootstrapによるスタイリッシュなLightboxギャラリーを実装することができるモーダルプラグインです。画像だけではなく、YouTube、Vimeo、Instagramなどのコンテンツもサポートします。

Bootstrap Lightbox

デモ

デモページには、Single ImageやImage Galleryをはじめ、Limit Image Size、Gallery of Videos、Mixed gallery、Programmatically call、Via data-remote、Force typeなどなど、多彩なサンプルが用意されています。

Single Imageではサムネイル画像をクリックすると単体で拡大画像が表示されます。上部のタイトルはdata-titleを、下部のテキストはdata-footerを利用することで好きなテキストを表示させることが可能です。

また、Image Galleryでは複数の画像をグループ化させています。こちらは、data-galleryという属性を利用することで実装できます。

拡大画像を表示させると、左下に左右の矢印アイコンが表示されているので、ここをクリックすると前後の画像に切り替えることが可能です。

それから、Lightboxを表示させた時の縦横最大サイズを指定することもできます。data-max-width、data-max-heightに数値を指定することで、拡大時の縦横最大サイズのセッティングが可能です。

オプションもいろいろ用意されていて、leftArrow、rightArrow、wrapping、width、height、maxWidth、maxHeight、alwaysShowClose、loadingMessage、showArrowsといった項目のセッティングができます。

Bootstrap Lightbox

関連記事

  1. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  2. SmartPhoto.js

    JavaScript

    レスポンシブなイメージビューアを実装できる「SmartPhoto.js」

    SmartPhoto.jsは、レスポンシブに対応したかっこいいイメージ…

  3. DD Scroll Boxes
  4. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  5. Jquery Line Progress Bar
  6. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP