• Doriel Alie

Create a Pop-Up Lightbox from a Repeated List in a Wix Website - Code and Demo

Here I'll demonstrate how to create an attractive list of recipes with individual buttons that load a pop-up lightbox with the ingredients and cooking instructions.


Follow along and see what functional lists you can create!



TIMESTAMPS


00:00 Introduction and reasons for using a light box pop-up.

01:04 Add a repeater

01:27 Create a database

02:20 Add fields to the database

03:10 Add items to the database manually, or

03:35 Import items through a .csv file

05:47 Add a dataset to the page and connect to database

06:06 Make sure you’ve turned on the developer’s mode

07:08 Add ‘Next’ & ‘Previous’ buttons

07:38 Connect repeater to the dataset

10:30 Add button inside repeater to link the lightbox pop-up

11:30 Attach and paste 1st part of code onto the button inside of the repeater

13:24 Create a lightbox

18:12 Add the 2nd part of the code into the lightbox

18:55 Add a dataset to the lightbox

20:30 Check code field names are correct

21:10 Preview

21:36 Connect ‘Next’ & ‘Previous’ buttons

22:20 Check your database is clean


 

WIX CODES TO PASTE


Part 1 (attached to button inside the repeater)


export function viewMealIeadsButton_click(event, $w) {

let mealTitle = $w('#MealLabel').text

console.log(mealTitle)


wixWindow.openLightbox('Meal Ideas', mealTitle)

}


Part 2 (paste directly into the developer's console of the lightbox)



import wixData from 'wix-data';

import wixWindow from 'wix-window';


let popup = wixWindow.lightbox.getContext();

console.log('popup')

console.log(popup)


$w.onReady(function () {

$w("#mealIdeasDataset").onReady(() => {

$w("#mealIdeasDataset").setFilter(wixData.filter().eq("title", popup))

.then(() => {

let currentItem = $w('#mealIdeasDataset').getCurrentItem();


$w('#image1').src = currentItem.foodPic;

$w('#nutritionalValue').text = currentItem.nutritionalValue;

$w('#ingredients').text = currentItem.ingredients;

$w('#instructions').text = currentItem.instructions;

$w('#title').text = currentItem.title;


setTimeout(function () {

$w('#image1').show();

}, 500)


})

})

})


Make sure to check out my awesome template offer at www.getyourown.online and feel free to check me out on LinkedIn at https://www.linkedin.com/in/doriel-alie-61263b1b1/

or email me at doriel.alie@gmail.com



216 views
Close Site Navigation