シリーズ『BootstrapだけでLightboxギャラリー実装』~

BootstrapでLightbox実装する際は、別途プラグイン導入の必要無し

BootstrapでLightbox実装する際は、別途プラグイン導入の必要無し



Bootstrapライブラリは便利だけど、CSSファイルが200kbくらいあって結構重いです。

なので、サイトに様々な効果を加えるために別途プラグインを導入して、JSやCSSを増やしていくのは避けたいところ。

そして件のlightbox。
これはおなじみのギャラリー機能ですが、Bootstrapにはそのものズバリなコンポーネントはありませんが、

  • カルーセル :コンテンツスライダー
  • モーダル :ポップアップウィンドウ

を使えば、行けるのではないかと。

Carousel
参考
Carousel

カルーセルのような要素の画像やスライドを循環させるためのスライドショーコンポーネント。

Carousel


Modal
参考
Modal

BootstrapのJavaScriptモーダルプラグインを使用してライトボックス、ユーザー通知、または完全カスタムコンテンツ用のダイアログをサイトに追加します。

Modal

そこでコードを書く前に、もしかしたら誰かすでに実装されている方もいるのではないかな、と探してみたところ・・・

あった!

純粋なBootstrapのみで実装されており、追加のJSやCSSの記述も不要です。

Bootstrap 4 フロントエンド開発の教科書

Bootstrap 4 フロントエンド開発の教科書

宮本 麻矢, 朝平 文彦
3,542円(11/12 19:38時点)
発売日: 2018/08/25
Amazonの情報を掲載しています
今日はここまで
BootstrapでLightbox実装する際は、別途プラグイン導入の必要無し

BootstrapでLightbox実装する際は、別途プラグイン導入の必要無し


開発

Bootstrapライブラリは便利だけど、CSSファイルが200kbくらいあって結構重いです。 なので、サイトに様々な効果を加えるために別途プラグインを導入して、JSやCSSを増やしていくのは避けたいところ。 そして件の…


関連する記事



シリーズ『BootstrapだけでLightboxギャラリー実装』



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す