Need help to connect and display Wix Pro Gallery in the lightbox by clicking the repeater

Ask the community
,
1

Hi I’m using the below script to load Wix Pro Gallery in the light box through the repeater

naming conventions and the fields details
Repeater name - > container9
Lightbox name - > ExGallery
on ExGallery (Lightbox)
Wix Pro Gallery → WPGallery
WPGallery connected to Exhibition database: Gallery (Media Gallery)
Text box → text12

Main database name → Exhibition
Dataset on both the sections is in name dataset1
Fields in database
→ gallery - (Media type) consists 4-6 product photos
→ projectName - (Text) Title of Project

Issue:- On clicking the repeater, Lightbox popup → text12 gets updated with respect to projectName, but there is no change to the Wix Pro Gallery. Please help in doing this in the right way. - Thanks in advance Sameer

The script I’m using on the Repeater page
import wixWindow from ‘wix-window’ ;
import wixData from ‘wix-data’ ;
export function container9_click ( event , $w ) {
wixWindow . openLightbox ( ‘ExGallery’ , $w ( ‘#dataset1’ ). getCurrentItem ());
}

The script I’m using in Light Box
import { lightbox } from ‘wix-window’ ;
$w . onReady ( () => {
let db = lightbox . getContext ();
$w ( “#text12” ). text = db . projectName ;
$w ( “#WPGallery” ). items = [{
“type” : “image” ,
“src” : db . gallery ,
}];
});

2

// PAGE-CODE…

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady( () => {
    let toSendData = $w('#dataset1').getCurrentItem(); console.log(toSendData);

    $w('#container9').onClick(()=>{wixWindow.openLightbox('ExGallery', toSendData);});
});




// LIGHTBOX-CODE...
import {lightbox} from 'wix-window';

$w.onReady( () => {
    let lbData = lightbox.getContext(); console.log("Recieved LightBox-Data: ", lbData);
    
    $w("#text12").text = lbData.projectName;
    
    $w("#WPGallery").items = [{
        "type": "image",
        "src": lbData.gallery,
    }];
});

The data you want to put into your GALLARY-Element must look like…

$w("#myGallery").items = [{
        "type": "image",
        "title": "A View",
        "src": "wix:image://v1/99bc1c6f66444769b531221214c885ac.jpeg/A%20View.jpeg#originWidth=3264&originHeight=2448"
        }, {
        "type": "video",
        "description": "Another beautiful view",
        "title": "Another View",
        "src": "wix:video://v1/80c05f_e2c524db1f264178a8558c92dbf76fb0/_#posterUri=80c05f_e2c524db1f264178a8558c92dbf76fb0f000.jpg&posterWidth=1920&posterHeight=1080"
    }];

An ARRAY filled with OBJECT-DATA.
Very similar to REPEATER-DATA.

Chek what you get in console as OUTPUT for …

console.log("Recieved LightBox-Data: ", lbData);