# Pass data from repeater into dynamic lightbox

**URL:** <https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [September 30, 2018, 4:05pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961 "2018-09-30T16:05:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![simon-gouldman](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon-gouldman/32/2655_2.png) [@simon-gouldman](https://forum.wixstudio.com/u/simon-gouldman)\
**Post date:** [September 30, 2018, 4:05pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/1 "2018-09-30T16:05:47Z")

</div>

I am creating a team page with repeaters which contain images from a database.  
When user clicks image I want lightbox to open, displaying image + biography for that databse row

So presumably it needs to

1. recognise which data item is in the repeater
2. find that data item from the database
3. retrieve image + biography fields for that data item
4. open lightbox with that data.
5. lightbox closes on clicking close

I have been reading round and though other people have similar queries, I dont see how to bring these elements together so I think the simplest thing now is just to ask; what should the code be?

datacollection is “Team”  
Image field is labeled ‘image"  
biography field is labelled "Biography’  
clicking the repeater creates event: container2\_click

Many thanks

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [September 30, 2018, 11:12pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/2 "2018-09-30T23:12:02Z")

</div>

Hi Simon:

The repeater is driven from a dataset which links your data collection to the page.  
Each image in the repeater needs to be connected to an onClick function that wix will scope to the  
dataset item used to display the image.

When the image is clicked the onClick function passes an event argument that contains a context property. You use this context property to access the specific dataset item in the repeater for your lightbox.

When you open the light box simply pass the dataset item to the openLightbox as its data parameter.

You can then access the data in your lightbox by accessing the lightbox.getContext().  
So in code

you need a dataset which we will call TeamDataset.  
You can use the container2\_click if you want but connecting to the image may make more sense either way this should still work

```javascript
import wixWindow from 'wix-window';

external function container2_click(event) {
    // Get the repeater context element scope
    let scope = $w.at(event.context);
    let teamMemberRecord = scope('TeamDataset').getCurrentItem();
    wixWindow.openLightbox('TeamMemberBiography', teamMemberRecord);
}

```

Then in your lightbox in onReady…

```javascript
import wixWindow from 'wix-window';

$w.onReady(() => {
    let teamMemberRecord = wixWindow.lightbox.getContext();
    if (teamMemberRecord) {
        // Extract image and biography from record
        let image = teamMemberRecord['image'];
        // assume property is biography this should be whatever this
        // field is called in the data collection
        let biography = teamMemberRecord['biography']; 
        
        // Add these values to your UI elements...
}

```

Hope this helps  
Steve

---

<div class="post-metadata">

**Author:** ![simon-gouldman](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon-gouldman/32/2655_2.png) [@simon-gouldman](https://forum.wixstudio.com/u/simon-gouldman)\
**Post date:** [October 1, 2018, 8:36am UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/3 "2018-10-01T08:36:22Z")

</div>

Hi Steve

Firstly thank you so much for this help.

The line: **external function container2\_click(event) {** gives parsing error: unexpected token function.  
-Should it be export function instead?

then the line let **teamMemberRecord = scope(‘TeamDataset’).getCurrentItem();** gives TeamDataset is not a valid selctor. (the dataset exists and is named exactly as the quotes)

Any ideas?

Simon

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [October 1, 2018, 11:38am UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/4 "2018-10-01T11:38:08Z")

</div>

Hi Simon:

Yes sorry good catch export is the correct verb.

So as I mentioned in my post I don’t know what your page looks like so it isn’t clear to me what the name of the dataset is that you are using to drive the repeater. If you have used the default name that wix gives you then “#TeamDataset” probably needs to be ‘#dataset1’. Basically it needs to be what drives the repeater data.

Hope this helps  
Steve

---

<div class="post-metadata">

**Author:** ![simon-gouldman](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon-gouldman/32/2655_2.png) [@simon-gouldman](https://forum.wixstudio.com/u/simon-gouldman)\
**Post date:** [October 1, 2018, 5:52pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/5 "2018-10-01T17:52:49Z")

</div>

Hi I have finally cracked it. My solution came as follows;

I noticed that although the collection and dataset were named as ‘Team’, that the icon for the dataset on my repeaters page still had the name #dataset1, hence I updated the dataset name to #dataset1 in the code.

I also realised that I needed to update my Lightbox ID to Biography in its properties, even though the Lightbox was named Biography.

Many thanks again for your help getting me started. I wouldn’t have been able to do it without that help.

Simon

---

<div class="post-metadata">

**Author:** ![simon-gouldman](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon-gouldman/32/2655_2.png) [@simon-gouldman](https://forum.wixstudio.com/u/simon-gouldman)\
**Post date:** [October 1, 2018, 6:06pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/6 "2018-10-01T18:06:45Z")

</div>

Hi I spoke too soon. The lightbox opens but it always pulls in the first record. Any ideas??

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [October 1, 2018, 11:01pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/7 "2018-10-01T23:01:56Z")

</div>

Simon:

Make sure you are using the context from the event that fires on the container2\_click

> let scope = $ [w.at](http://w.at/) (event.context);  
> don’t use $w because it won’t map to the repeater item that you need. This may be why you are always seeing the first item being passed to the lightbox.

What is the URL of your page? With access to the page it will be easier to debug.  
Another thing you can do is use console.log to print the values of objects being passed to and returned from the functions to make sure they are being used correctly.

So for example add one before the openLightbox

```javascript
console.log('teamMemberRecord = '+JSON.stringify(teamMemberRecord));
wixWindow.openLightbox('TeamMemberBiography', teamMemberRecord);

```

and after the lightbox loads

```javascript
let teamMemberRecord = wixWindow.lightbox.getContext();
console.log('teamMemberRecord = '+JSON.stringify(teamMemberRecord));

```

The output from these log messages will help figure out what is going wrong.

Cheers  
Steve

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [October 4, 2018, 8:38pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/8 "2018-10-04T20:38:13Z")

</div>

Hi Simon:

I just looked at your page code and the problem you have with the lightbox is you are not assigning anything to the elements on the lightbox page.

The data is being passed to the Lightbox from the page you just need to load up the lightbox elements!

Steve

---

<div class="post-metadata">

**Author:** ![simon-gouldman](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon-gouldman/32/2655_2.png) [@simon-gouldman](https://forum.wixstudio.com/u/simon-gouldman)\
**Post date:** [October 4, 2018, 9:52pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/9 "2018-10-04T21:52:53Z")

</div>

Hi.Steve

The Lightbox elements have already been connected to the fields in the dataset in the standard way.  
How then do we get the data sent to the Lightbox to load up in those elements?

Is it perhaps a problem with this bit?  
// Extract image and biography from record  
**let** image = teamMemberRecord[‘image’];  
// assume property is biography this should be whatever this  
// field is called in the data collection  
**let** biography = teamMemberRecord[‘biography’];  
// Extract image and biography from record

Should ‘let image’ be replaced with ‘let #image8’? But that got me a parsing error and having ‘image8’ did not help either.

Simon

---

<div class="post-metadata">

**Author:** ![simon-gouldman](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/simon-gouldman/32/2655_2.png) [@simon-gouldman](https://forum.wixstudio.com/u/simon-gouldman)\
**Post date:** [October 5, 2018, 6:42am UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/10 "2018-10-05T06:42:55Z")

</div>

Ok now resolved. Thank you Steve!

---

<div class="post-metadata">

**Author:** ![hudallah](https://avatars.discourse-cdn.com/v4/letter/h/96bed5/32.png) [@hudallah](https://forum.wixstudio.com/u/hudallah)\
**Post date:** [November 22, 2019, 3:56pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/11 "2019-11-22T15:56:15Z")

</div>

@stcroppe@simon67263@simon-gouldman  
Hello,  
i would like to do the same thing but my lightbox is not opening.

Please help me out  
export function button3\_click(event) {  
//Add your code for this event here:  
**let** scope = $w.at(event.context);  
**let** currentPost = scope(‘#dataset1’).getCurrentItem();  
wixWindow.openLightbox(“LBcomment”, currentPost);  
}  
Thank you very much

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [November 22, 2019, 6:24pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/12 "2019-11-22T18:24:50Z")

</div>

Is the button3 event still connected in the editor? Sometimes the editor might forget the binding. I generally don’t use the element binding as a result and set the even handler in onReady.

$w.onReady(() =\> {  
$w(“#button3”).onClick(button3\_click);  
});

> **[Button - Velo API Reference - Wix.com](https://www.wix.com/velo/reference/$w/button)**
>
> A button on your site.

---

<div class="post-metadata">

**Author:** ![hudallah](https://avatars.discourse-cdn.com/v4/letter/h/96bed5/32.png) [@hudallah](https://forum.wixstudio.com/u/hudallah)\
**Post date:** [November 25, 2019, 11:56am UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/13 "2019-11-25T11:56:39Z")

</div>

@stcroppe  
hello, thank you for the feedback.  
I have added the code below in two forms

like this:  
$w.onReady(() =\> {  
$w(‘#button3’).onClick(button3\_click);  
});  
export function button3\_click(event) {  
//Add your code for this event here:  
let scope = $w.at(event.context);  
let currentPost = scope(‘#dataset1’).getCurrentItem();  
wixWindow.openLightbox(“LBcomment”, currentPost);  
}

and like this:

$w.onReady(() =\> {  
$w(‘#button3’).onClick(button3\_click);  
let scope = $w.at(event.context);  
let currentPost = scope(‘#dataset1’).getCurrentItem();  
wixWindow.openLightbox(“LBcomment”, currentPost);  
});  
though here, it says events is not defined error.

But they are both not working.

below is the picture of my editor. the page is main page (search) and the button is labeled comment. The light box is comment (sidebar).

 ![](https://us1.discourse-cdn.com/wix/original/3X/0/1/01668312bf5d3ae41efb881886c613c675eb778b.png)

Can you please show me how to get it right?

here is the link to my editor  
[https://editor.wix.com/html/editor/web/renderer/edit/c04be7a4-7702-42e7-b5c5-eb45db15c154?metaSiteId=5140d697-5b57-4748-ad9d-cab5cf80ed76&editorSessionId=37f34c70-15ba-4bdf-aa29-a315a69cd961&referralInfo=my-account](https://editor.wix.com/html/editor/web/renderer/edit/c04be7a4-7702-42e7-b5c5-eb45db15c154?metaSiteId=5140d697-5b57-4748-ad9d-cab5cf80ed76&editorSessionId=37f34c70-15ba-4bdf-aa29-a315a69cd961&referralInfo=my-account)

Thank you very much

---

<div class="post-metadata">

**Author:** ![stcroppe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stcroppe/32/4559_2.png) [@stcroppe](https://forum.wixstudio.com/u/stcroppe)\
**Post date:** [November 25, 2019, 9:43pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/14 "2019-11-25T21:43:34Z")

</div>

Can you do a screen shot of the page list that includes your light box pages? Also please share all of the code in the page your button is on and the code for the light box.

---

<div class="post-metadata">

**Author:** ![hudallah](https://avatars.discourse-cdn.com/v4/letter/h/96bed5/32.png) [@hudallah](https://forum.wixstudio.com/u/hudallah)\
**Post date:** [December 2, 2019, 4:00pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/15 "2019-12-02T16:00:00Z")

</div>

Hello,  
I am sorry for my absence and i really appreciate you helping me.

 ![](https://us1.discourse-cdn.com/wix/original/3X/0/8/080b0e79935a408a9c3884dbf351b01435f81476.jpeg)

from the picture above, i have highlighted the following,  
1 - the current page, 2- the lightbox named comment, 3- the onlick event.

The picture below shows the lightbox,  
1- is the current lightbox and 2 is the page code

 ![](https://us1.discourse-cdn.com/wix/original/3X/a/9/a9d187cc468628cdfe481da1201b18f920d2478d.png)  
P.S the editor link is in my post above in case you need to look at it yourself.  
Thank you very much. I look forward to hearing from you  
regards,

---

<div class="post-metadata">

**Author:** ![hudallah](https://avatars.discourse-cdn.com/v4/letter/h/96bed5/32.png) [@hudallah](https://forum.wixstudio.com/u/hudallah)\
**Post date:** [December 10, 2019, 9:38am UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/16 "2019-12-10T09:38:24Z")

</div>

@stcroppe hello,  
I hope you are still around. I am waiting for your help.  
please.  
Thank you.

---

<div class="post-metadata">

**Author:** ![hudallah](https://avatars.discourse-cdn.com/v4/letter/h/96bed5/32.png) [@hudallah](https://forum.wixstudio.com/u/hudallah)\
**Post date:** [December 18, 2019, 4:06pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/17 "2019-12-18T16:06:36Z")

</div>

@stcroppe  
Hello,  
Anyone? help please

---

<div class="post-metadata">

**Author:** ![mohsenchow](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/mohsenchow/32/23302_2.png) [@mohsenchow](https://forum.wixstudio.com/u/mohsenchow)\
**Post date:** [September 8, 2020, 6:51am UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/18 "2020-09-08T06:51:10Z")

</div>

How did your resolve this Simon?

---

<div class="post-metadata">

**Author:** ![ailingrawe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ailingrawe/32/27450_2.png) [@ailingrawe](https://forum.wixstudio.com/u/ailingrawe)\
**Post date:** [March 26, 2021, 1:10pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/19 "2021-03-26T13:10:03Z")

</div>

Hi! I’m trying to do the same, but I can’t make it work… Anyone there to help me??

---

<div class="post-metadata">

**Author:** ![ailingrawe](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ailingrawe/32/27450_2.png) [@ailingrawe](https://forum.wixstudio.com/u/ailingrawe)\
**Post date:** [March 26, 2021, 1:11pm UTC](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961/20 "2021-03-26T13:11:08Z")

</div>

Hi! I’m trying to do the same, but I can’t make it work… Anyone there to help me??

[Next page](https://forum.wixstudio.com/t/pass-data-from-repeater-into-dynamic-lightbox/3961.md?page=2)