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

WebページをPDFで保存【iOS 11】iPhoneのSafariでWebページをPDFで保存する方法前のページ

左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」次のページCanvi

関連記事

  1. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  2. Slinky.js

    JavaScript

    上下にスクロールでコンテンツが開閉するjQueryプラグイン「Slinky.js」

    なかなか面白かったのでご紹介します。上下にスクロールするとコンテンツが…

  3. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

  4. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  5. jquery.mark

    JavaScript

    キーワードをハイライトしてくれる「jquery.mark」

    jquery.markはキーワードをハイライトしてくれるjQueryプ…

  6. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP