Vanilla javascript gallery

Using some CSS Grid + some vanilla javascript it makes for a great image gallery.
Check out the completed example here.
Thumbgallery

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ThumbGallery</title>
        <link rel="stylesheet" href="style.css">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- https://www.youtube.com/watch?v=afoxd5b0bJo -->
        <div class="container">
            <div class="main-img">
                <img src="img/img1.jpeg" id="current">
            </div>

            <div class="imgs">
                <img src="img/img1.jpeg">
                <img src="img/img2.jpeg">
                <img src="img/img3.jpeg">
                <img src="img/img4.jpeg">
                <img src="img/img5.jpeg">
                <img src="img/img6.jpeg">
                <img src="img/img7.jpeg">
                <img src="img/img8.jpeg">
            </div>
        </div>
        
        <script src="main.js"></script>
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body {
    margin: 20px;
    padding: 0;
    background: #333;
}

.container {
    max-width: 760px;
    margin: auto;
    border: #fff solid 3px;
    background: #fff;
}

.main-img img, 
.imgs img {
    width: 100%
}

.imgs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 5px;
}

/* Fade in animation */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-in 1 forwards;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');
const opacity = 0.6;

// Set first img opactiy
imgs[0].style.opacity = opacity;

imgs.forEach(img => img.addEventListener('click', imgClick));

function imgClick(e) {
    // Reset the opacty
    imgs.forEach(img => (img.style.opacity = 1));

    // change current image to src of clicked image
    current.src = e.target.src;

    // Add fade in class
    current.classList.add('fade-in');

    // Remove fade-in class after .5 seconds
    setTimeout(() => current.classList.remove('fade-in'),500);

    //change the opactiy to opacity var
    e.target.style.opacity = opacity;
}