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-container blurred-background">
    <div class="gallery-button-container">
        <button class="gallery-button" onclick={galleryBack}>&lt;</button>
        <div class="gallery-text-container">
            <p class="gallery-index">{currentIndex + 1} / {images.length}</p>
            <p>{@html images[currentIndex].desc}</p>
        </div>
        <button class="gallery-button" onclick={galleryForward}>&gt;</button>
    </div>
    <div class="gallery-img-container">
        <img class="gallery-img" src={images[currentIndex].src} alt={images[currentIndex].alt}>
    </div>
</div>

<style>
    .gallery-container {
        position: relative;
        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);
    }

    .gallery-img-container {
        width: fit-content;
        position: relative;
        margin: 0 auto;
    }

    .gallery-img {
        object-fit: contain;
        width: 100%;
        margin: 0;
        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-container:hover .gallery-button-container,
    .gallery-container:hover .gallery-text-container
    {
        opacity: 100%;
    }

    .gallery-container:hover .gallery-img {
        filter: brightness(50%) saturate(50%);
    }

    .gallery-text-container {
        /* position: absolute;
        left: 0;
        right: 0;
        bottom: 0; */

        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;
    }
    
    .gallery-text-container p {
        height: fit-content;
        font-size: 1.0rem;
        line-height: 1.4rem;
    }

    .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;

        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-highlight-alt);
    }
</style>