How to add a dynamic Wix lightbox?

Enhancing user interaction on your Wix website can be effectively accomplished by incorporating dynamic lightboxes. These lightboxes can display customized content based on user actions, such as clicking on specific elements. Below, we delve into how to set up and manage dynamic lightboxes using Velo.

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 requirements. 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.

Implementing the Lightbox Trigger

Page Code:

To initiate a lightbox, you must import the 'wix-window' module to utilize the lightbox functionality provided by Wix. The code snippet begins by preparing the function that will trigger the lightbox:

import wixWindow from 'wix-window';

$w.onReady(function () {
    // Ready the page for interactions
});

export function teamRepeater_itemReady($item, itemData, index) {
    $item("#doodleImg").onClick(() => {
        const repeaterItem = itemData;
        wixWindow.openLightbox("team", repeaterItem);
    });
}

Explanation:

• Module Import: The script starts by importing wixWindow to access lightbox functions.

• Event Listener: An onClick event is set on an element (e.g., an image with the ID doodleImg). When clicked, it triggers the lightbox.

• Dynamic Data Handling: The itemData from a repeater (e.g., a list displaying team members) is used to send specific data to the lightbox, allowing it to display relevant content based on the item clicked.

Lightbox Code:

Inside the lightbox, the data received from the page trigger is utilized to dynamically populate elements like text and images:

import wixWindow from 'wix-window';

$w.onReady(function () {
    let receivedData = wixWindow.lightbox.getContext();
    $w("#description").text = receivedData.description;
    $w("#media").items = receivedData.gallery;
});

Explanation:

• Data Retrieval: getContext() fetches the data passed to the lightbox, which is stored in receivedData.

• Content Update: The lightbox updates its content dynamically. For instance, receivedData.description and receivedData.gallery are used to populate a text element and a media gallery, respectively.

Best Practices and Tips

• Test Thoroughly: Always test the functionality in preview mode before publishing to ensure the dynamic content loads correctly.

• Debugging: Utilize console logs within your Velo code to debug and verify the correct data is being passed and received.

• User Experience: Ensure the lightbox does not disrupt the user experience but enhances it, providing relevant information without overwhelming the user.

By following these steps, you can create a more engaging and interactive experience on your Wix site, leveraging the power of Velo to customize lightboxes dynamically.

Happy coding!