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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【index.html】

<div id="gallery" class="carousel" data-ride="carousel">
	<div class="carousel-inner">
		<div class="item1 carousel-item active single first">
			<a href="images/slide-1.jpg" rel="lightbox[plants]" data-title="フランス産アロマオイルを使用"><img src="image/slide-1.jpg" class="d-block w-100" alt="フランス産アロマオイルを使用"></a>
			<p>フランス産アロマオイルを使用</p>
		</div>
		<div class="item2 carousel-item single">
			<a href="images/slide-2.jpg" rel="lightbox[plants]" data-title="肌の保湿力を高めるマッサージオイル"><img src="image/slide-2.jpg" class="d-block w-100"　alt="肌の保湿力を高めるマッサージオイル">
			<p>肌の保湿力を高めるマッサージオイル</p></a>
		</div>
		<div class="item3 carousel-item single last">
			<a href="images/slide-3.jpg" rel="lightbox[plants]" data-title="リンパを流して凝りをほぐします"><img src="image/slide-3.jpg" class="d-block w-100"　alt="リンパを流して凝りをほぐします">
			<p>リンパを流して凝りをほぐします</p></a>
		</div>
	</div>
	<a href="#gallery" class="carousel-control-prev" data-slide="prev">
		<span class="carousel-control-prev-icon"></span>
			<span class="sr-only">前の画像へ</span>
	</a>
	<a href="#gallery" class="carousel-control-next" data-slide="next">
		<span class="carousel-control-next-icon"></span>
			<span class="sr-only">次の画像へ</span>
	</a>
</div>

<p>フランス産アロマオイルを使用</p>

</div>

<p>肌の保湿力を高めるマッサージオイル</p></a>

</div>

<p>リンパを流して凝りをほぐします</p></a>

</div>

<span class="sr-only">前の画像へ</span>

</a>

<span class="sr-only">次の画像へ</span>

</a>

</div>

【style.css】

a {
	color:#000;
}

a:hover {
	color: #FF9999;
	text-decoration:none;
}

.carousel-item {
	width: 100%;
}
.carousel-item p {
	display: none;
}
.carousel-item:hover p {
	display: block;
}
#gallery img {
	width: 980px;
	height: 475px;
	object-fit: cover;
}

.item1,.item2,item3 {
	position: relative;
}

.item1 p,.item2 p,.item3 p {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	color: white;
	background: rgba( 0, 0, 0, 0.5 );
	font-size: 15px;
	line-height: 1;
	width: 100%;
	padding: 15px;
}

a {

color:#000;

}

a:hover {

color: #FF9999;

text-decoration:none;

}

.carousel-item {

width: 100%;

}

.carousel-item p {

display: none;

}

.carousel-item:hover p {

display: block;

}

#gallery img {

width: 980px;

height: 475px;

object-fit: cover;

}

.item1,.item2,item3 {

position: relative;

}

.item1 p,.item2 p,.item3 p {

position: absolute;

bottom: 0;

left: 0;

margin: 0;

color: white;

background: rgba( 0, 0, 0, 0.5 );

font-size: 15px;

line-height: 1;

width: 100%;

padding: 15px;

}

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

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

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

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

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

【lightbox.css】

.lb-data .lb-close {
  position: absolute;
　top: -40px;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../images/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close {

position: absolute;

　top: -40px;

float: right;

width: 30px;

height: 30px;

background: url(../images/close.png) top right no-repeat;

text-align: right;

outline: none;

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);

opacity: 0.7;

-webkit-transition: opacity 0.2s;

-moz-transition: opacity 0.2s;

-o-transition: opacity 0.2s;

transition: opacity 0.2s;

}

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

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

Blog