Single image lightbox

Ask the community
4

Not sure what kind of design you are aiming for, and if this is the way to go about it, But here’s how to do it as best I understand from your description.

At the top of your page code add this (Activate Dev Tools)

import wixWindow from 'wix-window';

In your page code, inside the constraints of the $w.onReady(function enter the following:

$w('Image').onClick( (event) => {
    let img = event.target.src;
    wixWindow.openLightbox("Name_Of_Lightbox", {
        source: img
    });
}

Change the Name_Of_Lightbox to the name of your lightbox

Then in the lightbox, add a single image element, and choose an ID for it in the code panel

760×344 15.8 KB

Then in the Lightbox code panel, enter this at the top:

import wixWindow from 'wix-window';

and inside the constraints of the $w.onReady(function :

let received = wixWindow.lightbox.getContext();
$w('#imageName').src = received.source;

change the imageName to the id you gave your image

This should work, hopefully :slight_smile:

Note, this will open every image in your page in the lightbox upon clicking (including images you did not intend for)
There are various ways to specify exactly which images to include in the function, so take this more as a proof of concept than a tailor made solution.