Help with Setting Up Dynamic Lightbox Galleries Linked to a Repeater on List Page

Ask the community
,
1

I’m building a portfolio site using Wix, where:

  • I have a CMS collection (Portfolio 2.0) containing projects with fields like:
    • Main Image (single image for thumbnail)
    • Gallery (multi-image field for project images)
  • On A Dynamic List Page, I’ve placed a Repeater (#Repeater1) inside an interactive tab (#tabs1) to display the Main Image of each project.
  • When a user clicks on a button overlayed in the Repeater) (#button3), I want a lightbox to open and display the corresponding Gallery images from the CMS collection.

I created a CMS collection with Main Image and Gallery fields.

Added a Repeater to my List Page and connected it to the Portfolio 2.0 dataset to display the Main Images.

Created a Lightbox with a Wix Pro Gallery to display Gallery images.

I’ve added this Velo code in my Dynamic page with the interactive tab.

import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;

$w.onReady(function () {
$w(‘#tabs1’).onChange((event) => {
const tabIndex = event.target.selectedIndex;

    if (tabIndex === 0) {
        loadRepeaterData("Editorial");
    } else if (tabIndex === 1) {
        loadRepeaterData("Beauty");
    } else if (tabIndex === 2) {
        loadRepeaterData("Portrait");
    }
});

});

function loadRepeaterData(category) {
$w(“#dynamicDataset”).setFilter(wixData.filter().contains(“category”, category))
.then(() => {
console.log(Repeater updated for ${category});
})
.catch((error) => {
console.error(“Error updating repeater:”, error);
});

$w("#repeater1").onItemReady(($item, itemData) => {
    $item("#button3").onClick(() => {
        wixData.get("Portfolio", itemData._id)
            .then((projectData) => {
                wixWindow.openLightbox("Lightbox", { 
                    gallery: projectData.gallery 
                });
            })
            .catch((error) => {
                console.error("Error fetching project data:", error);
            });
    });
});

}

I’ve also added this code into my Lightbox

import wixWindow from ‘wix-window’;

$w.onReady(function () {
const receivedData = wixWindow.lightbox.getContext();

if (receivedData && receivedData.gallery) {
    $w("#gallery1").items = receivedData.gallery.map((image) => {
        return { src: image.url };
    });
}

});

I’m not sure what’s not working. I don’t have any coding experience, I just have basic understanding and I’ve double checked Id’s and names.

2

You are using image.url

It should be image.src

if (receivedData && receivedData.gallery) {
  console.log("GALLERY_DATA",receivedData )
    $w("#gallery1").items = receivedData.gallery.map((image) => {
        return { src: image.src };
    });
}
});