# Dynamic Lightbox getContext PLEASE HELP - I AM STUCK

**URL:** <https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [June 21, 2019, 8:55pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959 "2019-06-21T20:55:17Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 21, 2019, 8:55pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/1 "2019-06-21T20:55:17Z")

</div>

SO I am brand new to Corvid (and mostly very new to coding in general). I have created a database with images where each image has a title, description, date and location. I have a ProGallery that displays the images dynamically from the database. When you click on an image it takes you to a dynamic page with shows the image larger and has additional data. What I want to do is when you click on the image on the dynamic page it will open a lightbox that has certain data from this particular image already inserted into a text field.

Thus far I have managed to get the lightbox to open using the following code added

```javascript
import wixWindow from 'wix-window'
import wixData from 'wix-data'

export function gallery1_itemClicked(event) {
    wixWindow.openLightbox('myLightBox')

```

now I am completely stuck with how to make certain data from the page go into a lightbox field…

I understand that there needs to be code added to the lightbox -

```javascript
import wixWindow from 'wix-window';
import wixData from 'wix-data'
 
$w.onReady( function () {
 let text = wixWindow.lightbox.getContext();

```

but I can’t figure out how and where to define what text needs to be taken from the page and how to insert it into a particular field in the lightbox.

I read the API documentation on the getContext command but I don’t understand how to implement it… any guidance would be very much appreciated

---

<div class="post-metadata">

**Author:** ![stevesoftwareservice](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stevesoftwareservice/32/10638_2.png) [@stevesoftwareservice](https://forum.wixstudio.com/u/stevesoftwareservice)\
**Post date:** [June 21, 2019, 10:09pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/2 "2019-06-21T22:09:11Z")

</div>

You need to add an object containing the data to the openLightbox call.

let contextData = {‘infoForLightbox’:’hello light box!’};  
wixWindow.openLightbox(‘myLightBox’, contextData);

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 21, 2019, 10:17pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/3 "2019-06-21T22:17:05Z")

</div>

thank you for the reply, but I want that the “contextData” will be dynamic - so it needs to reference the dynamic elements on the page that contain text - such as:

**import** wixWindow **from** ‘wix-window’  
**import** wixData **from** ‘wix-data’

$w.onReady( **function** () {  
})

export function gallery1\_itemClicked(event) {  
**let** dataObj = {  
“title”: $w(“#text27”).text,  
“date”: $w(“#text28”).text,  
“location”: $w(“#text29”).text,  
“description”: $w(“#text30”).text  
}  
wixWindow.openLightbox(‘Place Your Order’, dataObj)  
}  
on the lightbox page I add the following to the code:

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

$w.onReady( function () {
 let text = wixWindow.lightbox.getContext()
  $w('#textBox1').value = $w("#text27")
        } )

```

But I still can’t get it to work…

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 22, 2019, 4:24am UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/4 "2019-06-22T04:24:21Z")

</div>

Anyone - I am at my wits end - please help me! what am I doing wrong\>?!

---

<div class="post-metadata">

**Author:** ![stevesoftwareservice](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stevesoftwareservice/32/10638_2.png) [@stevesoftwareservice](https://forum.wixstudio.com/u/stevesoftwareservice)\
**Post date:** [June 22, 2019, 9:45am UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/5 "2019-06-22T09:45:47Z")

</div>

@ilyav The context variable that you get from the call to getContext() IS the object you created for the call to openLightbox. So instead of

```javascript
let text = wixWindow.lightbox.getContext();

```

Think if this as:

```javascript
let dataObj = wixWindow.lightbox.getContext();

```

Then you can access the properties you sent:

```javascript
$w('#textBox1').value = dataObj.title; 

```

Also make sure you are using the correct property on textBox1 inputText uses .value  
textBox uses .text 😉

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 22, 2019, 1:12pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/6 "2019-06-22T13:12:14Z")

</div>

Amazing! thank you! it is almost working!!!  
so here is the last tidbit that’s not…

so the page code is:

```javascript
import wixWindow from 'wix-window'
import wixData from 'wix-data'

$w.onReady(function () {
})

export function gallery1_itemClicked(event) {
 let dataObj = {
 "imageTitle": $w("#text27").text,
 "imageDate": $w("#text29").text,
 "imageLocation": $w("#text28").text,
 "imageDescription": $w("#text30").text}

wixWindow.openLightbox('Place Your Order', dataObj);
}

```

the lightbox code is:

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

$w.onReady( function () {
 let dataObj = wixWindow.lightbox.getContext();
  $w('#textBox1').value = (dataObj.imageTitle, dataObj.imageDescription, dataObj.imageDate)  
        } )

```

and the result is the text field is showing only the imageDate value… I have tried putting it like this:

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

$w.onReady( function () {
 let dataObj = wixWindow.lightbox.getContext();
  $w('#textBox1').value = dataObj.imageTitle,    
  $w('#textBox1').value = dataObj.imageDescription,
  $w('#textBox1').value = dataObj.imageDate
        } )

```

that didn’t work either - only the imageDate shows… so what am I doing wrong now?

thanks in advance!

---

<div class="post-metadata">

**Author:** ![stevesoftwareservice](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stevesoftwareservice/32/10638_2.png) [@stevesoftwareservice](https://forum.wixstudio.com/u/stevesoftwareservice)\
**Post date:** [June 22, 2019, 3:08pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/7 "2019-06-22T15:08:29Z")

</div>

Use semi colons to terminate statements not commas.

What are you trying to do?

The code tries to write three different things to the same element. So each is over writing the other. What other elements do you have on the light box?

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 22, 2019, 3:14pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/8 "2019-06-22T15:14:38Z")

</div>

I have a form that has a field that has to be filled out with whatever image triggers the lightbox… so:  
there is an image which has a dynamically set (from a DB) title, description, location and date which are displayed on a dynamic page, then once that image is clicked it triggers a lightbox which lets the user order the image so its a form that requests info name, phone email etc… and it has a “Note” field where one would write the image they are requesting, and I want that part filled out with the data from the dynamic page.

So all that information needs to go into that field

 ![](https://us1.discourse-cdn.com/wix/original/3X/1/2/127f8442485ea030a1c4ca68b4fd3e9853a3b072.png)  
the #textBox1 field is the one to be filled out

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [June 22, 2019, 3:31pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/9 "2019-06-22T15:31:44Z")

</div>

Have a look at the Wix Lightbox API reference here and have a good read of the getContext() function that Steve is talking about.

It also lists an example of passing data from a page to the lightbox itself, so you can familiarise yourself with the code that Steve is asking you to use.  
[https://www.wix.com/corvid/reference/wix-window.lightbox.html](https://www.wix.com/corvid/reference/wix-window.lightbox.html)

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 22, 2019, 3:35pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/10 "2019-06-22T15:35:02Z")

</div>

You can rest assured that before I have come to the forum I have read the information already available - I have looked at that page so many times…

it doesn’t really explain much in the way of what I need… It seems that I am following the entire protocol that is described there but I am not achieving the desired result - hence I am here and asking questions. So if you have any useful suggestions, I am all ears!

---

<div class="post-metadata">

**Author:** ![stevesoftwareservice](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/stevesoftwareservice/32/10638_2.png) [@stevesoftwareservice](https://forum.wixstudio.com/u/stevesoftwareservice)\
**Post date:** [June 22, 2019, 3:44pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/11 "2019-06-22T15:44:33Z")

</div>

@ilyav In addition you need to brush up on your JavaScript string manipulation.

You are trying to create a text field from something that is called an object. Objects contain properties (e.g. dataObj has a property called imageTitle) that you want to build into a string. There are several ways to build strings from object property values. One is called a template literal:

> **[Template literals (Template strings) - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)**
>
> Template literals are literals delimited with backtick (\`) characters, allowing for multi-line strings, string interpolation with embedded expressions, and special constructs called tagged templates.

The other way is using concatenation using the ‘+’ character or the concatenation function:

> **[String.prototype.concat() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat)**
>
> The concat() method concatenates
> the string arguments to the calling string and returns a new string.

Lastly I suggest you read this link that should get you up to speed with strings:

> **[Handling text — strings in JavaScript - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings)**
>
> Next, we'll turn our attention to strings — this is what pieces of text are called in programming. In this article, we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings,...

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 22, 2019, 4:10pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/12 "2019-06-22T16:10:33Z")

</div>

Thanks for pointing me in the right direction… I don’t know JavaScript, from Chinese… so I will have to read up on the links you provided…

Thanks

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 22, 2019, 5:05pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/13 "2019-06-22T17:05:27Z")

</div>

Well as it turns out my brother who is a developer gave me a simple solution (for him simple - i would never have figured it out) and its not as satisfying as figuring out myself but, in the interests of expediency I implement it. so here is the solution:

Page code:

```javascript
import wixWindow from 'wix-window'
import wixData from 'wix-data'

$w.onReady(function () {
})

export function gallery1_itemClicked(event) {
 let dataObj = {
 "Image Title": $w("#text27").text,
 "Image Date": $w("#text29").text,
 "Image Location": $w("#text28").text,
 "Image Description": $w("#text30").text}

wixWindow.openLightbox('Place Your Order', JSON.stringify(dataObj));
}

```

Lightbox code:

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

$w.onReady( function () {
 let dataObj = JSON.parse(wixWindow.lightbox.getContext());
 let str = '';
 let keyMap = ['Image Title', 'Image Description', 'Image Date','Image Location'];
 for (let key of keyMap) {
 if(dataObj[key]) {
                str += key + ': ' + dataObj[key] + '\n';
                }
            }  
$w('#textBox1').value = str;
        } )

```

WORKS LIKE A CHARM!

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [June 22, 2019, 8:06pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/14 "2019-06-22T20:06:14Z")

</div>

Great, why not see if he will do your whole website for you for free?! 😉

---

<div class="post-metadata">

**Author:** ![ilyav](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/ilyav/32/12859_2.png) [@ilyav](https://forum.wixstudio.com/u/ilyav)\
**Post date:** [June 22, 2019, 8:48pm UTC](https://forum.wixstudio.com/t/dynamic-lightbox-getcontext-please-help-i-am-stuck/17959/15 "2019-06-22T20:48:15Z")

</div>

Like I said I like to do it myself - hence I was trying to figure it out on my own with the help of this community… but no such luck… ☹