Use information from code populated repeater to open lightbox or similar effect

Ask the community
, ,
1

I’m having trouble with
I have a repeater that is connected to a data collection. The repeater is populated and on mouse over it changes the background of the page and does some other color changes to the text. Currently when I click on the repeater it opens a dynamic page populated with the relevant info. This all works perfectly (thanks @CODE-NINJA et al).

Working in
Wix Studio

Site link
I have a test site - https://philmurray18.wixstudio.com/testsite99

What I would like to do, instead of opening a page with the dynamic info, is just display a ‘pop-up’ or lightbox or something similar that appears/slides in from the right, with the info.

This site is an example of what im trying to recreate when you click on “MORE INFO”

What I’ve tried so far
I have watched every video I could find and gone through lots of exacmple codes found here in the community, on connecting lightboxes to repeaters, and whilst I have had some limited progress, I cant get it to work. I can only open the lightbox and it display the same (first) record each time.

Am I going about this the wrong way? Should I be using something other than a lightbox to achieve this? The example videos I watched the lightbox seems to be quite slow to react anyway, so maybe there is a better/quicker way to do this?

I have been struggling away at this, thinking about different solutions but I am not a pro website person, but I have been trying to educate myself and this is a curiosity that I am sure can be solved… I just need some help!!

Thanks in advance

2

Hi, @phil76275 !!

I think using a lightbox should be fine. Wix’s lightboxes used to be very slow to open, but lately, I believe they open at a normal, standard speed. :relieved_face:

By the way, I’m talking about a site built with Wix Studio. I’m not sure how fast lightboxes open on sites created with the Wix Editor these days. I think the lightbox you saw in the video probably showed it before it had been optimized. Also, in some cases, you might be able to speed up loading even more by preloading the lightbox, so it’s worth giving that a try! :raising_hands:

3

If you are going to use a lightbox to display additional info for your repeater items, you cannot make it work without code by simply connecting it with a dataset - like you can do with dynamic pages. You will have to ‘pass’ the item from the repeater to the lightbox using code, and in the lightbox, you will have to ‘fetch’ the info that was passed to it. Then you can display this info and it will update the content within the same lightbox with new info for each item that is clicked.

Take a look at the wix-window-frontend API documentation, where you’ll find example codes on how to send data to a lightbox from your page:

Start with passing a simple static message from a test page, and once you get it working, try it out with your repeater items.

Also, check out this awesome tutorial by @thewixwiz which demonstrates this exact functionality. This will help you a lot.

1 Like
4

Thank you so much for the advice and pointing me to the API documentation.

I worked on this a bit this evening and thnk I am pretty close…. I can get the lightbox to open, and it looks like the info is being passed to the lightbox.

My question now is: how do I display it in the lightbox? For this example I would like to show the appropriate image from the data collection in the #imagex1 (top of lightbox) and the name of the image in the #text3 asset (Add a title).

Screenshot 2025-09-11 at 10.40.42 PM
Screenshot 2025-09-11 at 10.40.42 PM1920×986 78.7 KB

The data is getting passed on, I think:

Screenshot 2025-09-11 at 10.46.15 PM
Screenshot 2025-09-11 at 10.46.15 PM2548×578 109 KB

Page Code:

import wixWindowFrontend from "wix-window-frontend";

$w.onReady(async()=>{
  $w('#dataset1').onReady(()=>{
	$w("#button2").onClick((event) => {
       let $item = $w.at(event.context);
       let clickedItemData = $item("#dataset1").getCurrentItem();
       console.log("Selected-Data: ", clickedItemData);
       wixWindowFrontend.openLightbox("lightbox1", clickedItemData);
    });
  });

  $w("#repeater2").onItemReady(($item, itemData, index) => {

    $item("#button2").onMouseIn(() => {
      $w("#section4").background.src = itemData.image;
      $w("#mainimage").show();
    });

  });

});

Lightbox code (I’m pretty sure this is where the issue is):

import wixWindowFrontend from "wix-window-frontend";

$w.onReady(function () {
  let received = wixWindowFrontend.lightbox.getContext();
  $w("#text3").text = received.pageSend1;
  $w("#text4").text = received.pageSend2;
});

Thanks again…. hopefully tomorrow I/we can crack this!

5

You’re pretty close! :raising_hands:t2:

Just a couple of adjustments to your code:

  • In your page code, I would suggest using $item("#button2").onClick() exactly like you have used the $item("#button2").onMouseIn() event handler, since that is the recommended way to ensure that the repeater scope selectors function correctly.

  • In your lightbox, you simply need to fetch the data that was passed to it from the page, and change the source of the image to the path provided in the data, and similarly update the label with the text.

Replace your code with the one I’ve provided below:

Page Code:

import wixWindowFrontend from "wix-window-frontend";

$w.onReady(function () {

    $w("#repeater2").onItemReady(($item, itemData, index) => {

        $item("#button2").onMouseIn(() => {
          $w("#section4").background.src = itemData.image;
          $w("#mainimage").show();
        });

        $item('#button2').onClick(() => {
			wixWindowFrontend.openLightbox("YOUR LIGHTBOX NAME", itemData);
        });

    });

});

Lightbox Code:

import wixWindowFrontend from "wix-window-frontend";

$w.onReady(function () {

    let receivedData = wixWindowFrontend.lightbox.getContext();
    $w('#imageX1').src = receivedData.image;
    $w('#text3').text = receivedData.title;

});

NOTE:

Inside the openLightbox() function on the page code, pass the actual NAME of your lightbox, which you will find under Site Pages. DO NOT use the #id of the lightbox; that will not work.

And that’s pretty much it. Your code should now work flawlessly! (:

6

Amazing!! My hat’s off to you @Pratham … thanks so much. It is working exactly as I hoped it would.

1 Like