How to add dynamic lightbox?

Hi Guys,

We will now see how to add a dynamic lightbox to the Wix Site. For this exercise, we see how I mapped a dynamic lightbox to display team members' data.

What did I use?

• Datasets

  • Team Members

• Repeater

• Lightbox

Components used for repeater:

• Profile Image

• Doodle Image - Clickable component, can be anything as per your requirement

• Title

• Description

• Gallery

Dataset fields will be as shown below:

Team Member Dataset

The repeater has to be designed as per your requirement. In the below image the Doodle Image is transparent i.e. visible on hover only.

Repeater Layout

Now you will need to design a lightbox that will be linked to the respective item via Velo code.

Team Lightbox

Now comes the code where we will command the lightbox to fetch the details of the team members based on the item that has been clicked.

Page Code:

import wixWindow from 'wix-window'; $w.onReady (function () { }); export function teamRepeater_itemReady($w,itemData,index) { $w("#doodleImg").onClick(()=>{ const repeaterItem = itemData; wixWindow.openLightbox("team",repeaterItem) }) }

Lightbox Code:

import wixWindow from 'wix-window'; $w.onReady(function () { let receivedData = wixWindow.lightbox.getContext() $w("#description").text = receivedData.description $w("#media").items = receivedData.gallery });

Explanation:

Page Code:

Here we are calling the lightbox i.e. open on an action that has been performed

import wixWindow from 'wix-window';

The export function has to be enabled from the dev panel, if you copy-paste the code as is and do not activate the item_Ready on the repeater the code will not work. Once activated the default command will be as follows:

export function teamRepeater_itemReady($item)

We have to update the command as follows: export function teamRepeater_itemReady($w,itemData,index) {

In the below command we are passing a command to perform an onClick which will open the lightbox.

$w("#doodleImg").onClick(()=>{

Here we are setting the value of the item as constant which will help the code to understand which data has to be fetched on click of the item respectively. const repeaterItem = itemData;

Finally, onClick open the lightbox and get the data from the reference set as constant. There are 2 parts here - One is the name of the lightbox & the second is the data reference value. wixWindow.openLightbox("team" [this is the name of the lightbox], repeaterItem [this is the referenced value]) }) }

Lightbox Code:

import wixWindow from 'wix-window'; $w.onReady(function () {

The let function is where we are defining what has to be fetched with the reference to the value set in the page code. let receivedData = wixWindow.lightbox.getContext() In our example, we have placed 2 components in the lightbox i.e. a description and a media (gallery). The receivedData.description helps the code to fetch the exact details based on the field id set in the team dataset.

$w("#description").text = receivedData.description $w("#media").items = receivedData.gallery });

Happy coding!