<ul class="light-box">
<li><a href="https://picsum.photos/id/1/800/400" class="light-box__item"><img src="https://picsum.photos/id/1/300/150"></a></li>
<li><a href="https://picsum.photos/id/10/800/400" class="light-box__item"><img src="https://picsum.photos/id/10/300/150"></a></li>
<li><a href="https://picsum.photos/id/348/800/400" class="light-box__item"><img src="https://picsum.photos/id/348/300/150"></a></li>
</ul>
.light-box {
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
justify-content: space-between;
}
.light-box > li {
width: calc((100% - 24px) / 3);
}
.light-box__item {
display: block;
}
.light-box__item > img {
width: 100%;
}
.light-box__bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
}
.light-box__photo {
position: fixed;
width: 100%;
max-width: 600px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
transition: opacity 0.3s;
}
.light-box__photo > img {
width: 100%;
}
.light-box {
display: flex;
width: 100%;
max-width: 600px;
margin: 0 auto;
justify-content: space-between;
& > li {
width: calc((100% - #{$space_md * 2}) / 3);
}
&__item {
display: block;
& > img {
width: 100%;
}
}
&__bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, .4);
z-index: 1;
opacity: 0;
transition: opacity $speed_fast;
}
&__photo {
position: fixed;
width: 100%;
max-width: 600px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
transition: opacity $speed_fast;
& > img {
width: 100%;
}
}
}
(function() {
const body = document.body;
// 背景要素の作成
const bgEl = document.createElement('div');
bgEl.classList.add('light-box__bg');
bgEl.addEventListener('click', hideLightBox);
// 画像要素の作成
const photoEl = document.createElement('div');
const photoImg = document.createElement('img');
photoEl.classList.add('light-box__photo');
photoEl.appendChild(photoImg);
// 追加した要素に後でアクセスするための変数
let bgDom;
let photoDom;
// transition後の操作
let showFlag = false;
transitionSet();
const items = document.querySelectorAll('.light-box__item');
if(!items) {return;}
items.forEach(item => {
item.addEventListener('click', (e) => {
e.preventDefault();
showFlag = true;
showLightBox(item.getAttribute('href'));
});
})
function showLightBox(src) {
photoImg.setAttribute('src', src);
bgDom = body.appendChild(bgEl);
photoDom = body.appendChild(photoEl);
setTimeout(() => {
bgDom.style.opacity = 1;
photoDom.style.opacity = 1;
});
}
function hideLightBox() {
bgDom.style.opacity = 0;
photoDom.style.opacity = 0;
showFlag = false;
}
function transitionSet() {
bgEl.addEventListener('transitionend', () => {
if(!showFlag) {
bgDom.remove();
photoDom.remove();
}
});
}
}());