Question:
As per the title, I’m trying to build a ProGallery (auto slider) that opens a lightbox with another ProGallery (slideshow) inside that displays more related images depending on what image was selected. Is this possible or is there a more simple way to achieve this?
Product:
Wix Studio
What are you trying to achieve:
When a user clicks on one of the images in the ProGallery on the page it should open a lightbox with another ProGallery inside that loads more images relating to the image selected.
The way I’m linking these to galleries is through a description field in each collection named galleryKey. Like this:
What have you already tried:
I’ve tried to use some custom code from chat to make this implementation work.
Page code:
import wixWindow from 'wix-window';
$w.onReady(() => {
$w('#GalleryThumbnails').onReady(() => {
$w("#gallerySlider").onItemClicked((event) => {
const clickedItem = event.item;
const galleryKey = clickedItem.description; // <-- now using .description!
wixWindow.openLightbox("GalleryLightbox", { galleryKey });
});
});
});
Lightbox code:
import wixWindow from 'wix-window';
import wixData from 'wix-data';
$w.onReady(async () => {
const receivedData = wixWindow.lightbox.getContext();
const galleryKey = receivedData.galleryKey; // <- This must match the one you passed
console.log('Received galleryKey:', galleryKey); // <-- debug to make sure it's arriving
const result = await wixData.query("GalleryImages")
.eq("galleryKey", galleryKey) // <- critical: must filter using the galleryKey
.find();
if (result.items.length > 0) {
const mediaItems = result.items[0].imageGallery; // <-- must match CMS field name
if (Array.isArray(mediaItems) && mediaItems.length > 0) {
console.log('hello');
$w("#lightboxGallery").items = mediaItems.map(item => ({
src: item.src,
type: 'image',
title: item.title || "",
description: item.description || ""
}));
} else {
console.warn('No media items found for galleryKey:', galleryKey);
}
} else {
console.warn('No record found in GalleryImages for galleryKey:', galleryKey);
}
});
My quick fix is going to be to just create a separate lightbox for each property instead of dynamically changing the content in one lightbox. However I’d like to try and get the one lightbox solution working if possible.
