Pausing galleries when not in view

Ask the community
,
1

Hi, I’d like to pause galleries when they aren’t in view, and play them again when they are back in view (mainly for performance reasons as my site has many galleries, but also so it continues where it left off). I know the .onViewportLeave exists, but I’m just stumped on how to pause multiple galleries without copy and pasting the same code for every single one of the galleries.

Basically, I don’t want to cause spaghetti:
if (gallery#1 left viewport){
pause gallery#1
}
if (gallery#2 left viewport){
pause gallery#2
}
etc.

This is probably a very noob question to ask, and I will most likely facepalm when someone answers this, but please don’t be too harsh :).

2

Hi,

You can definitely accomplish this with Corvid. You will want to use the pause() function the way it is explained here .

You are correct about the onViewPortLeave() function. To get a little more clarification with an example, check out this link here .

If you don’t want to copy and paste the same code for every gallery, you can create a function that will require either 1 call per gallery element or just handle all of them within 1 function and call it once. It all depends on what you prefer.

Have great one!
Edward

3

Hello,
thanks for your answer. I already figured out how to make them pause (and play) one at a time:
$w(’ #gallery1 ‘).onViewPortLeave(){
$w(’ #gallery1 ‘).pause();
}
$w(’ #gallery1 ‘).onViewPortEnter(){
$w(’ #gallery1 ').play();
}

(as you can see this would be quite messy code with 13 galleries)

and I want to have them each toggle separately, but not have to copy paste this code line for every single one of the galleries (referring back to what you said, I think what I am trying to do is “1 call per gallery element”).

Here’s some more info on what my website looks like so you can better understand what I’m trying to accomplish: I have a stack of galleries that all have autoplay enabled. It’s around 13 galleries stacked, and can therefore cause quite some performance issues on lower end computers, so I would like for each gallery to pause when it scrolls out of the screen and play when it re-enters the screen.

I’m sure this can be done. Could you post a quick example of how you would handle this? (just an example for 2 or 3 galleries would help, so I have a rough idea of how to make something like this).