How to trigger a Lightbox with Specific Content from Containers

[samyak_prajapati]

Question:

How to trigger a Lightbox with Specific Content from Containers

Product:
Wix Studio Editor

Current Setup:
I have a simple page with three containers. Each container contains a specific image and some text. I have also created a lightbox.

Requirement:
I need each container to trigger the lightbox when clicked. The lightbox should display the same image contained in the clicked container (e.g., clicking on the first container with “Test Image 10” should open the lightbox displaying “Test Image 10”). This functionality should apply to all containers.

How can I achieve this?

What have you already tried:
I have already explored creating a dynamic page, using CMS, and the Wix Pro Gallery. However, these options do not meet my requirements, as I need a custom layout for these containers. I would like to ensure that clicking on the containers does not navigate to another page.

Additional information:
This functionality is similar to the “Expanded View” feature in the Wix Pro Gallery.

[DeanAyalon]

Page

import wixWindow from 'wix-window-frontend'

$w('#testImage10').onClick(() => {
    // data = whatever data you want to pass to the lightbox
    wixWindow.openLightbox('lightboxName', data)
})

Lightbox

import { lightbox } from 'wix-window-frontend'
const data = lightbox.getContext()

That’s how you pass data from a page to a lightbox being opened, you can use this for whatever custom functionality you’d like

[samyak_prajapati]

@DeanAyalon I do not know coding. I pasted your code in it and it didn’t work, so I asked Wix AI which came up with this and I think it’s similar to yours.

Code for the Page:

Container ID: #sketchbox080
Image ID (inside the container): #image80

import { openLightbox } from 'wix-window-frontend';

$w('#sketchbox080').onClick(async () => {
    const imageSrc = $w('#image80').src;
    await openLightbox('lightbox01', { imageSrc });
});

Code for the Lightbox:

Lightbox ID: #Lightbox01
Image ID (inside the lightbox): #lightboximage01
(the image inside the lightbox should change as per which container is clicked)

import { lightbox } from 'wix-window-frontend';

$w.onReady(() => {
    // Get the data passed to the lightbox
    const receivedData = lightbox.getContext();
    // Set the image source in the lightbox
    $w('#Lightboximage01').src = receivedData.imageSrc;
});

[codequeen]

So are you saying you found your solution and it worked?

Or are you still having issues implementing your code?

[samyak_prajapati]

@codequeen No, it’s still not working. I suspect there might be minor issues that could be resolved by someone with coding expertise.

[codequeen]

@samyak_prajapati

lightbox01

Is the actual name of your lightbox? Like …… My Lightbox.

To open a lightbox via code you need the name of the lightbox not the ID of the lightbox container inside of the lightbox after the lightbox is open.

[Mark_Hunte]

To illustrate @codequeen answer

For the Page code:

---

For the Lightbox you will need to have an existing Image element inside it…

When the code runs that existing images src will be replaced.

You will not see the change.
But not when using preview mode, light boxes can load slowly.

[samyak_prajapati]

Yes @Mark_Hunte , My Lighbox’s name and its ID, both are same: ‘lightbox01’. I also have an image element inside it. ( ID : lightboximagex1 ).

Thanks to you all!!. The code is mostly working now. Clicking any image triggers the lightbox.

However, when I scroll down and then click an image, the page automatically scrolls back to the top for some reason. Try it.

Page link: https://sainli21111996.wixstudio.com/betawebsite/process

import { openLightbox } from 'wix-window-frontend';

$w('#sketchbox080').onClick(async () => {
   
    const imageSrc = $w('#image80').src;
    await openLightbox('lightbox01', { imageSrc });
});

For Lightbox

import { lightbox } from 'wix-window-frontend';

$w.onReady(() => {
    // Get the data passed to the lightbox
    const receivedData = lightbox.getContext();
    // Set the image source in the lightbox
    $w('#lightboximagex1').src = receivedData.imageSrc;
});

[Pratham]

@samyak_prajapati

However, when I scroll down and then click an image, the page automatically scrolls back to the top for some reason. This is happening only in Safari Browser. Try it.

This is happening for some images on Chrome too.

Make sure that the Link property for all the images is set to Not Connected.

[samyak_prajapati]

@Pratham What’s is Link property? Could you tell me where to find this setting?

[Pratham]

Make sure this is set to None.

Wix Editor: Adding a Link to an Element | Help Center | Wix.com

[samyak_prajapati]

@Pratham Yes. Link property for all the images is set to Not Connected .