Make Database Connected Gallery Links Launch Lightbox

Ask the community
,
1

I have a grid gallery on my site connected to a database. I also have a lightbox template connected to the same database intended to provide further information about the individual images when a user click on the image.

I am not able to figure out how to link the gallery images to the lightbox. Any help would be appreciated.

I have found a few links that seem to help with this, but not being a coder, it is unclear to me where and how the code needs to be modified.

Here is one link for example that may be similar to what I am looking for, but I have no idea how to make it work

2

I had a similar situation, but not exactly the same. I had a product gallery that leads to a product page that contains a “expand” button to a lightbox that loaded higher resolution images of the product.

Here’s what I figured out:

“expand” button onClick code:

import wixWindow from ‘wix-window’;
export function button_click(event, $w) {
wixWindow.openLightbox(‘LightBoxName’, $w(‘#dynamicDataset’).getCurrentItem());
}

openLightbox() needs two things, the name of the lightbox to open and the data you want to pass it. In my case I needed to tell it which item in my collection thus, getCurrentItem().

Here’s my code for the lightbox:

import {lightbox} from ‘wix-window’;
$w.onReady(() => {
let item = lightbox.getContext();
$w(‘#galleryFullSizeImages’).items = [
{src: item.frontImage},
{src: item.closeImage},
{src: item.backImage}
];
});

Ok so the import here takes the data passed from the button, and the getContext(); lets me use it. In my case I assigned it to item, and used it to stick images into a gallery inside the lightbox. But you can connect to whatever elements you have in your lightbox using code.

I’m also not a true “coder”… my experience comes from a few C++ courses back in college and lots of trial and error and self teaching through resources like this forum. Keep an eye out for responses from people with a star next to their name, since they’re admins from Wix. They’ve been very good at helping me figure stuff out as long as you’re specific. Post code that needs checking, link to your test page, etc. Makes their job a lot easier to sort out.

3

Thank you I will try this.

4

If you don’t mind me asking, where do I put the

import wixWindow from ‘wix-window’;
export function button_click(event, $w) {
wixWindow.openLightbox(‘LightBoxName’, $w(‘#dynamicDataset’).getCurrentItem());
}

There does not seem to be a place in the wix system to add something like this, at least not as a link.

Kevin

5

is this galleryFullSizeImages a field in your database?

6

Hi Kevin,

You can find a tutorial for working with buttons here

And from the the context, galleryFullSizeImages is the gallery that is placed inside the lightbox.

7

Hi guys I am trying to open a dynamic lightbox from a dynamic repeater. My code is below

import wixWindow from ‘wix-window’;

export function reviewbutton_click(event, $w) {
wixWindow.openLightbox(‘patientlightbox’);
}

Any help would be appreciated.

Mark