# Image in repeater to open in a Lightbox

**URL:** <https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [May 1, 2023, 7:00pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392 "2023-05-01T19:00:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![aidinpourkouchak](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aidinpourkouchak/32/37283_2.png) [@aidinpourkouchak](https://forum.wixstudio.com/u/aidinpourkouchak)\
**Post date:** [May 1, 2023, 7:00pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392/1 "2023-05-01T19:00:53Z")

</div>

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

 ![](https://us1.discourse-cdn.com/wix/original/3X/1/e/1e7d75ef5442911464e42654f030de500f8e1e74.jpeg)

 ![](https://us1.discourse-cdn.com/wix/original/3X/3/c/3c73f2a63f7196216bc35aa3442e753a4dbf2705.jpeg)

Can anyone help me please ?

---

<div class="post-metadata">

**Author:** ![anthony](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/anthony/32/79536_2.png) [@anthony](https://forum.wixstudio.com/u/anthony)\
**Post date:** [May 2, 2023, 2:16pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392/2 "2023-05-02T14:16:47Z")

</div>

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](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](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/](https://www.editorxcommunity.com/)

---

<div class="post-metadata">

**Author:** ![aidinpourkouchak](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aidinpourkouchak/32/37283_2.png) [@aidinpourkouchak](https://forum.wixstudio.com/u/aidinpourkouchak)\
**Post date:** [May 2, 2023, 6:39pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392/3 "2023-05-02T18:39:37Z")

</div>

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?

 ![](https://us1.discourse-cdn.com/wix/original/3X/9/8/9858402bfe9257ef2bd9b9d6e9bb7fa992111118.png)

 ![](https://us1.discourse-cdn.com/wix/original/3X/d/e/de83616784adfaa5a7b4b6e314e289a4d38ed4be.png)

---

<div class="post-metadata">

**Author:** ![aidinpourkouchak](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aidinpourkouchak/32/37283_2.png) [@aidinpourkouchak](https://forum.wixstudio.com/u/aidinpourkouchak)\
**Post date:** [May 3, 2023, 7:21pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392/4 "2023-05-03T19:21:56Z")

</div>

I need help, can anyone help me?

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [May 4, 2023, 2:54pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392/5 "2023-05-04T14:54:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aidinpourkouchak](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/aidinpourkouchak/32/37283_2.png) [@aidinpourkouchak](https://forum.wixstudio.com/u/aidinpourkouchak)\
**Post date:** [May 4, 2023, 5:19pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392/6 "2023-05-04T17:19:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [May 4, 2023, 7:32pm UTC](https://forum.wixstudio.com/t/image-in-repeater-to-open-in-a-lightbox/392/7 "2023-05-04T19:32:20Z")

</div>

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…

```javascript
$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);
    });
  };  
});

```

```javascript
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…

 ![](https://us1.discourse-cdn.com/wix/original/3X/4/2/42cf72d900fb0661f53aba82bd1df0525446280d.png)

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…

```javascript
wixWindow.openLightbox("LightboxNameHere", clickedItemData);

```

Adding it to our CODE…

```javascript
$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…

```javascript
/ *****************
 * 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 !!!

 ![](https://us1.discourse-cdn.com/wix/original/3X/5/0/50112b05874f25689904385f1f62d6e89928863e.png)

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