Trying to implement a dynamic sub-menu overlay

[mightymuso]

Question:
Is it possible to implement a dynamic sub-menu overlay when clicking media?

Product:
Editor X

What are you trying to achieve:
I’d like a sub-menu to open when clicking an image, displaying information relating that that specific image, without switching web pages. Not the overlay option for individual images, but a dynamic one which appears over the entire webpage similar to a hamburger menu.

What have you already tried:
I’ve tried updating the settings in the fix pro gallery, though there seems to be no option for a sub-menu.

[onemoretime]

Hi, mightymuso !!

In this case, I think using a lightbox would be the first option to consider, but have you tried using a lightbox before? People tend to have mixed feelings about lightboxes—some find them too slow to display—so if you’re not a fan, we might need to explore other alternatives.

Another option to consider is placing a container that functions as an overlay covering the entire screen (entire viewport) and keeping it hidden until needed, then displaying it as an information panel. If you’re comfortable working with custom elements, you could also look into using modal libraries like SweetAlert, integrating them into Wix for a more customized experience.

[mightymuso]

Thanks for the reply!

Yeah I did a little experimenting and I reckon a Lightbox will work fine for the time being. I’ve set up a database and hooked up the data to the box elements, though I can’t seem to make it dynamic. I want the dynamic box to open when clicking an image from the pro gallery.

[onemoretime]

I see, so you’re using the Pro Gallery. With Pro Gallery, I believe an overlay displaying detailed information should open when you click on an image or video. Does it seem like this functionality isn’t working for you?

It seems you’re using Editor X, but I recall that Editor X is planned to be integrated into Wix Studio in the future. Since there may be slight differences in the specifications between the two editors, I recommend implementing this with the Wix Studio editor moving forward. One of the reasons is that I don’t have much experience with Editor X myself. But if you’re open to it, I suggest trying Wix Studio’s Pro Gallery first. You might find that you really like it!

[mightymuso]

Yeah you’re right about the gallery specific overlay which I already use to display quick info when hovered over. I want the detailed information to be displayed dynamic Lightbox which opens when clicked. Here’s how I’ve implemented it so far:

There doesn’t seem to be a way to make the Lightbox dynamic through the editor, so I’ve tried editing the page and Lightbox code. So far, nothing changes. Here’s my code:

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

$w.onReady(function () {
    $w('#projectsGallery').onClick((event) => {
        const clickedItem = event.target;
        const itemId = clickedItem._id;

        wixData.get("Projects", itemId)
            .then((item) => {
                wixWindow.openLightbox("gameOverlay", {
                    banner: item.gameBanner,
                    gameTitle: item.gameTitle,
                    publishDate: item.publishDate,
                    developer: item.developer,
                    role: item.role,
                    description: item.description,
                    gameVideo: item.gameVideo
                });
            })
            .catch((err) => {
                console.error("Error fetching item:", err);
            });
    });
});

import wixWindow from 'wix-window';

$w.onReady(function () {
    const receivedData = wixWindow.lightbox.getContext();

    if (receivedData) {
        $w('#gameBanner').src = receivedData.banner;

        $w('#gameTitleText').text = receivedData.gameTitle;
        $w('#publishDateText').text = receivedData.publishDate;
        $w('#developerText').text = receivedData.publisher;
        $w('#roleText').text = receivedData.role;
        $w('#descriptionText').text = receivedData.description;

        $w('#gameVideo').src = receivedData.videoUrl;
    }
});

I didn’t realise that, but now that you mention it I’ve just noticed Editor X swapped to Wix Studio, so I guess I’m using that now!

[mightymuso]

Managed to get it working! I updated the code on the home page and Lightbox like so:

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

$w.onReady(function () {
    $w('#projectsGallery').onItemClicked((event) => {
        const clickedTitle = event.item.title;

        wixData.query("GameOverlay")
            .eq("gameTitle", clickedTitle)
            .find()
            .then((results) => {
                if (results.items.length > 0) {
                    const item = results.items[0];

                    wixWindow.openLightbox("gameOverlay", {
                        banner: item.banner,
                        gameTitle: item.gameTitle,
                        publishDate: item.publishDate,
                        developer: item.developer,
                        role: item.role,
                        description: item.description,
                        videoLink: item.videoLink,
                        gameLink: item.gameLink
                    });
                } else {
                    console.log(clickedTitle);
                    console.log("No matching item found.");
                }
            })
            .catch((err) => {
                console.error("Error querying collection:", err);
            });
    });
});

