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

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  2. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  3. slimMenu
  4. Responsive Elements
  5. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  6. jquery-base-slider

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP