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}>&lt;</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">
                    {#each images[currentIndex].desc as d}
                        <p>{@html d}</p>
                    {/each}
                </div>
            </div>
            <button class="gallery-button" onclick={galleryForward}>&gt;</button>
        </div>
        <div class="gallery-img-container">
            <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
        </div>
    </div>
</div> -->

<div class="gallery-zone blurred-background">
    <div class="gallery-img-container">
        <img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
    </div>
    <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} :: <a href={images[currentIndex].src}>full-size</a></p>
            <div class="gallery-desc-container">
                {#each images[currentIndex].desc as d}
                    <p>{@html d}</p>
                {/each}
            </div>
        </div>
        <button class="gallery-button" onclick={galleryForward}>&gt;</button>
    </div>
</div>

<style>
    .gallery-zone {
        width: 100%;
        display: grid;
        grid-template-columns: 5fr 4fr;
        margin: 12px auto;
        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
        border-radius: var(--border-radius);
        overflow: hidden;
        height: var(--media-height);
    }

    .gallery-img-container {
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
    }

    .gallery-img {
        object-fit: contain;
        margin: 0;
        width: 100%;
    }

    .gallery-text-container {
        width: 100%;
        height: calc(var(--media-height));
        /* overflow: hidden; */
        display: flex;
        flex-direction: column;
        /* justify-content: space-between; */
        margin: 0 16px;
        overflow: scroll;
        box-sizing: border-box;
    }

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

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

    .gallery-button-container {
        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>