Blog

【Bootstrap4】【Lightbox 2】を使ったスライドショー

こんにちは!WEB担当のEです。

前回に引き続きWixで作成したサンプルページをhtml、cssなどを使用し置き換える作業のお話です。

今回は、Bootstrap4(carousel)とLightbox 2を使用したスライドショーの作成についてです。

 

まず、サンプルページを確認して頂くとわかるようにページ真ん中部分に

3枚の写真を使用したスライドショー(gallery)があります。

通常時は画像のようなスタイルになっています。

しかし、複数枚の画像がスライドしている《だけ》ではありません!

 

①画像にマウスカーソルを合わせると画像下にタイトル名が表示される

②画像クリックするとポップアップ表示される

(画像下にタイトル名が表示、閉じる(×)ボタンの設定など)

という動きがプラスされているので、

 

「スライドはうまくいったのにポップアップ表示されない!」

「ポップアップ表示できるようになったのにスライドが動かない!」

といった感じで私は少し苦戦してしまいました(^_^;)

 

そして今回【Bootstrap4】と合わせて使用したのがjQueryプラグイン【Lightbox 2】です!

新しいページを開かずに画像ポップアップを表示してくれます。

 

実際に作成したのコードを公開します!

 

【index.html】

【style.css】

 

【Lightbox 2】のファイルダウンロードし読み込ませることはもちろんですが

lightbox2-2.11.3\dist\imagesの中にある画像もしっかり作業ディレクトリのimagesファイルに入れてください。

矢印(<>)や閉じる(×)などのアイコン画像が入っています!(^^)!

 

またポップアップ後に表示される閉じるボタンですがデフォルトで右下に設定されいるので

lightbox.cssの中も少しだけ変更しました(‘ω’)ノ

 

【lightbox.css】

 

これでサンプルページと同じようなスライドショーが完成しました!

Bootstrap4だけだとうまくポップアップ表示されなかったりと苦戦しましたが

今回使用したlightboxは初心者の方にもおすすめ!(らしい)ので是非試してみてください!

 

 

そして最後に、、、

前回記載し忘れてしまったのですが、私がこの置き換え作業をするにあたって読み込んでいるファイルを簡単にまとめて終わります♪

 

【bootstrap-4.5.0-dist】【lightbox2-2.11.3】【popper-core-1.14.0】【jquery-3.3.1.slim.min.js】

 

◆cssファイル

bootstrap.min.css/lightbox.css/style.css

◆jsファイル

bootstrap.min.js/jquery-3.3.1.slim.min.js/lightbox.js/lightbox-plus-jquery.min.js/popper.min.js

 

 

 

_

タグ:Bootstrap,css,html,JavaScript,jQuery,Lightbox,スライド,スライドショー,ポップアップ

2020.10.21