Gallery 11/6/2021 12:40am

by Boros

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/c982930f83.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles/index.css">
    <title>Test</title>
</head>

<body>
    <div id="gallery">
        <img src="https://i.imgur.com/gyVTo26.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/bEo04qh.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/iRENtzp.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/ElkQu54.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/Aj25iuv.jpg" alt="" tabindex="1">
        <div class="video_container">
            <video src="https://i.imgur.com/kKGF9Az.mp4" tabindex="1" muted></video>
            <i class="fas fa-play"></i>
        </div>
        <div class="video_container">
            <video src="https://i.imgur.com/p7ohLnA.mp4" tabindex="1" muted></video>
            <i class="fas fa-play"></i>
        </div>
        <img src="https://i.imgur.com/PxWajo9.jpg" alt="" tabindex="1">
        <img src="https://i.imgur.com/CAh7F8p.jpg" alt="" tabindex="1">
    </div>

    <div id="my_modal">
            <div class="img_slides">
                <img src="https://i.imgur.com/gyVTo26.jpg" alt="">
            </div>
            <div class="img_slides">
                <img src="https://i.imgur.com/bEo04qh.jpg" alt="">
            </div>
            <div class="img_slides">
                <img src="https://i.imgur.com/iRENtzp.jpg" alt="">
            </div>
            <div class="img_slides">
                <img src="https://i.imgur.com/ElkQu54.jpg" alt="">
            </div>
            <div class="img_slides">
                <img src="https://i.imgur.com/Aj25iuv.jpg" alt="">
            </div>
            <div class="video_slides">
                <video...

CSS

* { box-sizing: border-box; }
html {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 16px;
    background-color: black;
}
#gallery {
    text-align: center;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select:none; 
    user-select:none;
}
#gallery img, video {
    width: 100%;
    max-width: 360px;
    height: 480px;
    object-fit: cover;
    cursor: pointer;
    image-rendering: -webkit-optimize-contrast;  
}
.video_container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 360px;
    height: 480px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
/* Prevents video from moving when hovered on chrome */
.video_container video {
    filter: brightness(1);
}
.fa-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    cursor: pointer;
    font-size: 2rem;
    color: white;
}
#gallery img:hover, .video_container:hover {
    transition: opacity 0.3s;
    opacity: 0.8;
}
.fa-play:hover {
    transition: color 0.5s;
    color: #181818;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
#my_modal {
    animation-name: fadeIn;
    animation-duration: 0.5s;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow: auto;
    margin: 0;
    padding: 0;
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select:none; 
    user-select:none;
}
.img_slides, .video_slides {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.img_slides img {
    max-height: 100%;
    max-width: 100%;
   ...

JavaScript

"use strict";

const $ = selector => document.querySelector(selector);
const $all = selector => document.querySelectorAll(selector);

const gallery = $all("#gallery img, #gallery video");
console.log(gallery.length);

const slides = $all("#my_modal div");
console.log(slides.length);

const closeButton = $("#close_button");

const closeModal = evt => {
    if ( evt.target == closeButton ) {
        $("#my_modal").style.display = "none";
        for (let i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }

        // Allows page to be scrollable
        $("body").style.overflow = "initial";

        // Allows images to be tab accessible
        for (let i = 0; i < gallery.length; i++) {
            gallery[i].setAttribute("tabindex", "1");
        }

        // Will pause the video when you close out of the modal
        for (let p = 0; p < videos.length; p++) {
            videos[p].pause();
        }
    }
    for ( let i in slides ) {
        if ( evt.target == slides[i] ) {
            $("#my_modal").style.display = "none";
        for (let i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }

        // Allows page to be scrollable
        $("body").style.overflow = "initial";

        // Allows images to be tab accessible
        for (let i = 0; i < gallery.length; i++) {
            gallery[i].setAttribute("tabindex", "1");
        }

        // Will pause the video when you close out of the modal
        for (let p = 0; p < videos.length; p++) {
            videos[p].pause();
        }
        }
    }
}

// Opens modal if you click the image
$all("#gallery img").forEach(item => {
    item.addEventListener('click', evt => {
        for ( let i in gallery ) {
            if ( evt.target == gallery[i] ) {
                // Prevents page from being scrollable inside the modal
                $("body").style.overflow = "hidden";

                // Prevents images inside #gallery from...