【solved】How to connect Gallery to lightbox

Ask the community
, ,
1

I have a store.
There is main image and gallery images.

Connect the dataset use repeater.

2278×1040 575 KB

When the button clicked the lightbox open.
I want show product gallery and the product descriptions.

It doesn’t work in my code.

◆repeater page code:

import wixData from “wix-data” ;
import wixWindow from ‘wix-window’ ;
var currentItem , ds ;

export function button6_click ( event ) {

  wixWindow . openLightbox ( 'light' ,  $w ( '#dataset1' ). getCurrentItem ()); 
}

◆lightbox page code;

import wixWindow from ‘wix-window’ ;

$w . onReady (() => {
let item = wixWindow . lightbox . getContext (); $w ( ‘#gallery1’ )

});

please help me.

2

The light box is open.
But the gallery image is not change

3

Please help me

4

Hi there :wave:t2: I do something similar on my site. It looks like you aren’t setting the elements to display what you want them to. Below is the code I use (of course, change the element IDs to match yours) , and the Lightbox code shows you how to connect the elements to your database field keys .

Good luck!

Page code:

import wixWindow from 'wix-window';

$w.onReady(() => {
    $w("#yourRepeater").onItemReady(($w, itemData, index) => {
        $w("#yourButton").onClick(() => {
            const repeaterItem = itemData;
            wixWindow.openLightbox("Name of Lightbox", repeaterItem);
        });
    });
});

Lightbox code:

import wixWindow from 'wix-window';

$w.onReady(() => {
let receivedData = wixWindow.lightbox.getContext();
  $w("#yourText").text = receivedData.name; // "name" is the field key
  $w("#gallery").items = receivedData.images; // "images" is the field key
  $w("#anotherText").text = receivedData.price; // "price" is the field key
  // etc, connect all relevant elements
});
5

Thank you @lmeyer

I tried this code but its not work…

err message

Could not get staticMediaUrls TypeError: Cannot read property ‘media’ of undefined

◆page code

752×886 244 KB

↑lightbox name

import wixWindow from ‘wix-window’ ;

$w . onReady (() => {
$w ( “#repeater1” ). onItemReady (( $w , itemData , index ) => {
$w ( “#image1” ). onClick (() => {
const repeaterItem = itemData ;
wixWindow . openLightbox ( “light” , repeaterItem );
});
});
});

◆lightboxcode

1942×1302 675 KB

2106×1238 281 KB

↑field key

import wixWindow from ‘wix-window’ ;

$w . onReady (() => {
let receivedData = wixWindow . lightbox . getContext ();
$w ( “#text18” ). text = receivedData . description ; // “name” is the field key
$w ( “#gallery1” ). items = receivedData . mediaItems ; // “images” is the field key
// etc, connect all relevant elements
});

6

@nanami Are you testing in preview or on the live site? I get the same “error” in preview mode but everything still works fine on the live site, with no error.

7

Also, if the elements on your Lightbox are connected to the database, you should disconnect them. Because we are filling the items using code. Otherwise it will always show the first item.

8

@lmeyer Thank you!!! It’s work!!!
I connected to database on Lightbox. so I dis connect it.
And It’s complete work!!!

One more question…
The text on the lightbox, looks HTML words.
I want to change to rich text display.

1604×1238 379 KB

9

I solved.

lightbox code changed.

text → html

$w . onReady (()=>{

let receivedData = wixWindow . lightbox . getContext ();
$w ( “#text18” ).html = receivedData . description ;
$w ( “#gallery1” ). items = receivedData . mediaItems ;
});

10

Hi. @LMeyer, Highly appreceated and thanks. I am stuck on something while trying your code. Can you please explain in this part → wixWindow . openLightbox ( “Name of Lightbox” , repeaterItem ); ← what repeaterItem means? What to exactly put there? plz help.