I have a wix light box that triggers when a text box element is hovered over.
The problem I have is I also want that textbox element to link to another page when clicked on.
When the user puts the mouse over the text box element, the lightbox loads, and when the textbox element is clicked on, nothing happens.
I cant get the textbox element that I use to link to another page. Is this because once the lightbox is loaded, effectively this element falls outside the lightbox and therefore cant be clicked? I have set the element properties so that it loads the functions.
Site Code:
import wixLocation from “wix-location”;
import window from ‘wix-window’;
export function menulink_mouseIn(event) {window.openLightbox(‘Menu1’);}
export function menulink_click(event) {wixLocation.to(“/anotherpage”)}
lightbox page code:
import wixWindow from ‘wix-window’;
import wixLocation from ‘wix-location’;
export function lightboxmenu1_mouseOut(event) {wixWindow.lightbox.close();}
export function menulink_click(event){wixWindow.lightbox.close();wixLocation.to(“/anotherpage”);
}
What you are forgetting is that the Wix lightbox has a overlay behind the lightbox and over the rest of the screen that means you can’t click on anything in the background whilst the lightbox is open.
Even if you had the overlay set to 0% and as transparent, you would still not be able to click on anything on the actual page itself until the lightbox is closed.
As this line is in your lightbox code, then the code will be looking for the menulink element on the lightbox itself and not on the page behind.
So, in theory you shouldn’t need the lightbox code as you can let the user use either ‘x’ or close buttons or click on the overlay itself to close the lightbox, then just need code for your site code tab and the code should be something like this…
Site Code
import wixLocation from "wix-location";
import window from 'wix-window';
$w.onReady(function() {
});
export function menulink_mouseIn(event) {
wixWindow.openLightbox("LightboxName");
}
export function menulink_click(event) {
wixLocation.to("/your-other-page-url")
}
Make sure that you have added your event handlers through the properties panel for each of the elements that you are wanting to have the onMouseIn and onClick functions on to.
An easier way around this would just be to use the lightbox close options of either clicking on the ‘x’ button or the ‘close’ button within the lightbox, or by letting the user close the lightbox by simply clicking on the overlay itself as already mentioned above.
Then you can simply have the menulink either linked to another page through the link option on the text box settings itself or you can simply use the onClick event handler function that is in your code already.
Or if you wanted the lightbox to actually link to another page when closed, then you can simply add it through the lightboxes own ‘close’ button without code too, the same as you have done the menulink text box if you did it through the element’s own link setting too. https://support.wix.com/en/article/adding-a-link-to-your-lightbox-close-button
You can see more about using lightboxes and the location to function in code here.
Finally, see this support page here for more info on using event handlers for user actions.