Hi everyone,
I created a creative portfolio site on: www. dawn-io. com and wanted to ask for your help.
It’s about the mobile version and due to the portfolio page being a lightbox (due to the design and responsiveness issues on a normal page which can’t be pinned to centre). Is there a way in the code to link a vector/image to the mobile menu? On a normal page the header appears as normal but on lightboxes it’s not possible to make the header appear or is there a way?
Many thanks,
David
Hello David.
Lightboxes are considered as standard pages, but without header and footer and can be stacked over other pages.
So you can’t open the mobile menu since it’s been set to “Show on all pages”, which is hidden on pages that are set to hide the header and the footer, including lightboxes.
However, what you can do, is use lightbox context to pass data to the page when it’s closed (only by code) to open the mobile menu.
Ahmad
Hey!
Thank you so much for answering. So all my pages apart from the main landing page are lightboxes now which includes - a portfolio page - 2 portfolio items (fullscreen lightboxes) - a clients/about page and a contact page.
So how would I then for example go back to the menu on mobile (not a lightbox menu page) from 1. the portfolio page 2. the clients/about page and 3. the contact page? Currently I understand that it goes back to the landing page due to the menu closing automatically after you make your selection.
for the portfolio items it makes more sense to go back to the portfolio /or the landing page (by clicking the logo) which already works as intended.
If you could explain me your last step and how I do that in code would be amazing so I can still use the nice mobile menu instead of a delayed lightbox which confused some users on the site.
Many thanks, David
You got me wrong, please pay attention to this:
All lighboxes are pages, but pages are not lighboxes.
Lightboxes are pages that can be displayed over regular pages, with transparency in mind of course.
Don’t worry, I’ll explain it to you, you need to use getContext( ) API to pass data to function that you already setup on the Site code to open the mobile menu, here’s how:
Import wix-window API : to both your lightbox Page code and your Site code.
import wixWindow from 'wix-window';
On the lightbox Page code, use any event handler to trigger the closing process, for example a menu icon, we’ll use an onClick() event handler, we just have to make sure the code only runs on mobile so that it doesn’t cause errors on desktops or tablets:
$w('#lightboxMenuIcon').onClick((event) => {
if (wixWindow.formFactor === 'Mobile') {
wixWindow.lightbox.close({openMobileMenu: true});
}
})
On the page that you used to open the lightbox, check if the the the passed data wants to open the mobile menu or not:
wixWindow.openLightbox("MyLightBox", openData).then( (data) => {
if (data.openMobileMenu === true) {
$w('#mobileMenu').open();
}
});
Hope that helped~!
Ahmad
Hi! Thanks so much. Yes, I understand and by pages I referred to lightboxes. My apologies, I didn’t clarify it. So all ‘pages’ apart from the landing page and contact page are lightboxes on my site now. (I will change Contact to light box, too)
wixWindow . openLightbox ( “MyLightBox” , openData ). then ( ( data ) => {
if ( data . openMobileMenu === true ) {
$w ( ‘#mobileMenu’ ). open ();
}
});
I have a question for this bit of code. It tells me to include a value in ‘openData’ and #mobileMenu. I only worked with hide and show functions in Corvid. Which values do I have to put in for those and where can I find them? 
Thank you so much,
David
openData is an optional object that you use to pass data to he lightbox, in your case, you don’t need it so delete it.
The mobile menu opens only with the function open() , show and hide are not meant to open the menu.
“mobileMenu” is the ID of the mobile menu, you need to change it to whatever ID your mobile menu has.
I see, thank you.
Hm… I can’t get it to work just yet.
This is my code (The bottom could be ignored, I used it to hide 3 videos on desktop but display them on mobile in order to change the style theyre displayed with the play button):
Do you know where the issue is in the code?
import wixWindow from ‘wix-window’ ;
$w( ‘#button1’ ).onClick((event) => {
if (wixWindow.formFactor === ‘Mobile’ ) {
wixWindow.lightbox.close({openMobileMenu: true });
}
})
wixWindow.openLightbox( “THE ARTIST” ).then( (data) => {
if (data.openMobileMenu === true ) {
$w( ‘#menuToggle1’ ).open();
}
});
$w.onReady( **function** () {
// Hides the element when the page loads
$w( “#mediaPlayer1” ).hide();
$w( “#mediaPlayer2” ).hide();
$w( “#mediaPlayer3” ).hide();
$w( “#box2” ).hide();
$w( “#button1” ).hide();
if (wixWindow.formFactor === “Mobile” ){
$w( “#mediaPlayer1” ).show();
$w( “#mediaPlayer2” ).show();
$w( “#mediaPlayer3” ).show();
$w( “#box2” ).show();
$w( “#button1” ).show();
}
});
Ah I just read your answer again and I think I made a mistake and pasted everything into the lightbox code. I need to use some on the site page and the page I used to open the menu… I’ll keep you updated if that works.
Aright so the page I use to open the lightbox is actually the mobile menu. I still couldn’t get it to work, do you think it’s possible to fix it?
So the structure is:
MAIN landing page → Mobile menu → THE ARTIST lightbox
Then I use a Closing Lightbox icon / or vectorImage1, on desktop I use the vector in order to return to my menu lightbox since I don’t have the hamburger menu function there.
This is my site code:
$w.onReady( function () {
// Hides the element when the page loads
});
import wixWindow from ‘wix-window’ ;
This is my lightbox code:
import wixWindow from ‘wix-window’ ;
$w( ‘#button1’ ).onClick((event) => {
if (wixWindow.formFactor === ‘Mobile’ ) {
wixWindow.lightbox.close({openMobileMenu: true });
}
})
$w.onReady( **function** () {
// Hides the element when the page loads
$w( “#mediaPlayer1” ).hide();
$w( “#mediaPlayer2” ).hide();
$w( “#mediaPlayer3” ).hide();
$w( “#box2” ).hide();
$w( “#button1” ).hide();
if (wixWindow.formFactor === “Mobile” ){
$w( “#mediaPlayer1” ).show();
$w( “#mediaPlayer2” ).show();
$w( “#mediaPlayer3” ).show();
$w( “#box2” ).show();
$w( “#button1” ).show();
}
});
The second code you sent is included in the start page for now but as I explained at the top, the mobile menu uses the link to the lightbox inside it so it doesn’t have a dedicated page to use the code:
wixWindow.openLightbox( “THE ARTIST” ).then( (data) => {
if (data.openMobileMenu === true ) {
$w( ‘#menuToggle1’ ).open();
}
});
You need to make sure that you open and close the lightbox pragmatically, opening or closing it using the editor links and buttons does NOT trigger the code we set.
The last piece of code in your comment should be in the Site code, and should be inside an event handler.
To go with Ahmad’s last reply, have a read of the lightbox info from the Wix Window API so that you can understand what he means fully with using all code only.
https://www.wix.com/corvid/reference/wix-window.lightbox.html
https://www.wix.com/corvid/reference/wix-window.lightbox.html#close
https://www.wix.com/corvid/reference/wix-window.lightbox.html#getContext
https://www.wix.com/corvid/reference/wix-window.html#openLightbox
When I open a lightbox using ‘openLightbox()’, my ‘getContext()’ function returns ‘undefined’. Why?
The getContext() function only returns a data object passed if the lightbox was opened programmatically using openLightbox() . If the lightbox opened automatically when the page loaded or via a link from a page element, data will not be passed to the lightbox.
Make sure Automatically display lightbox on pages is set to No in the Lightbox Settings panel in the Editor and don’t set any element’s link to open the lightbox. Instead, create your own method for opening the lightbox programmatically. For example, you can add a button with an onClick() event handler that calls the openLightbox() function.
Also, the mobile menu works fine for me.
https://www.wix.com/corvid/forum/tips-tutorials-examples/introducing-the-new-mobile-menu
https://www.wix.com/corvid/reference/$w.MenuContainer.html
Two code versions for sites.
Make sure that any images are set to be hidden on load on desktop editor.
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w("#mobilelogo").show();
$w("#mobilelogo1").show();
$w("#menuheaderstrip").show();
}
});
import wixWindow from 'wix-window';
$w.onReady(function () {
if(wixWindow.formFactor === "Mobile"){
$w("#mobilelogo").show();
$w("#mobilemenuopen").show();
$w("#mobilemenuclose").show();
}
$w("#mobilemenuopen").onClick( () => {
$w("#myMenuContainer").open();
} )
$w("#mobilemenuclose").onClick( () => {
$w("#myMenuContainer").close();
} )
} );