Iterate through gallery items/rows

Hello,

I’m trying to create a page with a gallery, that is connected to a collection, while each collection item contains a Media Gallery - Meaning, each item (row) in the gallery contains multiple images.

Once a user hits a button (Next/Prev) it will move to the next/prev row in the collection and show the matching images in the gallery.

Here’s a look at the collection:

Basically, the way I see it there are two possible solutions:

  1. use the built-in index of items in the collections and functions - getCurrentItemIndex(),setCurrentItemIndex() and etc…
  2. create a column of my own with index number, and iterate using that.

The thing is, no matter what I do with the button functions I get errors:

Would love some help!
Thanks,
Opher

You don’t say what your errors are. What’s not working? What happens?

Why don’t you use the next() and previous() functions?

You are correct… forgot about that part…

Here’s the error im getting:


How would I use the next() function within a button click function?

Add something like the following to the button click event handler:

$w("#dataset1").next()
  .then( (item) => {
    // do whatever you need with the new item
  } )
  .catch( (err) => {
    let errMsg = err;
  } );

BTW - You get the errors since you are not handling the Promise that the onCurrentItemIndex() method returns. See the documentation for more details.

@yisrael-wix

First of all, thanks a lot for your help.

Now I copied that piece of code you inserted above, but I miss just a tiny line. I want the function to simply iterate to the next item, so that gallery that is connected to the collection will show the next line.
What should I enter in the .then() part?

Opher

@opherh Gallery also has a next() function .

@yisrael-wix But the gallery is fed by the collection…

If I use just $w(‘#dataset1’).next() it will show a blank page in the gallery…

Any idea?