jqueryを使わないcssだけで実装するライトボックス

2017年3月17日

とっつぁん

この記事は 7 分くらいで読めると思います

あとで読む

ライトボックス

CSSだけでLight Box

今回はhtmlとcssだけでライトボックスを作ってみました。
javascriptを使いたくなーい！という人は試してみてもいいかもしれません。

あーたむライトボックスって？

とっつぁん（そこから！？）
画像とかクリックしたら画面全体にニュニュっと拡大するやつだよ

みーたむモーダルウィンドウと言ったほうが分かりやすいかもしれませんね

あーたむよりいっそ分からん！

みーたむすみません…

とっつぁんと…とりあえずデモを用意しました。

とりあえずデモ↓

DEMO

あーたむふむふむ、ニュニュッと大きくなるやつだね！

とっつぁんひとまずワタクシのAndroidクソブラウザでも動作確認しました（笑）

実装方法

html

<ul>
	<li><a href="#lb01">サムネイルやテキスト</a></li>
	<li><a href="#lb02">サムネイルやテキスト</a></li>
	<li><a href="#lb03">サムネイルやテキスト</a></li>
</ul>

<!-- ▽▽拡大時の内容▽▽ -->
<div id="lb_content">

<div id="lb01">
<a href="#" class="close_overlay">×</a>
	<div class="lb_wrapper">
		<figure><img src="画像url" class="rs_img" /></figure>
		<p>テキストテキスト</p>
		<p class="lb_prev"><a href="#lb03">&#8810</a></p>
		<p class="lb_next"><a href="#lb02">&#8811</a></p>
		<p class="right"><a href="#"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="▶" src="https://s.w.org/images/core/emoji/2.2.1/svg/25b6.svg"> CLOSE</a></p>
	</div>
</div>

<div id="lb02">
<a href="#" class="close_overlay">×</a>
	<div class="lb_wrapper">
		<div class="rs_frame">iframeの埋め込みとか</div>
		<p>テキストテキスト</p>
		<p class="lb_prev"><a href="#lb01">&#8810</a></p>
		<p class="lb_next"><a href="#lb03">&#8811</a></p>
		<p class="right"><a href="#"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="▶" src="https://s.w.org/images/core/emoji/2.2.1/svg/25b6.svg"> CLOSE</a></p>
	</div>
</div>

<div id="lb03">
<a href="#" class="close_overlay">×</a>
	<div class="lb_wrapper">
		<figure><img src="画像url" class="rs_img" /></figure>
		<p>テキストテキストテキスト</p>
		<p class="lb_prev"><a href="#lb02">&#8810</a></p>
		<p class="lb_next"><a href="#lb01">&#8811</a></p>
		<p class="right"><a href="#"><img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="▶" src="https://s.w.org/images/core/emoji/2.2.1/svg/25b6.svg"> CLOSE</a></p>
	</div>
</div>

</div>
<!-- ▲▲拡大時の内容▲▲ -->

みーたむidの「lb01,lb02,lb03」をハッシュリンクとして使用しています。
要素の数が増えればこのidの数も増やす必要があります。

css

.rs_img {/* 画像レスポンシブ対応 */
	max-width :100%;
	max-height :100%;
}

.rs_frame {/* iframeレスポンシブ対応 */
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.rs_frame iframe,
.rs_frame object,
.rs_frame embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
}

#lb01,#lb02,#lb03 {/* htmlのidと合わせてここも編集 */
	position: absolute;
	top: 0;
	left: 0;
	right : 0;
	bottom : 0;	
	display: none;
}

.close_overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	background: #000;
	opacity: 0.5;
	z-index: 1;
}

.lb_wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right : 0;
	bottom : 0;
	margin: 5%;
	max-width: 100%;
	max-height: 100%;
	display: block;
	background: #fff;
	z-index: 2;
	overflow :auto;
}

.lb_wrapper figure {/* 画像の包含ブロック */
	text-align :center;
	padding :1em;
	width :100%;
	height :80%;
}

@media screen and (max-width: 840px) {
.lb_wrapper figure {/* 画像の高さによっては編集する必要あり */
	height :60%;
}
}

.lb_prev {
	display :table;
	position :absolute;
	top :0;
	left :0;
	font-size :150%;
	text-align :center;
	width :5%;
	height :100%;
}

.lb_next {
	display :table;
	position :absolute;
	top :0;
	right :0;
	font-size :150%;
	text-align :center;
	width :5%;
	height :100%;
}

.lb_prev a, .lb_next a {
	display :table-cell;
	vertical-align :middle;
}

@-webkit-keyframes fadein {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}

div#lb_content div:target {
	-webkit-animation-name: fadein; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display:block;
}