Next and Prev dynamic pages (filtered fields).

Ask the community
,
1

Hi There,

On my site I have created two collections:

GALLERIES (3 fields)

  • Gallery Title (LANDSCAPE, PORTRAIT, ARCHITECTURE)
  • Cover Image
  • Description

IMAGES (4 fields)

  • Image Title
  • Image
  • Gallery (LANDSCAPE, PORTRAIT or ARCHITECTURE)
  • Description

I need 1 single page for every image and 1 page for every gallery.

Gallery Title (GALLERIES) and Gallery (IMAGES) fields are connected but not with reference fields.

I created my dynamic page Gallery and it’s ok.

So i have 3 categories dynamic pages:

LANDSCAPE (with all my landscape photos)
PORTRAIT (with all my portrait photos)
ARCHITECTURE (with all my architecture photos)

For my needs i insert a Galleries Database and filtered it (Gallery Title is current value from Gallery (Images).

Then i created my single image dynamic page.

When I click on an image in the galleries, the single photo page opens and it’s ok but …

If I want to see the next photo of the gallery with the next button, it shows me ALL the image database and not just the gallery images. Next dynamic page function forget the “gallery filter”.

When I am in a gallery and click on a photo I would like to scroll the photos only in the gallery and not all the database.

So, i need Corvid code or is there a solution without it ? I don’t want create a single database for every gallery (i will need 30 or more galleries …).

Thank you in advance, Stefano.

2

Please check Velo database(JS skill needs) OR hire a wix partner.

3

This can be achieve using code

4

Thank you. Where can i find some examples?

5

I solved it with this tutorials. Thank you so much Sam, great !

https://support.wix.com/en/article/velo-tutorial-creating-previous-and-next-buttons-for-a-dynamic-item-page-with-code

But … how to hide Prev Button on first item and Next Button on last item ? Code of tutorial disables buttons. I prefer to make them disappear.

So i add this to If:

else {
$w(“#previous”).hide();
}
and

else {
$w(“#next”).hide();
}

It seems to work