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. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  2. Add To Cart Interaction
  3. jfMagnify
  4. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  5. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  6. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP