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. Multi-Step-Form-Js
  2. Protip

    JavaScript

    カスタマイズ性抜群のツールチップを実装できる「Protip」

    Protipはカスタマイズ性が抜群のツールチップを実装することができる…

  3. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  4. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  5. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP