Copy source of Iframe from another page to lightbox

Ask the community
9

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:

import {local} from 'wix-storage';

let clickedBox;

$w.onReady( function() {
$w("#html2").src = 'https://my.matterport.com/show/?m=9uQxcG9Pf3P&play=1&lang=fr&wh=0&vr=0';
local.setItem('lightBoxSrc', 'https://my.matterport.com/show/?m=9uQxcG9Pf3P&play=1&lang=fr&wh=0&vr=0');
} );

export function box5_click(event) {
    $w('#html2').src = 'https://my.matterport.com/show/?m=9uQxcG9Pf3P&sr=-2.75,-.71&ss=329&play=1&lang=fr&wh=0&vr=0'
    local.setItem('lightBoxSrc', 'https://my.matterport.com/show/?m=9uQxcG9Pf3P&sr=-2.75,-.71&ss=329&play=1&lang=fr&wh=0&vr=0');
    $w('#imageX3').src = 'https://static.wixstatic.com/media/ab3098_dcf68efc1ed54b25af14b2e3ea13d8e9~mv2.png'
    $w('#imageX4').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
    $w('#imageX5').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
    $w('#imageX6').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
    $w('#imageX7').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
    $w('#imageX8').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
    $w('#imageX9').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
    $w('#text12').html = '<p class="p2">'+ $w("#text12").text +'</p>'
    $w('#text30').html = '<p class="p3">'+ $w("#text30").text +'</p>'
    $w('#text32').html = '<p class="p3">'+ $w("#text32").text +'</p>'
    $w('#text34').html = '<p class="p3">'+ $w("#text34").text +'</p>'
    $w('#text37').html = '<p class="p3">'+ $w("#text37").text +'</p>'
    $w('#text38').html = '<p class="p3">'+ $w("#text38").text +'</p>'
    $w('#text39').html = '<p class="p3">'+ $w("#text39").text +'</p>'
    $w("#html2").scrollTo();
    clickedBox = event.target.id;
}


export function box5_mouseIn(event) {
    $w('#text12').html = '<a target=""><p class="p2">'+ $w("#text12").text +'</p></a>'
    $w('#imageX3').src = 'https://static.wixstatic.com/media/ab3098_dcf68efc1ed54b25af14b2e3ea13d8e9~mv2.png'
}


export function box5_mouseOut(event) {
 if (event.target.id !== clickedBox){
        $w('#text12').html = '<p class="p3">'+ $w("#text12").text +'</p>'
        $w('#imageX3').src = 'https://static.wixstatic.com/media/ab3098_098b56bf2bc04de7ab44b2ccf8e2bcce~mv2.png'
    }
 
}