I’m hoping to get some help with a code snippet that could pull the source used on another page to show on the iframe in a lightbox.
Here’s the scenario:
I have a page with a Iframe and a menu with 5-10 buttons below that allows the user to select different views by changing the source URL of the iframe above. I’d like to add a full screen button that would open a lightbox with an iframe that uses the same source as the previous page.
I’m thinking I need to “setitem” the URL source into Wix storage on the main page and then “getitem” from the storage onto the lightbox? I’ve read through all the Corvid API data about this, but I can’t seem to find any code examples that would help me do exactly this. And I’ve never used Wix storage and don’t fully understand the mechanics.
Here’s a simplified version of the code used on the original page where the Iframe and menu is located. What should I add to make sure the current Iframe(#html2) Source URL is stored in Wix Storage so it can be pulled in the lightbox?
let clickedBox;
export function box5_click(event) {
$w('#html2').src = 'https://xxxx.com'
$w("#html2").scrollTo();
clickedBox = event.target.id;
}
I’ll also mention that I’m planning on having about 20 pages with an iframe and menu below, it would be great to have a way so I don’t need to create 20 iframes, but I can do it if necessary.
Thanks again for helping me out with another issue!
I don’t think this is working, from my limited understanding, it looks like the ID I use for the Iframe when in the lightbox is not available when editing code on the main page. It gives me an error when using the the iframe ID on the main page. Is it possible to make both the lightbox and page communicate so they are using the same references?
Ok, you were right, you need to use wix storage api because the lightbox is an entirely different page, and you cant use $w on elements from another page.
so you need to import the local from wix-storage by putting this line on the top of the codes for each of the pages, the main page and the light box.
import {local} from 'wix-storage';
and in your main page in each onClick you need to add a line for the local setItem.
Yes, that works beautifully! Could I please ask one other thing of you?
Is there a snippet I could add that would “setItem” of the Source URL that is shown by default, before a button is clicked? So if a user arrives at the page and before clicking any of the menu buttons they click full screen, they would see the correct URL.
I did not quite understand what you were trying to do.
Anyway, the simplest way to send information to Lightbox is to use the API .
If you plan to create 20 similar pages, I would recommend that you keep all the information in the database and create dynamic pages .
This way allow you create only one page that will use as a template.
You can get the right iFrame’s link from the item’s dataset and set the link to the iFrame on onReady.
Thank you Matanya. I think this would be a great idea to save time by setting it up as a dynamic page, however it is out of my comfort zone for writing the code. I have set up dynamic pages with the editor before but with Editor X there are no hover boxes, so everything would need to be coded.
Would you be able to share a snippet of code to show how I can make the menu with hover effects for both the text and images that are connected to a repeater/database? I also need to “setItem” for each click so if the user clicks fullscreen the lightbox will show the correct source. Any help you can provide would be greatly appreciated!
Here’s a screenshot of the menu, the first one is currently mouseon. Once clicked, the item should remain highlighted until another item is selected.
Here’s a sample of my current code, for one button in the menu, the code is repeated 7 times for each button:
