Connecting your Database to Lightboxes

Show and tell
,
1

You can customize your repeater to accept LightBox’s names and then open them using a button, here is a snippet for this function:

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

$w.onReady(function () {
	    wixData.query("collectionName")
            .find()
            .then((results) => {
                $w(`#repeater1`).data = results.items;
            })
            .catch((err) => {
                let errorMsg = err;
            });

        $w(`#repeater1`).onItemReady(($w, itemData) => {
        	console.log(itemData);
            $w(`#button1`).label = itemData.title;
            $w(`#button1`).onClick((event)=>{
            	wixWindow.openLightbox(itemData.lightbox);	
            });
        });
});

Using a field in your collection named lightbox and adding the names of the respective box you will be able to open different ones.
Shoutout to @Tal for this solution.

7 Likes
2

beautiful!

3

I am attempting to have my gallery, which is connected to a database, open a lightbox which is also connected to the database. The standard gallery connects just fine, but the dynamically connected gallery does not seem to have a lightbox option. How can I do this? It looks like something similar to what you created above, but I am not sophisticated enough to modify the code - for that matter, I don’t know where to put this code either.

4

Where does this code go?

5

Hi @Kevin, this code goes on the page with the repeater.

6

Thank you. Trying to implement this, I am getting some errors

Loading the code for the Cocktails page. To debug this code, open rn3jt.js in Developer Tools.
TypeError: $w(…).onItemReady is not a function
Loading the code for the Cocktails page. To debug this code, open rn3jt.js in Developer Tools.
TypeError: $w(…).onItemReady is not a function

Also, just to clarify, in the code above I assume ‘collectionName’ is the name of my Dataset?
And, I assume repeater1 should be replaced by the name of my gallery, in this case, ‘gallery1’

Finally, I am trying to link from a link not a button. How can I change the code to make a link launch the lightbox??

7

Awesome Code!!

8

It didn’t work for me, except the Button Label. When I click the Button it always goes to the same Dynamic Content. It does not change acording to selected Item from the repeater.

9

Shalom
How to pass data from this repeater populated by query to lightbox (let say itemData.Author is reference field and included in query). I am getting the same data into the lightboxes (guess the last one in repeater?)
Where and how to declare dataObj?

$w(`#repeater1`).onItemReady(($w, itemData) => { 
     dataObj=itemData.Author
     $w(`#button1`).label = itemData.title; 
     $w(`#button1`).onClick((event)=>{ 
         wixWindow.openLightbox(itemData.lightbox,dataObj); }); }); });

Please your help. It’s urgent
Thanks in advance

10

That’s great Joseph. Thanks.
I have an issue. The items are loaded in a correct order first as their order in the database. However, 3 seconds after the page is loaded, they rearranged in a reverse order!!
This happen just when I add this codes to the page:

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

$w.onReady( function () {
wixData.query(“Therapists”)
.find()
.then((results) => {
$w(“#repeater1”).data = results.items;
})
. catch ((err) => {
let errorMsg = err;
});

    $w("#repeater1").onItemReady(($w, itemData) => { 
            console.log(itemData); 
            $w('#button1').onClick((event)=>{ 
            wixWindow.openLightbox(itemData.name);   
        }); 
        $w('#name').onClick((event)=>{ 
            wixWindow.openLightbox(itemData.name);   
        }); 
        $w('#title').onClick((event)=>{ 
            wixWindow.openLightbox(itemData.name);   
        }); 
        $w('#button2').onClick((event)=>{ 
            wixWindow.openLightbox(itemData.name);   
        }); 
        $w('#arrow').onClick((event)=>{ 
            wixWindow.openLightbox(itemData.name);   
        }); 
    });

});

Any suggestion?

11

Hi rather than creating lots of light boxes I want to create a dynamically loaded lightbox.

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 database 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 don’t see how to bring these elements together .

Can you help?

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

12

I too am working on something akin to that. From what I’ve found you could technically do it all in editor with a dynamic page set up for lightbox which just updates every-time you select someone (I tied a button to the picture of someone) from that button press with it as a repeater tied I tied it to a database. Now I haven’t tested that completely but that should in theory work for a lightbox it just means you have to set it as a Dynamic page.

I am about to test it myself to see if it works.

13

I’m not a coder, but I know a little bit. All this does for me is to change the name of the button and it tries to debug line 16. When I click the button I get;

Wix code SDK error: The name parameter that is passed to the openLightbox method cannot be set to the value . It must be of type string.

All I want is for an enlarged image to appear in the lightbox. What do I have to put in the lightbox? Or will it just take the image from the collection and place it there?

14

Hi,
I wrote to support first - they told me to come here …

I have a new arena client that has asked for a few tweaks to be made to her store. I have added a wix.stores widget (she only has one item) that links to the Product Page. I have added some wix.code for customers that are eligible for the Disability VAT Exemption. She wants a checkbox with a popup disclaimer that leads to a form. I have done all this and it looks great in preview (aparts the mobile version is a pain !!) I sent it live and the checkbox does not appear. I have tried all the usual move to the front/back etc., nada - the only way it will appear is to pin it - she doesn’t want that. I can make it work (sort of) on mobile BUT the popup displays behind the product page no matter what I do.
I has something to do with layers as the check box will appear if you put it toward to top of the page but not if you put in on the text (using ‘Stunning’ layout).
So I scrapped that idea.

And went with code

import window from ‘wix-window’;

export function productPage1_mouseIn(event) {
window.openLightbox(‘Disclaimer’);
}

But it’s very limited. What I need to accomplish is:

Page Loads and customer chooses “Yes” from the Product Option variable (as they are eligible for the exemption) - the lightbox appears. If the customer selects “No” - no lightbox.

I have tried every which way and I cannot fathom it out.

Wonderful people - your help would be much appreciated.

15

@camerong124 hey, have you figured it out? trying to make exactly the same, but lightbox dont seem to have dynamic function. and if you create a dynamic page, it dont act like a dynamic box. it is all kinda wierd to config.

16

have you discovered a solution? i`m having the same problem. don’t know why but the code changes the disposition

17

@lucassmdesign I have a tutorial article for that:

https://www.totallycodable.com/wix/corvid/open-a-lightbox-when-clicking-an-item-in-a-repeater-using-a-button

18

@code-queen have someone told you you are a saint before? lol Thanks your tutorials are allways so clear and easy to understand.

**edit: It works perfectly, thank you verry much again! And also thanks to all the people that help, this community is fantastic!

19

@code-queen
Hello
Thank you for the direction to the tutorial it was very helpful. however, my code only opened the lightbox once and since then, it has refused to open.
I have checked everything but it is still not working. please help me out I have been trying to solve this for 5 days now.

here is the code
import wixWindow from ‘wix-window’;
$w.onReady( () => {
//TODO: write your page related code here…
$w(“#dataset1”).onReady(() => {
$w(“#repeater1”).onItemReady(($item, itemData, index) => {
$item(‘#button3’).onClick(() => {
wixWindow.openLightbox(‘Comment’, itemData)
});
});
});
});

Thank you very much