Dynamic lightbox in dynamic page

Ask the community
, ,
1

I need help with velo code that is easy for a pro but difficult for me. From other posts it seems to be just a few lines of code. But I have no code skills.

I have built a dynamic page with buttons to open a range of lightboxes. I would like to make the lightboxes themselves dynamic.

Example… I have built a dynamic page to create a template information page for five different buildings in a group. The page has nine buttons, each opening a different lightbox with simple but specific content for that button. Such as info on the local area.

User journey… user lands on a page for a specific building. Taps a ‘local area’ button. Lightbox opens with content specific for that building’s local area. The lightbox has five bits of content: a title, some copy, an image, ‘explore more’ text over the image, and URL link to another site. User can tap the image to link out to another site for more detailed information.

I have followed previous posts… got as far as linking lighbox content to dynamic page content manager. Now I’m stuck at the code writing part.

Can anyone help?

2

Pass the information from the dynamic page to the lightbox, and use this data in the lightbox.
I don’t fully understand your scenario, so I’ll give you an example of my own let’s say that each item (represented on a dynamic page of its own) has an array of 5 images stored in the collection and you want to display them on the lightbox, you can do:

//dynamic page:
import wixWindow from 'wix-window';
$w.onReady(() => {
$w('#dynamicDataset').onReady(() => {
const item = $w('#dynamicDataset').currentItem();
$w('#showImagesBtn').onClick(event => {
wixWindow.openLightbox('GalleryLightbox', {imgArr: item.images})
})
})
})

//Lightbox;
import wixWindow from 'wix-window';
$w.onReady(() => {
const imgArr = wixWindow.lightbox.getContext()?.imgArr;
if(imgArr){
    $w('#repeater').data = imgArr.map((e,i) => ({_id: i.toString(), src: e}));
    $w('#repeater').forEachItem(($i, iData) => {
    $i('#image1').src = iData.src;
    })
})
})
3

JD… thank you so much for helping. I really appreciate it. If I can figure this out it would open up so much for me.

I’ve input and edited the code though not done a good job. I’ve not translated it well. For a bit more clarity on the scenario…

My dynamic page (called “Playpad. Template”) is a template for wellness information for multiple hotels drawing from a dataset called ‘Playpad. Dataset’. This step works well as there is no coding for me to get wrong.

There are nine buttons (I’m not using a repeater). Each opens a different lightbox with simple content relating to that hotel. So each needs a dynamic lightbox. And therefore code.

The first button opens the first dynamic lightbox I’ve named ‘Stories. Local Area’. I’ve connected the content in the lightbox to fields in ‘Playpad. Dataset’ from the dynamic page.

From your dynamic page code I interpreted:

  • ‘#dynamicDataset’… this calls on the content manager and presume I don’t need to change this as it’s the only dataset on the page.
  • ‘#showImagesBtn’… presume this is the trigger to action, in my case the first button would be ‘#button45’.
  • ‘GalleryLightbox’… this is the name of the lightbox that button45 opens. In my case the lighbox is called ‘Stories. Local Area’. As it’s a name with spaces, I presume I need double quotation marks? i.e. “Stories. Local Area”. Or do I need to rename with no spaces?
  • immArr: item.images… I guess this returns a specific image for your case. I’m not sure how to translate this for my case. I guess I need something like this for each piece of content in the lightbox (title text, copy text, image, image text, URL in transparent button)?

When I leave the immArr as it is, this code returns an error stating: Unexpected token, expected “,” (6:81) which refers to the comma after ‘GalleryLightbox’.

From your lightbox code:

  • ‘#repeater’… again, presume this to be ‘#button45’?
  • ‘#image1’… I guess this is the field in your content manager? Is there where I need to link content back to the ‘Playpad. Dataset’? Would I need to do this field by field?

Thanks again for your help… I really appreciate it.

If I can understand the right structure and code terms one lighbox in my case, I can then replicate for all of them.

Elliot

4

@elliot9791 I had a typo (an extra } . fixed )

5

@jonatandor35 Thanks JD. It now doesn’t get stuck there. :sunglasses:

Now the error returns… Unexpected Token (8:2) pointing to the second }) at the end. I tried to remove one by one but it doesn’t fix.

Referring to my questions above… I think I need to translate your immArr: item.images. Does this relate to the fields in your content manager to connect to your lightbox? If so, do I need to list all five content fields relating to my lighbox?

Many thanks,

E

6

@elliot9791
Add }) to close the $w.onReady.
It’s just an example. In this example an array of image URLs is stored in the collection under the ‘images’ field ( images is the field key, not the field label).

7

Hey @J. D. et.al… I’ve tried translating the code from J.D., as well as other approaches from forum research. I feel JD’s is closest, and I’m edging closer, but not cracked it yet.

Can you / anyone help?

Summary: I have a dynamic page with a button that opens a lightbox. I want the content in the lightbox to vary depending on the version of the dynamic page. All content for the dynamic page and the lightbox is in the dynamicDataset in the dynamic page and connected.

//dynamic page:
import wixWindow from ‘wix-window’ ;
$w . onReady (() => {
$w ( ‘#dynamicDataset’ ). onReady (() => {
const item = $w ( ‘#dynamicDataset’ ). currentItem ();
$w ( ‘#button45’ ). onClick ( event => {
wixWindow . openLightbox ( “Stories. 6S. Explore Ibiza - test” , { imgArr : item . images })
})
})
})
//where button45 is the trigger to open the lightbox
//where ‘stories. 6S…’ is the name of the lightbox to open.

//Lightbox;
import wixWindow from ‘wix-window’ ;
$w . onReady (() => {
const imgArr = wixWindow . lightbox . getContext ()?. imgArr ;
if ( imgArr ){
$w ( “#text285” ). text = lb4Title ; // Title from Collection
$w ( “#text287” ). text = lb4Copy ; // Copy from Collection
$w ( ‘#image69’ ). src = lb4Image ; // Image from Collection
$w ( “#text286” ). text = lb4ImageText ; // Image Text from Collection
}
}
//where ‘text285’, etc. are items in the lightbox and ‘lb4Title’, etc. are fields in dynamicDataset in the dynamic page to import to the lightbox

8

So I didn’t succeed in this so took another path. I tried putting the buttons in a repeater as most of the guide code used repeaters. I’ve made some progress… there is a result… but it’s not dynamic.

Here’s my post on this repeater approach…

9

SOLVED…

The fabulous @victoria-shelley designed the solution for me. Highly recommended in the Wix Marketplace.