Hi,
I have a dynamic page with a button.
With this button I want to open a lightbox.
I tried and tried but not working.
Now I have hardcoded the name of the lightbox in it, and even then it's not opening.
Am I missing something?
I have set the name in the properties of the lightbox to HRMCoaching.
I put the code like hereunder. And then in preview click the button.>> Nothing happens
Any suggestions?
import wixData from 'wix-data'; import {wixWindow} from "wix-window"; import {local} from 'wix-storage'; $w.onReady(function () { $w('#button8').onClick((event)=>{ wixWindow.openLightbox('#HRMCoaching') }); /* $w.onReady(function () { let dienst = local.getItem('#projectname2'); console.log(dienst) wixData.query("Projects") .eq("title", dienst) .find() .then(results => { let items = results.items; let firstItem = items[0]; */ /* $w(`#button8`).onClick((event)=>{ wixWindow.openLightbox("HRM Coaching"); //wixWindow.openLightbox(firstItem.lightbox); //}); */ //}); });
Thanks for your extensive explanations!
It got me some further, but since it is not my basic language I have to dig deeper in it to better understand it.
I had a deadline so I took the help of an external.
Anyway, this is the final result:
import wixData from 'wix-data'; import wixWindow from "wix-window"; import { local } from 'wix-storage'; $w.onReady(function () { $w('#button8').onClick((event) => { let currentItem = $w('#dynamicDataset').getCurrentItem() let lightBox = currentItem.lightbox wixWindow.openLightbox(lightBox) }); }); Thanks again!
Simply read the Wix API Reference for help with this.
https://www.wix.com/corvid/reference/wix-window.lightbox.html
Or make use of the search function in this forum as there are many previous posts about this.
https://www.wix.com/corvid/forum/community-discussion/dynamic-page-lightboxes
https://www.wix.com/corvid/forum/community-discussion/lightbox-with-dynamic-content-via-button
How do I pass data between a page and a lightbox?
When you open a lightbox using the openLightbox() function, you can pass an object containing data to be used in the lightbox. In the lightbox's code, you call the getContext() function to retrieve the data sent by the openLightbox() function.
When you close the lightbox using the close() function, you can pass an object containing data to be used by the page that opened the lightbox. This data is retrieved from the resolution of the Promise returned by the openLightbox() function.
A scenario where information is passed between a page and a lightbox
This example demonstrates how to pass data from a page to a lightbox that it opens and from the lightbox back to the page as it closes.
It assumes that the page has:
An open button that is used to open the lightbox.
Two text inputs where information that is to be passed to the lightbox is entered.
Two text elements where information that is passed from the lightbox is displayed.
It assumes that the lightbox has:
An close button that is used to close the lightbox.
Two text inputs where information that is to be passed to the page is entered.
Two text elements where information that is passed from the page is displayed.
/************* * Page Code * *************/ import wixWindow from 'wix-window'; export function openButton_click(event) { wixWindow.openLightbox("MyLightBox", { "pageSend1": $w('#pageSend1').value, "pageSend2": $w('#pageSend2').value }) .then( (data) => { $w('#pageReceive1').text = data.lightboxSend1; $w('#pageReceive2').text = data.lightboxSend2; } ); } /***************** * Lightbox Code * *****************/ import wixWindow from 'wix-window'; $w.onReady( function () { let received = wixWindow.lightbox.getContext(); $w('#lightBoxReceive1').text = received.pageSend1; $w('#lightBoxReceive2').text = received.pageSend2; } ); export function closeButton_click(event) { wixWindow.lightbox.close( { "lightBoxSend1": $w('#lightBoxSend1').value, "lightBoxSend2": $w('#lightBoxSend2').value } ); }
Ok thanks, got this working.
Now I'm trying to open a Lightbox Dynamically
Depending on the record in the database. In d=the database there's a field lightbox, where I have filled in the name of the Lightbox. But this doesn't work yet :(
Any idea pls?
import wixData from 'wix-data'; import wixWindow from "wix-window"; import {local} from 'wix-storage'; /* $w.onReady(function () { $w('#button8').onClick((event)=>{ wixWindow.openLightbox('HRM Coaching') }); */ $w.onReady(function () { let dienst = local.getItem('#projectname2'); console.log(dienst) wixData.query("Projects") .eq("title", dienst) .find() .then(results => { let items = results.items; let firstItem = items[0]; $w(`#button8`).onClick((event)=>{ wixWindow.openLightbox(firstItem.lightbox); }); }); });
See the Wix Window API for more help with how to open a lightbox.
https://www.wix.com/corvid/reference/wix-window.html#openLightbox
Open a lightbox
import wixWindow from 'wix-window'; // ... wixWindow.openLightbox("LightboxName");