javascript – Lightbox invisible controls


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>gallery</title>
</head>

<style media="screen">

html{
    background-color: black;
}
body{
    margin: 0;
}

.grid{
    display: grid;
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    align-content: center;
    grid-gap: 10px;
    height: 100vh;
}
.grid img{
    height: 200px;
    width: 200px;
    cursor: pointer;
    border: 2px solid black;
}
.grid img:hover{
    border: 2px solid red;
}
img{
    height: 100%;
}

#lightbox{
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
}
#lightbox.active{
    display: flex;
    justify-content: center;
    align-items: center;
}

</style>

<body>
    <div class="grid">
        <img src="https://fakeimg.pl/200x200/?text=image1">
        <img src="https://fakeimg.pl/200x200/?text=image2">
        <img src="https://fakeimg.pl/200x200/?text=image3">
        <img src="https://fakeimg.pl/200x200/?text=image4">
        <img src="https://fakeimg.pl/200x200/?text=image5">
        <img src="https://fakeimg.pl/200x200/?text=image6">
        <img src="https://fakeimg.pl/200x200/?text=image7">
        <img src="https://fakeimg.pl/200x200/?text=image8">
        <img src="https://fakeimg.pl/200x200/?text=image9">
    </div>
</body>

<script type="text/javascript">

const lightbox = document.createElement('div')
lightbox.id = 'lightbox'
document.body.appendChild(lightbox)

const images = document.querySelectorAll('img')
images.forEach(image => {
    image.addEventListener('click', e => {
        lightbox.classList.add('active')
        const img = document.createElement('img')
        img.src = image.src
        while (lightbox.firstChild) {
            lightbox.removeChild(lightbox.firstChild)
        }
        lightbox.appendChild(img)
    })
})

lightbox.addEventListener('click', e => {
    if (e.target !== e.currentTarget) return
    lightbox.classList.remove('active')
})

</script>

</html>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here