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.
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 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
local.setItem("oldLabel",$w('#but1').label.toLocaleString())
//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'))
// HERE I GOT STUCK!
}
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 …
