Auto Populate Lightbox with wix code

Discussion Ask a question
,
1

I have a lightbox (#lightbox1) which has a some content like title and descripption inside it. I want this lightbox to be filled in automatically based on which button on the page I clicked on to open the lightbox. I want to do this by clicking on buttons in repeater and auto populate the lightbox according to button I click.
How can I achieve this?

Please help me. Thank You.

2

Hi,
The first is to use onItemReady method in Repeater element and to declare onClick event on the button element.
The next step is to pass props to the lightbox.
This thread will be useful to understand how to pass props.
Good luck!
Roi

1 Like
3

Thank you very much for help. Could you give example and explain?

1 Like
4

Hi,
This is on the side of the page


$w("#myRepeater").onItemReady( ($w, itemData, index) => { // onItemReady method
    $w('#yourButtonID').onClick(() => { // onClick event. 
        wixWindow.openLightbox("Your lightbox",{data:'the information you want to pass'});// "Your lightbox" is the name of the lightbox. change it to your light's name. the second argument is the data that you want to pass. openLightbox method opens the lightbox
    }); 
});

Don’t forget to import wixWindow

import wixWindow from 'wix-window';

Read this thread to see the rest of the example
Feel free to paste here your code if you pump into problems.
Roi

2 Likes
5

I really appreciate your help. But still I cannot do it.
How do I connect it to database, I mean I have field of title and its connected to repeater so how I add the same title to lightbox when user clicks on that repeater. Sorry for asking again and again.

1 Like
6

Hi,
This article will help you to connect the repeater to the database.
In the lightbox you’ll need to add code and use wixWindow .lightbox.getContext() method.
Here is another example of how to pass information to lightbox
Roi

1 Like
7

thats fine but how i will get value of variable on the lightbox in onready function to show that output?

8

i am placing this code in form when i click button it will get 15% of the value and i want to show that value in lightbox.

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
export function button1_click(event) {
var percent = $w(“#input5”).value;
var fin = (0.15 * percent);
console.log(fin);
wixWindow.openLightbox(“Thanks”,{fin:‘the information you want to pass’});
}
and the below code in the lightbox to show it in a input field.

$w.onReady( function () {
//$w(“#input1”).inputType=fin;
var fin=wixWindow.lightbox.getContext()
$w(“#input1”).value=fin;
open_Lightbox();
});
please help. you can write me over on innocent_meerani@hotmail.com