1

I'm trying to customise my site on Cargo, and I'm hoping to have a slideshow gallery that also has a thumbnail index of the images below it.

Right now I have just created two galleries of the same images, one in slideshow style and the other in justified style. Is there a way to code it so when you click the image in the second gallery, the slideshow gallery will also go to that image?

current html looks like this:

<gallery-slideshow
    navigation="false"
    autoplay="false"
    limit-by="height"
    transition-type="scrub"
    disable-zoom="true"
>
    <media-item
        class=""
        hash="S2814160660004404052207837000213"
        justify-row-end="true"
        rotation="0"
        scale="100"
        slot="slot-0"
        limit-by="width"
        disable-zoom="true"
    ></media-item>
    <media-item
        class=""
        hash="F2814160778930563095413316268565"
        rotation="0"
        scale="100"
        slot="slot-1"
        limit-by="width"
        disable-zoom="true"
    ></media-item>
    <media-item
        class=""
        hash="J2814157053610597409769367417365"
        rotation="0"
        scale="100"
        slot="slot-2"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        cursor="ew-resize"
        hash="H2814161025028575782772444377621"
        justify-row-end="true"
        rotation="0"
        scale="100"
        slot="slot-3"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="T2814372157735933515435623199253"
        rotation="0"
        scale="100"
        slot="slot-4"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="I2814156590541980927438493200917"
        rotation="0"
        scale="100"
        slot="slot-5"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="K2814156674696027391701467673109"
        rotation="0"
        scale="100"
        slot="slot-6"
        limit-by="width"
    ></media-item>
    <media-item
        class=""
        hash="S2814160233478787579895584535061"
        rotation="0"
        scale="100"
        slot="slot-7"
        limit-by="width"
        disable-zoom="true"
    ></media-item>
</gallery-slideshow>

<column-set gutter="3.4rem">
    <column-unit slot="0" span="3">
        <h1>project title</h1>
        specs<br>
        <br>
        description<br>
    </column-unit>
    <column-unit slot="1" span="9">
        <gallery-justify gutter="1rem" mobile-gutter="1rem">
            <media-item
                class=""
                hash="S2814160660004404052207837000213"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-0"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="F2814160778930563095413316268565"
                slot="slot-1"
                limit-by="width"
                scale="100"
                rotation="0"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="J2814157053610597409769367417365"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-2"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="H2814161025028575782772444377621"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-3"
                disable-zoom="true"
                cursor="ew-resize"
            ></media-item>
            <media-item
                class=""
                hash="T2814372157735933515435623199253"
                slot="slot-4"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="I2814156590541980927438493200917"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-5"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="K2814156674696027391701467673109"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-6"
                disable-zoom="true"
            ></media-item>
            <media-item
                class=""
                hash="S2814160233478787579895584535061"
                justify-row-end="true"
                limit-by="width"
                rotation="0"
                scale="100"
                slot="slot-7"
                disable-zoom="true"
            ></media-item>
        </gallery-justify>
    </column-unit>
</column-set>

<br>
Improve this question

1 Answer 1

Reset to default
1

In this caso (let me know Cargo's version; but usually 2 or 3) you might need Javascript. Try adding this in the Custom JS tab:

<script>
document.addEventListener("DOMContentLoaded", function() {
    const mainSlideshow = document.querySelector('gallery-slideshow');
    const thumbGallery = document.querySelector('gallery-justify');

    if (!mainSlideshow || !thumbGallery) return;

    const thumbnails = thumbGallery.querySelectorAll('media-item');

    thumbnails.forEach((thumb, index) => {
        thumb.style.cursor = 'pointer';
        thumb.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            if (typeof mainSlideshow.setIndex === 'function') {
                mainSlideshow.setIndex(index);
            } else {
                mainSlideshow.setAttribute('active-index', index);
            }
            
            mainSlideshow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        });
    });
});
</script>

If the gallery stall (stops or breaks), remove it and comment here.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I believe I'm using cargo 3. I also cannot find a custom js tab :(
I added this code into the global html tab but nothing happens when I click the images in the second gallery

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.