ARTICLE AD BOX
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>
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.
2 Comments
I believe I'm using cargo 3. I also cannot find a custom js tab :(
2026-02-27T03:07:07.793Z+00:00
I added this code into the global html tab but nothing happens when I click the images in the second gallery
2026-02-27T03:16:04.68Z+00:00
Explore related questions
See similar questions with these tags.
