Image in repeater to open in a Lightbox

Hi, I search forum and text all codes which I find here, but it’s didn’t work for me .
and I don’t want to use pro gallery . I create a repeater in Portfolio dynamic page and it’s connect to my database and in another side I create a Lightbox for show image which visitor wants to look it at large resolution but it’s doesn’t work as well .
It doesn’t matter which image is clicked, it will start showing from the first image

Can anyone help me please ?

If you’re using Velo to do this you’ll need to pass the lightbox context data that you can then use to set which image to display within the Lightbox’s code.

Send the lightbox data context when you open it with the data property: https://www.wix.com/velo/reference/wix-window/openlightbox

Get that data context and then use that to set the image you want in the lightbox: https://www.wix.com/velo/reference/wix-window/lightbox/getcontext

If you’re not asking about Velo/JavaScript and this question is about EditorX only then you should ask here: https://www.editorxcommunity.com/

Hi Anthony , Thank you for your answer.
Yes I’m using Velo to do this but I don’t know much about coding. I used your advice and I have the same problem again. This is the code I wrote. Is it possible to help me more?

I need help, can anyone help me?

What kind of help do you need?
Please open your own post, instead of bumping-up old ones.

I wrote this post 3days ago . I said my problem and
No one answered me. I didn’t get any results from Anthony advice because of my low knowledge in coding and I asked him to give more guidance if possible. When he didn’t answer, I sent a request for help again.

Ok, let’s say you have the following SETUP…

  1. You have a DATABASE → ID = myDatabase
  2. You have a page where you have your repeater (doesnt’t matter which page, even if it is a dynamic one). Your REPEATER has the ID = myRepeater.
    Your repeater is connected with your database, by a dataset.
  3. You have created a LIGHTBOX with the ID = myLightbox.

Now let’s do some CODE…

$w.onReady(async()=>{
  $w('#myDataset').onReady(()=>{
	$w("#repeatedContainer").onClick((event) => {
       let $item = $w.at(event.context);
       let clickedItemData = $item("#myDataset").getCurrentItem();
       console.log("Selected-Data: ", clickedItemData);
    });
  };  
});
repeatedContainer ---> can be a --> BUTTON INSIDE REPEATER

So you are already able to get the current selected data out of your REPATER.

What else do you need to do ???
Anthony gave you already the right direction…

Let’s implement it into our current generated code…
But first, we should think about what to code and what would be the flow?

  1. Clicking a button inside REPEATER → selection of currentItem.
  2. We got the data of the selecte data, now we want to send this whole data-package to our LIGHBOX.

That means, we want to send our clickedItemData over to the LIGHTBOX…

wixWindow.openLightbox("LightboxNameHere", clickedItemData);

Adding it to our CODE…

$w.onReady(async()=>{
  $w('#myDataset').onReady(()=>{
	$w("#repeatedContainer").onClick((event) => {
       let $item = $w.at(event.context);
       let clickedItemData = $item("#myDataset").getCurrentItem();
       console.log("Selected-Data: ", clickedItemData);
       wixWindow.openLightbox("Lightbox", clickedItemData);
    });
  });
});

The lightbox already should be opened now.

Now you need a second code on your LIGHBOX…

How to get the DATA on your LIGHBOX, sended from your page ?
And again, you look onto the provided links by Anthony…

Your Lighbox-Code then should look something like the following…

/*****************
 * Lightbox Code *
 *****************/

import { lightbox } from 'wix-window';

$w.onReady(function () {
  // recieving the data from your page into a variable...
  let receivedData = lightbox.getContext();

  $w('#greeting').text = receivedData.greeting.toUpperCase();
  $w('#subject').text = receivedData.subject.toUpperCase();

  $w('#blueButton').onClick(clickHandler);
  $w('#greenButton').onClick(clickHandler);
  $w('#pinkButton').onClick(clickHandler);
});

function clickHandler(event) {
  lightbox.close(event.target.label);
}

This code is just a simple example → you will need to modify it for your own needs.

!!! Good luck and happy coding !!!

!!! May the CODING POWER be with you !!!