How to select first item of gallery field in dataset

I have set up a gallery (not a Wix-Pro one) that retrieves pictures directly from a dataset field containing several images (let’s say: of wines) relating to some record (let’s say: a vineyard). I have also connected the gallery to separate previous/next buttons, connected them to the dataset and used embedded “on click” functionalities, as provided by Wix. These buttons serve to call up the next/previous record (vineyard) and to show the relevant images (wines) attached to it.

As of now, let’s assume that I have shown pic #3 of a given record (vineyard). When moving to the next record, the gallery will also show pic #3 of that new ID (or a blank page, if that vineyard only happens to have 2 images in that gallery field). But that is not what I want. I want the gallery to always pick up the first image per record, when moving back or forward.

Well, needless to say probably: I am new to this, but hope somebody can help.


Would you be able to provide your code and site link, along with the page that has this functionality and a screencast video if possible, so we can understand the issue a bit more and take a further look?

Based on your explanation it seems to me like you’d need to display the gallery by index of the image you’d like to display after clicking on next button. You can take a look at both the wixData query API to find the items from your collection & currentIndex API to target a specific image in the gallery.
Keep in mind not all galleries work this API.

Hope this was helpful!

Best regards,

Thanks, Miguel.

The currentIndex API should be the right approach - but I do not find anything like setting that index to a specific value.

Images are kept together with their elements in a field (as an array) in ‘#myDataset’. When moving between (“next” / “previous”) elements, the index of the gallery attached to the “after-event” element should be set to 0, so that currentItemIndex = 0.

The link to the page (in progress) is - the “next” and “previous” buttons are placed above the gallery. The image # (index + 1) is shown, when hovered.

I assume this is a simple one - if not, afterwards happy to screencast the whole thing. Thanks a lot!

The code on that page only operates some style / label issues. And stops where I got stuck (so just move to the end) - but here you go …

import {local} from 'wix-storage';

export function but1_mouseIn(event) {
 // save current label in local storage
 //change label while hovered: 
 let buttonLabel = 'Weingüter entdecken'
    $w('#but1').label = buttonLabel

export function but1_mouseOut(event) {
 //reset label to previous value 
    $w('#but1').label = local.getItem("oldLabel")

export function next_click(event) {
 // get currentItem index from gallery
 let currentItem = $w('#gallery1').currentIndex
    console.log("image index: " + currentItem)
 // set gallery index to ZERO, when clicking on "next" (should open the first item contained in the image array contained in field labeled "WeingutGallery" in $w('#dataset'))

Hi :raised_hand_with_fingers_splayed:

The gallery images inside the database are just an array, so you need to access the first item of that array.

$w('#dataset1').onReady(()=> {
    let item = $w('#dataset1').getCurrentItem();
    let imageSrc =[0];

gallery is the field key that holds the images inside a gallery in your database.

Then set this image as the source of an image element.

$w('#image1').src = imageSrc;

Hope that helped~!

Thank you very much, Ahmad.

This way I would get the current image of a gallery and refer it to an object to contain that image, if I understood well.

My issue is slightly different: I am moving from one element in the gallery to the other via buttons. Each element contains x images - but when the element opens up, it should always show the image with the index 0. Right now, it continues with the image index taken from the previous element - so if I had scrolled forward to image with the index 3 within the element A, when switching to element B, it would show the respective image also with the index 3. Which I do not want …

Could you please give it another try? :slight_smile:

Do you mean getting the image that is currently displayed? You can do so by getting the current Item from the gallery:

let curentItem = $w('#gallery).currentItem;

Are you using a dataset to display different items? If so, then you need to reset the the index before moving to the next item.

$w('#gallery).items = [];

Give it a shoot!

1 Like

Hi Thomas,
you are right, i see the problem, it seems that the gallery currentIndex is kept all the time without a way to reset it.

I will check it and get back to you.


Cool. Thanks, Avi. Looking forward to your reply!

Did you already have an opportunity to have a look, @Avi Guzansky?

@ahmadnasriya many, many thanks, Ahmad! Resetting the gallery items after changing a dropdown - setting the items to “[]” worked perfectly!

@amsat2016kaue happy to

Hello, I’m also looking for the way to reset the current index. Do you have an answer or suggestion?