Question:
How to choose a specific image to display in a ProGallery via code (among the images which are in this gallery)
Product:
EditorX
What are you trying to achieve:
I have a ProGallery on my website, with Layout as thumbnails. I have different photos of my product and when I select the packaging for my product (multiple choices), I want the corresponding photo to display in my ProGallery.
I can’t find a solution to do that. I tried to rotate my items in the array and assign again to the gallery. It does it, but the issue is that if before I clicked on the 3rd thumbnail for example, gallery with reload with different order of items but will still show the one on the third thumbnail. And there is no way to know the currentItem selected with this type of gallery.
Any creative workaround is welcome!
Here is the code. It does the job as the images in the gallery get rotated. But if I had selected the third item on the gallery (I have a thumbnail display), it will still be the third item after rotation, which doesn’t help.
Unfortunately with this type of gallery it seems to be no getcurrentitem API or something like that to make it work…
if (formatoption.Format === “Biophotonic Wideneck Jar”) {
let existingItems=$w(‘#gallery1’).items;
let position=findBottlePosition(existingItems);
$w(‘#gallery1’).items=rotateArray(existingItems,position);
[…]
function findBottlePosition(arr) {
const index = arr.findIndex(item => item.slug && item.slug.includes(‘bottle’));
return index;
}
I’m still on editor x, I don’t see any slideshow. But I guess it would work with a repeater that I setup as slides? I prefered the look of the Pro Gallery but might need to go on slideshow indeed.
