How to create dynamic lightboxes
PROJECTS USED
TAGS
SUITABLE FOR
Editor X, Classic editor
ABOUT
Using lightboxes on your Wix site? Learn how to display dynamic content inside them.
Layout
01. Add a repeater
02. Customize items
03. Add a lightbox
04. Give the lightbox a name
05. Turn off triggers for the lightbox
06. Customize the lightbox design
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Database
01. Add a collection to the site
02. Add a title, images, and color fields
03. Add content in the fields
04. Add a dataset to the page
05. Connect repeater elements to the dataset
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Velo
01. Turn on Dev Mode
02. Paste the code in the page panel
03. Edit component IDs
04. Paste code in the lightbox panel
05. Edit component IDs
//THIS IS PAGE CODE
import wixWindow from 'wix-window';
$w.onReady(function () {
$w("#myRepeater").onItemReady(($item, itemData, index) => {
$item("#myButton").onClick((event) => {
const data = {
image: itemData.image,
color: itemData.color
};
wixWindow.openLightbox("Dynamic Lightbox", data);
});
});
});
//THIS IS LIGHTBOX CODE
import wixWindow from 'wix-window';
$w.onReady(function () {
const receivedData = wixWindow.lightbox.getContext();
const image = receivedData.image;
const color = receivedData.color;
$w("#myImage").src = image;
$w("#myText").text = color;
});