import wixWindow from 'wix-window';

$w.onReady(function () {
    const receivedData = wixWindow.lightbox.getContext();

    if (receivedData) {
        $w('#banner').src = receivedData.banner;
        $w('#gameTitleText').text = receivedData.gameTitle;
        $w('#publishDateText').text = receivedData.publishDate;
        $w('#developerText').text = receivedData.developer;
        $w('#roleText').text = receivedData.role;
        $w('#descriptionText').text = receivedData.description;
        $w('#videoLink').src = receivedData.videoLink;
		$w('#gameLink').link = receivedData.gameLink;
    }
});

It’s a little slow to open, about 2-3 seconds. Is that just a limitation of the Lightbox, or is there a way to reduce this delay?

[onemoretime]

Oh, fantastic! It seems there’s not much I need to teach you! One possible way to speed up the display of a lightbox is by using "prefetch-page-resources" , but honestly, I’m not sure how effective it will be. In your case, rather than the lightbox itself taking time to open, it might be more natural to think that the query is what’s causing the delay every time.

prefetch-page-resources

[mightymuso]

Yeah I tried prefetch and it didn’t make a noticeable difference, so you’re probably right. In any case, thanks for your help!

[CODE-NINJA]

I think this is not just a limitation of the LIGHTBOX.

Regarding your CODE → it tells me that you query your DATABASE with every click, right?
Really??? You query your databse again and again and again?

YES YOU DO !!! LOOK HERE…

$w(‘#projectsGallery’).onItemClicked((event) => {
const clickedTitle = event.item.title;

    wixData.query("GameOverlay")

Does Chat-GPT agree to my assumtion? ->>>>

Yes, the slowness you’re experiencing is likely because the code queries the database every time an item is clicked. Querying the database repeatedly can be time-consuming, especially if the database is large or if there are many clicks in quick succession.

To improve the performance, you can preload the data when the page is loaded and store it locally in a variable. This way, when an item is clicked, you can access the data immediately without querying the database again.

I think a variable for storing data, was also my idea.

But what next ?

You have to load (QUERY) your DATABASE once on very beginning, thats enough, as long as your data do not change inside your databse.

Let’s say you have queried your DATABASE and stored all the found data inside the following VARIABLE…

—> const gameData;

Now, you start the find-method to find the right CLICKED-DATA inside your VARIABLE, which will exist all time without any further RE-QUERING.

$w('#projectsGallery').onItemClicked((event) => {
        const clickedTitle = event.item.title; console.log('Clicked-Title: ', clickedTitle );

        // Find the matching game data from the preloaded array
        const item = gameData.find(game => game.gameTitle === clickedTitle);

        if (item) {
            wixWindow.openLightbox("gameOverlay", {
                banner: item.banner,
                gameTitle: item.gameTitle,
                publishDate: item.publishDate,
                developer: item.developer,
                role: item.role,
                description: item.description,
                videoLink: item.videoLink,
                gameLink: item.gameLink
            });
        } else {
            console.log(clickedTitle);
            console.log("No matching item found.");
        }
    });

Benefits:

• Performance Improvement: Only one database query is made when the page loads, reducing the delay and enhancing the user experience.
• Quick Access: Searching a local array is much faster than querying the database repeatedly.

This should significantly speed up the response when clicking items in your gallery.

Give some feedback, if this provided idea → improved your process.

[onemoretime]

As I mentioned earlier, I also believe that querying on every click is the cause of the delay, so I think it’s best to follow what the @CODE-NINJA suggested. To reduce the load on the system, it’s important to minimize the number of accesses to the collection as much as possible. You will need to either save the data in a variable or use a dataset.

[CODE-NINJA]

Yes, i think a DATASET could also be an option, but this would change the entire code, since working programmatically with a DATASET is not easy for everyone, because DATASET has it’s own process-flow.

But is a possible option.

[onemoretime]

I completely agree with you!! （I thought it might be a valid use of datasets, so I ended up saying something confusing! Sorry about that! Simple is the best!）