pages/src/lib/lists/image-gallery.svelte

<script lang="ts">

    export interface GalleryImage {
        src: string;
        alt: string;
        desc: string[];
    }

    let {
        images,
    }: {
        images: GalleryImage[];
    } = $props();

    let currentIndex: number = $state(0);

    function galleryBack() {
        if (currentIndex == 0) {
            currentIndex = images.length - 1;
        } else {
            currentIndex -= 1;
        }
    }

    function galleryForward() {
        if (currentIndex == images.length - 1) {
            currentIndex = 0;
        } else {
            currentIndex += 1;
        }
    }
</script>

<div class="gallery-zone">
    <div class="gallery-container blurred-background">
        <div class="gallery-button-container">
            <button class="gallery-button" onclick={galleryBack}>↫</button>
            <div class="gallery-text-container">
                <p class="gallery-index">{currentIndex + 1} / {images.length} :: <a href={images[currentIndex].src}>full-size</a></p>
                <div class="gallery-desc-container">
                <p>&nbsp;</p> <!-- this element intentionally left blank -->
                    {#each images[currentIndex].desc as d}
                        <p>{@html d}</p>
                    {/each}
                </div>
            </div>
            <button class="gallery-button" onclick={galleryForward}>↬</button>
        </div>
        <div class="gallery-img-container">
            <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
        </div>
    </div>
</div>

<style>
    .gallery-zone {
        width: 100%;
    }
    
    .gallery-container {
        max-width: var(--media-width);
        margin: 12px auto;
        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .gallery-img-container {
        width: 100%;
        height: var(--media-height);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gallery-img {
        object-fit: contain;
        margin: 0;
        width: 100%;
        filter: brightness(100%) saturate(100%);
        transition: filter var(--duration-animation) var(--anim-curve);
    }

    .gallery-button-container,
    .gallery-text-container {
        opacity: 0%;
        transition: opacity var(--duration-animation) var(--anim-curve);
    }

    .gallery-zone:hover .gallery-button-container,
    .gallery-zone:hover .gallery-text-container
    {
        opacity: 100%;
    }

    .gallery-zone:hover .gallery-img {
        filter: brightness(40%) saturate(60%);
    }

    .gallery-text-container {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 8px 32px;
    }

    .gallery-index {
        font-family: var(--font-mono);
        font-weight: 600;
        font-size: 1.0rem;
    }
    
    .gallery-text-container p, .gallery-index a {
        height: fit-content;
        font-size: 1.0rem;
        line-height: 1.4rem;
        text-shadow: 0 0 6px black;
    }

    .gallery-desc-container {
        padding-bottom: 12px;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .gallery-desc-container p {
        margin: 0;
    }

    .gallery-button-container {
        z-index: 1;
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .gallery-button {
        color: var(--color-text);
        /* background-color: var(--color-background-highlight-alt); */
        height: fit-content;
        cursor: pointer;
        font-size: 2.4rem;
        line-height: 2.4rem;
        padding: 8px 12px;

        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);

        transition: background-color var(--duration-animation) var(--anim-curve);
    }
    .gallery-button:first-child {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);

    }
    .gallery-button:last-child {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
    }

    .gallery-button:hover {
        background-color: var(--color-background-highlight-hover-alt);
    }
</style>