Quick View with Wix Lightbox

Visit Wix Ideas to learn more

🎬 Welcome to Wix Ideas' Quick View with Wix Lightbox! 🎥

Get ready to take your website to the next level with this amazing feature.

🚀 In this video, I'll show you how to use the Wix Lightbox to create a quick view for your Wix website. Say you do not want to redirect your site visitors to a dynamic page, but instead, you want them to have a quick overview of the item, then this feature will be very useful.

💻 Whether you're a blogger, photographer, or e-commerce owner, this tool is perfect for showcasing your products, images, and videos in a stunning way.

You'll learn how to easily add images and other Wix elements to your lightbox, customize its layout, use Wix Velo code to send data from a repeater on your page to your lightbox, and create a seamless user experience for your website visitors.

🤩 Plus, we'll give you some tips and tricks on how to optimize your lightbox for maximum engagement and conversions. 📈 So grab a cup of ☕️ and join us for this exciting tutorial! Don't forget to like and subscribe for more awesome content.

🔔 Let's get started! 🎉

Steps

1. Add a lightbox to your site

2. Add elements you wish to display

3. Connect the elements to your dataset

The Code

Step 1: Import wix window.

import wixWindow from 'wix-window';

Step 2: Add a page code to your repeater to get the ID of the item and send it to your lightbox

$w.onReady(function () {

    $w("#repeater9").onItemReady(($w, data) => {

        $w("#triggerButton").onClick(() => {

            wixWindow.openLightbox("lightboxName", data._id)

        });

    });

});

Step 3: Import wix window and wix data on your lightbox to receive data from the repeater on your page

import wixWindow from 'wix-window';
import wixData from 'wix-data';

Step 4: Use the lightbox getContext() function to receive the data(ID) and use it to filter the dataset using the dataset's setFilter() function.

$w.onReady(function () {

    let dataID = wixWindow.lightbox.getContext();

    console.log(dataID)

    $w("#dataset1").setFilter(wixData.filter().eq("_id", dataID));

});

That's it!

Facebook Page: https://www.facebook.com/wixideas

Facebook Community Group: https://www.facebook.com/groups/wixideas

Instagram: https://www.instagram.com/wixideas/

Website: https://www.wixideas.com/

YouTube Channel: https://www.youtube.com/@wixideas