Create Lightbox With Video from Repeater

Ask the community
,
1

Hello, I would like to create a button in my repeater that will pop up a lightbox that shows a video from my database. I have looked around and am not sure where to even begin. Any help is appreciated.

2

This is my current code

Button:
import wixWindow from ‘wix-window’ ;

export function button10_click ( event , $w ) {
let referencevid = $w ( ‘#vid1’ ). src
console . log ( referencevid )
wixWindow . openLightbox ( ‘Media’ , referencevid )
}

Lightbox:
import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;

let popup = wixWindow . lightbox . getContext ();
console . log ( ‘popup’ )
console . log ( popup )

$w . onReady ( function () {
$w ( “#dataset1” ). onReady (() => {
$w ( “#dataset1” ). setFilter ( wixData . filter (). eq ( “title” , popup ))
. then (() => {
let currentItem = $w ( ‘#dataset1’ ). getCurrentItem ();

            $w ( '#lbvid' ). src  =  currentItem . videoV 

        }) 
})

})

I can click the button and a video comes but not the one linked to the database.

3 
$w.onReady(function(){
	$w("#dataset1").onReady(()=>{
		$w("#dataset1").setFilter(wixData.filter()
		.eq("title",popup))
		.then(()=>{
			let curItem=$w('#dataset1').getCurrentItem();
			$w('#lbvid').src=curItem.videoV;
		});
	});

	//BUTTON-10 <<------ must be INSIDE your REPEATER !!!	

	$w('#yourRepeaterIDhere').onItemReady(($i,iData, i)=>{
		$i('#button10).onClick(()=>{
			console.log("Clicked-Item-Data: ",  iData);
			console.log("Clicked-Item-Data: ",  iData.title);
			console.log("Clicked-Item-Data: ",  iData._id);
		});
	});
});

//now take a look what you get as RESULTS inside --> CONSOLE