Gallery 11/6/2021 10pm

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_container");

const slides = $all("#my_modal div");

const closeModal = evt => {
    // Loops to find the slide that the user clicked on if needed
    for ( let i in slides ) {
        /* Checks the correct slide container the user clicked against the index of the slides.
         Loops until it finds it, or if clicked the close button */
        if ( evt.target == slides[i] || evt.target == $("#close_button") ) {
            $("#my_modal").style.display = "none";

            /* Will set the display of all the slides to none no matter what 
            in order to prevent undefined errors when clicking the close button */
            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");
            }

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

const openModal = evt => {
    // Loops to find the index of the image or video that the user clicked on
    for ( let i in gallery ) {
        /* Checks the image or video the user clicked against the index of the gallery.
         Loops until it finds it */
        if ( evt.currentTarget == gallery[i] ) {
            // Prevents page from being scrollable inside the modal
            $("body").style.overflow = "hidden";

            // Prevents images inside #gallery from being tabbed to 
            for (let t = 0;...