Simple Image Gallery Overlay

README.md

A simple image gallery overlay which should work an any blog without needing to change anything else.

The overlay is fullscreen and shows one image at a time. The controlls are:

• Button at the top and bottom to quit, or press Escape or q
• Button on the left side Arrow left or a to go to the previous image
• Button on the right side Arrow right or d to go to the next image

It also is assumed, that the img_filter, which can be set at the top of the JavaScript finds all <img> tags which should be included. Additionally, each <img> tag should be contained in a single container. Because this copies the content of the parent to work properly with images that have a <source> tag.

A typical image I want to include looks something like this in HTML:

<picture class="picture-wrapper">
  <source srcset="/images/image_500x0_resize_q90_box.jpg 500w, /images/image_800x0_resize_q90_box.jpg 800w" type="image/jpeg">
  <source srcset="/images/image_500x0_resize_q90_h2_box.webp 500w, /images/image_800x0_resize_q90_h2_box.webp 800w" type="image/webp">
  <img loading="lazy" src="/images/image_1500x0_resize_q90_box.jpg" class="figure-img img-fluid" alt="alt" width="1500" height="1125">
</picture>

And I also have this css:

.img-fluid {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

I wrote this for Hugo with hugo-responsive-images.

image_gallery.css

/*
MIT License

Copyright (c) 2023 Johannes Bier

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/

.overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
}

.overlay-background {
    z-index: 100;
    background-color: #0b0b0b;
    opacity: .8;
}

.overlay-content {
    color: #fff;
    z-index: 110;
}

.gallery-wrapper {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.gallery-control-prev,
.gallery-control-next,
.gallery-control-close {
    height: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}

.gallery-control-close:hover {
    color: #006400ab;
}

.gallery-control-prev {
    grid-area: 1 / 1 / 8 / 2; 
}

.gallery-control-next {
    grid-area: 1 / 7 / 8 / 8; 
}

.gallery-control-close {
    min-height: 1.5em;
    display: flex;
    flex-direction: column;
    cursor: zoom-out;
    color: #008000ff;
    font-size: x-large;
    font-weight: bold;
    transition: color .2s ease-in-out;
}

.gallery-control-close.top {
    grid-area: 1 / 2 / 2 / 7; 
    justify-content: start;
    text-align: right;
}

.gallery-control-close.bottom {
    grid-area: 7 / 2 / 8 / 7; 
    justify-content: end;
    text-align: center;
}

.prev-icon,
.next-icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    background: transparent no-repeat center center;
    background-size: 100% 100%;
}

.prev-icon svg path,
.next-icon svg path {
    transition: fill .2s ease-in-out;
}

.gallery-control-prev:hover svg path,
.gallery-control-next:hover svg path {
    fill: #006400ab;
}

.gallery {
    grid-area: 2 / 2 / 7 / 7; 
    height: 100%;
    overflow: hidden;
}

.gallery-inner {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    transition: transform 1s ease 0s;
}

.gallery-img-wrapper {
    height: 100%;
    width: 100%;
}

image_gallery.js

// MIT License

// Copyright (c) 2023 Johannes Bier

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

const img_filter = ".img-fluid"

let current_slide = 0;
let keydown = null

function closeOverlay() {
    document.querySelectorAll(".overlay").forEach(e => e.remove());

    // activate scrolling
    document.documentElement.style.overflow = 'scroll';
    document.body.scroll = "yes";

    // restore old function
    document.onkeydown = keydown
}

function createOverlay(e) {
    // disable scroll
    document.documentElement.style.overflow = 'hidden';
    document.body.scroll = "no"; 

    // create overlay
    let fragment = document.createDocumentFragment();
    
    let background_layer = document.createElement("div");
    background_layer.classList.add("overlay")
    background_layer.classList.add('overlay-background');
    fragment.appendChild(background_layer);

    let overlay = document.createElement("div");
    overlay.classList.add("overlay");
    overlay.classList.add('overlay-content');

    let content = '<div class="gallery-wrapper"><button class="gallery-control-prev" title="Previous (Left arrow key)"><span class="prev-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="#008000ff" viewBox="0 0 8 8"><path d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z" /></svg></span></button><button class="gallery-control-close top"><span>×</span></button><div class="gallery"><div id="gallery-id" class="gallery-inner">';
    
    let images = document.querySelectorAll(img_filter);
    images.forEach((i, n) => {
        if (e.target === i) {
            current_slide = n;
        }

        content += `<picture class="gallery-img-wrapper">${i.parentNode.innerHTML}</picture>`;
    });

    content += '</div></div><button class="gallery-control-close bottom"><span>×</span></button><button class="gallery-control-next" title="Next (Right arrow key)"><span class="next-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" fill="#008000ff" viewBox="0 0 8 8"><path d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z" /></svg></span></button></div>';

    overlay.innerHTML = content;
    fragment.appendChild(overlay);

    document.body.insertBefore(fragment, document.body.childNodes[0]);

    let inner = document.getElementById("gallery-id");
    inner.style.width = images.length * 100 + "%"

    // find controlls
    const pB = document.querySelector(".gallery-control-prev");
    const nB = document.querySelector(".gallery-control-next");

    // close event
    document.querySelectorAll(".gallery-control-close").forEach(e => e.addEventListener('click', closeOverlay));

    // calc translation size
    const t = 100 / images.length;
    const update = (i) => {
        inner.style.transform = `translateX(${i * -t}%)`;
    }

    // set initial image
    update(current_slide);

    // button events
    function previousSlide() {
        current_slide -= 1;
        if (current_slide < 0)
            current_slide = 0;
        update(current_slide);
    }
    function nextSlide() {
        current_slide += 1;
        if (current_slide >= images.length)
            current_slide = images.length - 1;
        update(current_slide);
    }
    pB.addEventListener("click", previousSlide);
    nB.addEventListener("click", nextSlide);

    // may be incompatible with other scripts with key events
    // so we overwrite when opening an overlay
    keydown = document.onkeydown
    document.onkeydown = function (evt) {
        evt = evt || window.event;
        let action = false;

        // close
        if ("key" in evt) {
            action = (evt.key === "Escape" || evt.key === "Esc" || evt.key === "q");
        } else {
            action = (evt.keyCode === 27 || evt.keyCode === 81);
        }
        if (action) {
            closeOverlay()
        }

        // nav right
        if ("key" in evt) {
            action = (evt.key === "ArrowRight" || evt.key === "d");
        } else {
            action = (evt.keyCode === 39 || evt.keyCode === 68) 
        }
        if (action) {
            nextSlide();
        }

        // nav left
        if ("key" in evt) {
            action = (evt.key === "ArrowLeft" || evt.key === "a");
        } else {
            action = (evt.keyCode === 37 || evt.keyCode === 65) 
        }
        if (action) {
            previousSlide();
        }
    };
}

// Add event to all images
document.querySelectorAll(img_filter).forEach(e => e.addEventListener('click', createOverlay));