How to load light boxes from a dropdown selection

Discussion Ask a question
,
1

I have created a user input dropdown with 3 options. Each option should open a lightbox. I have been able to make it work for URL’s but somehow I can’t workout how to get it to work using the wixWindow - Open Lightbox function to get it work.

NOTE: I am very new in coding and using Wix Corvid, so please be patient with me. Thanks, really appreciated.

Below the code I have been able to create and working for the URL dropdown.

import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;

$w.onReady( function () {

$w(“#dropdown1”).options = [
{“label”: “Variety 1”, “value”: “https://www.google.com”}, // Variety 1 Lightbox
{“label”: “Variety 2”, “value”: “https://www.google.com”}, // Variety 2 Lightbox
{“label”: “Variety 3”, “value”: “https://www.google.com”} //Variety 3 Lightbox
];

});

export function dropdown1_change_1(event) {
//Add your code for this event here:
let gotoPage = $w(“#dropdown1”).value;
wixLocation.to(gotoPage);

}

What I want to achieve now is, to change the URLs with Variety 1, Variety 2, Variety 3 in the dropdown options, and then change the export function “dropdown1_change_1(event)” so the lightboxes Variety 1, Variety 2, and Variety 3 will be loaded on selection.

Is anyone out there who can help me out and show me how to write the correct export function.

Thanks heaps guys and girls.

2

Wix Lightboxes don’t have a url address, to use them you have to use the Lightbox name.

Have a look here for more info.
https://www.wix.com/corvid/reference/wix-window.lightbox.html
https://www.wix.com/corvid/reference/wix-window.html#openLightbox
https://www.wix.com/corvid/reference/wix-window.lightbox.html#close

https://support.wix.com/en/article/about-lightboxes
https://support.wix.com/en/article/lightbox-appearing-in-site-url

Plus, previous forum reply from Doron which explains it very well.
https://www.wix.com/corvid/forum/community-discussion/how-to-open-a-lightbox-with-a-button-in-a-header

However, if you are wanting to do something like yours above, have a look here for an example.
https://www.wixcreate.com/adding-a-url-to-a-lightbox

1 Like
3

Thanks ‘givemeashisky’ I will go trough those links and try to work it out. Will get back with further questions or the solution.

4

I was able to work it out by adding the below code. However, I was wondering if it would also be possible to use the openLightbox function instead using a URL for my lightbox. Anyone out there who could point me into the right correction? I’m sure there must be another way. Using my code seems to make it quite slow loading the lightbox up.

Add this part of the code into the ‘Site’ tab of the page where you want to load the lightbox from


// This opens any lightbox on this site

import wixWindow from 'wix-window';

import wixLocation from 'wix-location';

function open_Lightbox(){

	let query = wixLocation.query;

	var goto = query.name;

	wixWindow.openLightbox(goto);

}

$w.onReady(function () {

open_Lightbox();

});

Add this part of the code into the ‘Page’ tab of the page where you want to load the lightbox from

import wixWindow from 'wix-window';

import wixLocation from 'wix-location';



$w.onReady(function() {



  $w("#dropdown1").options = [

    {"label": "Variety 1", "value": "https://rendawg.wixsite.com/rendawgplayground/join?name=Variety1"}, // Variety 1 Lightbox

    {"label": "Variety 2", "value": "https://rendawg.wixsite.com/rendawgplayground/join?name=Variety2"}, // Variety 2 Lightbox

    {"label": "Variety 3", "value": "https://rendawg.wixsite.com/rendawgplayground/join?name=Variety3"} //Variety 3 Lightbox

  ];



});



export function dropdown1_change_1(event) {

	//Add your code for this event here: 

let gotoPage = $w("#dropdown1").value;

wixLocation.to(gotoPage);

}

Anyone out there who can help me with loading the lightbox locally and not as a URL please? Any advise is kindly appreciated. Thanks guys and girls.

5

Hello everybody - I have sat down another 5 hours and I completely rewrote my code. It now opens the Lightboxes with the wixWindow.openLightbox(“lighbox1”) function.

For those who are interested I post my code here, so someone else, how is kind of a newbie like me doesn’t have to go through hours of google searches as well as trying out.

Be aware that I needed to create a data collection with the names of the Lightboxes. Then I connected the dropdown fields with a dataset to the database.

I set the permissions as follows:
Collection Type = Site Content
Who can read content from this collection? = Anyone
Who can create content for this collection? = Admin
Who can update content for this collection? = Admin
Who can delete content for this collection? = Admin

I created 2 fields in this Data Collection

  • Key
  • Lightbox to open

The key field I used for filtering out the data for the 3 dropdown menus, as well as for the sorting in the Datasets

Here the code:

// This part imports the WIX APIs

import wixData from 'wix-data';

import wixWindow from 'wix-window';



// This part loads the Variety Lightboxes

export function dropdown1_change(event) {

	//Open Lightbox Variety 1: 

if ($w('#dropdown1').value === "Variety 1")

    (wixWindow.openLightbox("Variety 1")

    )

    //Open Lightbox Variety 2:

if ($w('#dropdown1').value === "Variety 2")

    (wixWindow.openLightbox("Variety 2")

    )

    //Open Lightbox Variety 3:

if ($w('#dropdown1').value === "Variety 3")

    (wixWindow.openLightbox("Variety 3")

)}





// This part loads the Challenge Lightboxes

export function dropdown2_change(event) {

	//Open Lightbox Challange: 

if ($w('#dropdown2').value === "Challenge")

    (wixWindow.openLightbox("Challenge")

    )

    //Open Lightbox Prizes:

if ($w('#dropdown2').value === "Prizes")

    (wixWindow.openLightbox("Prizes")

    )

    //Open Lightbox Pricing:

if ($w('#dropdown2').value === "Pricing")

    (wixWindow.openLightbox("Pricing")

)}



// This part loads the Timetable Lightboxes

export function dropdown3_change(event) {

	//Open Lightbox 21 Day Program: 

if ($w('#dropdown3').value === "21 Day Program")

    (wixWindow.openLightbox("21 Day Program")

    )

    //Open Lightbox Weekly Timetable

if ($w('#dropdown3').value === "Weekly Timetable")

    (wixWindow.openLightbox("Weekly Timetable")

)}
6

This has resolved my issue! Thanks to all of you who pointed me into the right direction.