Single image lightbox

Ask the community
1

I know many people have asked for this, but I’m assuming that there is still no direct way to make a single image lightbox when clicked?
Like others I’m designing a portfolio site so it’s a lot of images to have single light boxes for. I’ve linked images to one lightbox that I’ve added a gallery so they can scroll through but again, as others have mentioned this is not ideal a they have to scroll through to get to the image they initially clicked on if it was not the first image.
If anyone has found an easy work around, I’m all ears.
thanks

2

I take it you mean by you click on the image and it expands?
If so the Pro Gallery let’s you customize the expand mode: https://support.wix.com/en/article/wix-pro-gallery-customizing-the-expand-mode-for-your-gallery

3

Thanks.
Yes I’ve put a pro gallery in the light box so when you click on an image it opens to the pro gallery but that’s far from ideal as you start at the begining of the pro gallery each time instead of seeing the picture you clicked on. and the pre-set gallery layouts aren’t what I want for the full page.
It would just be great if EditorX added a feature to single images where when you click on the image it expands to full page.

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.

5

Thank you!
I’ll keep in mind if using the gallery option starts to be too heavy for the site.
Just seems that EditorX should make it an option - when you click on a single image it expands to full page mode.
But again, thank you!

6

Thanks for the feedback Serena. I’ll be forwarding that feedback to the team. :grinning: