Dynamic lightboxes from home page onClick

Ask the community
,
1

I’m looking for a good way to create a Team page where each user gets an image in a gallery or grid or repeater layout on the home page, which links to a dynamic lightbox.

However, I can’t figure out how to connect the elements from my home page to the lightbox for the dynamic content. Could you point me in the right direction? Ideally, I’d like to use the new Repeaters to populate the team section and link to the dynamic lightbox, but I’m stuck on how to set up the code.

I’d be happy also to use a gallery or a manually placed image, as long as I can get the connection to the lightbox working.

2

Hey!

You can send data to your lightbox using wixWindow.openLightbox() , and get data back wix ’ close() '.
Let’s say you have a button to open the lightbox.
Page code:

export function button1_click(event, $w) {
	const data = {
		hello: 'world!',
		foo: 'bar'
	};
	wixWindow.openLightbox('lightbox', data).then(dataBack => {
		console.log(dataBack);
		console.log('Bye!');
	})
}

Lightbox code (assuming customised close button with onclick function):

import wixWindow from 'wix-window';

$w.onReady(function () {
	const context = wixWindow.lightbox.getContext();
	console.log(context);
});

export function closeButton_click(event, $w) {
	wixWindow.lightbox.close('Bye!');
}

Hope this helps,

Liran.

3

I was hoping to use this idea for something similar (but as a cheat to create a “video repeater” sort of) and have semi worked it out changing the code as needed, but I am missing 1 key part and wondered if there was an easy solution?

I have a collection called “videos” with a “video link” url field and a “thumbnail” image field.

On my main page I added a repeater containing the various “thumbnail” images which when clicked will open up a lightbox that is also connected to the “videos” collection and displays a video element.

Easy so far and totally works, except clicking any of the different repeater thumbnails will open the same video link in the lightbox (based on whatever the filter from the lightbox dataset is set to display of course).

So I guess I need a bit of extra code to change the filter of the lightbox dataset to a different video link when it is opened, if that is even possible? I’m really new to this so there may well be a good and obvious reason why it wouldn’t work but it could be a really useful workaround whilst you can’t directly add video elements to a repeater.

(Obviously a less cool way to do this without any of the “hassle” and code would be to just link the thumbnail to the URL in the database which would then open in a new window on click, but I like this pop up lightbox idea way better if possible as it keeps people on site and so on and feels like a part of the site itself rather than sending people away, especially if there are a LOT of videos in the database.)

Here’s what I have so far:
https://themusingsofmaars.wixsite.com/mysite

4

id you ever get a reply to this, or work ou how to do it at all?

i have a similar set up I’m trying to create. I have a bunch of individual buttons on a homepage and on each button OnClick i want to launch a lightbox which populates with product data pulled from a specific line in a dataset, i was hoping to reference the ID of the product so that OnClick knows which id to show…is this possible?