Gallery is not playable

Ask the community
, , ,
1

Question:
What galleries are “playable”?

Product:
Wix Studio Editor

What are you trying to achieve:
I’m trying to add a code to a page with a Gallery Pro to change to the previous or next image when scrolling up or down.

What have you already tried:
the WIX IDE assistant gave me this code:

$w.onReady(function () {
    let lastScrollPosition = wixWindow.scrollY;

    wixWindow.onscroll(() => {
        const currentScrollPosition = wixWindow.scrollY;
        const gallery = $w("#gallery1");

        if (currentScrollPosition > lastScrollPosition) {
            gallery.next();
        } else {
            gallery.previous();
        }

        lastScrollPosition = currentScrollPosition;
    });
});

But this did not work. To check if the gallery was playable I coded:

$w.onReady(function () {
    let gallery = $w("#gallery5"); // replace "myGallery" with the actual ID of your gallery
    if (gallery.galleryCapabilities.isPlayable) {
        console.log("The gallery is playable");
    } else {
        console.log("The gallery is not playable");
    }
});

And the developer console determined that the gallery is not playable. What kind of gallery can I use to achieve this?

Thank you!

2

I don’t believe any of the galleries on Wix Studio are currently playable. You can request this feature on the roadmap: Product Roadmap

Another option is to use Slideshow Repeaters if that works for your usecase: changeSlide - Velo API Reference - Wix.com

3

Thanks Anthony! Are the slideshow repeaters playable? I will def give them a go!

4

They are but they don’t expose a galleryCapabilities.isPlayable property.

5

Hey Anthony, I tried using a Slideshow with no luck. Here is the code I used:

let lastScrollTop = 0; // to keep track of the last scroll position

$w.onReady(function () {
$w(“body”).onMouseInViewport(() => {
let st = $w(“body”).scrollY; // get the current scroll position
if (st > lastScrollTop){
// if the current scroll position is greater than the last scroll position, the user is scrolling down
$w(“#slideshow1”).next(); // navigate to the next slide
} else {
// if the current scroll position is less than the last scroll position, the user is scrolling up
$w(“#slideshow1”).previous(); // navigate to the previous slide
}
lastScrollTop = st; // update the last scroll position
});
});

I’m receiving the following errors:

Screen Shot 2024-03-05 at 7.55.37 am
Screen Shot 2024-03-05 at 7.55.37 am1426×184 43.5 KB

I must say that I have no idea about coding though. I’m using the Wix IDE AI assistant to try to achieve this. Any help is greatly appreciated!

6

It’s a bit hard to provide advice in this case. However according to the error #slideshow1 is a HiddenCollapsedElement, not a Slideshow. You’ll need to make sure you’re referencing the right element and that it’s not hidden/collapsed.

image

7

Thank you Anthony!

Yes, I’m not too sure what is going on. That is the correct slide show ID and it’s def not hidden.

Wix support just says to use a gallery that isPlayable but they didn’t mention which galleries have that capability.

If you know anyone who could give me a hand here would be amazing!

Thank you,