Wix Pro Gallery - Updating Progress Bar or Gif

Ask the community
,
1

Hi!

Currently, I’m working with a Wix Pro Gallery connected to a Dataset. I want to show the user that the images are loading (they are around 60). I’ve been trying to implement 2 solutions:

  • Creating a progress bar which is updating progressively while the images (from a gallery)
    are loading.
  • Creating a gif which is working until the gallery is loaded so then I’ll hide it.

My question: which event in Corvid handle the situation when the gallery is ready or still updating? So I can update the progress bar o the gif.

Many thanks!

2

Note that the Wix Pro Gallery is a Wix app and may not always work with being integrated with code, so you might have to revert to a normal Wix Gallery.

As for your question, I think that this youtube video here should help with showing a progress bar when uploading something.
https://www.youtube.com/watch?v=UrWN6oj4QGM

Otherwise, you can look at a preloader from Wix like this.
https://www.wix.com/corvid/example/promotional-preloader?experiment_id=maketecheasier&utm_campaign=ma_maketecheasier_wixcode

Or for a good preloader for page, look at this previous forum post here.
https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website

3

Hi GOS, many thanks for the alternatives!
I’m just curious what’s the event that tells the page that the gallery’s already loaded all the images.

In the first alternative you sent, they use the dataset component for doing this: $w(“#dataset1”).onAfterSaver()

But I’m not sure what’s same event for galleries.
Maybe the quickest option is just to go for the preloader.

4

You probably won’t be able to do it with the Wix Pro Gallery as that is a Wix app.

However, you can do it with a normal gallery and use the Gallery API.
https://www.wix.com/corvid/reference/$w.Gallery.html

If you are using your gallery with a dataset, then you can simply get the dataset to be loaded straight after the page is loaded.
https://www.wix.com/corvid/reference/wix-dataset.Dataset.html#onReady

5

The preloader is working perfectly! I’m using these events:

$w.onReady(() => {
waitForLoading();
});

Many thanks GOS!