BootStrap4+3用 CDN レスポンシブ対応lightbox

最近はBootstrap4+pugが制作環境になっています。
そこで、お手軽にレスポンシブのライトボックスが出来ないかと探したところ、以下のプラグインがとても使いやすかったです。
ブートストラップライトボックス – https://goo.gl/zkdhNh
CDNでインストールしました。
JSとCSSをインストールしましょう。
jsはjquery.jsの後に
cssはheaderの中に。
body終わり付近に以下を追加。pugです。

 

拡大したい画像とアイコンを用意しましょう。


data-title=””はなくても動くのですが、着けないと、閉じるボタンが表示されないので着けておきました。

data-footer=”説明文”で、フッターに説明文をつけることができます。

基本しか実装してませんが、たくさんのオプションがあります。
動画もOK。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください