Click on Item in Gallery -> Change src of an image

Ask the community
,
1

Hello,
I’m new to Wix Code and I’m struggling a bit to get what I want.

I have an image gallery and I want that, when an item is clicked, an image on the page is changed to the clicked item’s src and tooltip (the idea is having the gallery work as thumbnails and, when an item is clicked, the large image changes to the clicked thumbnail).

How can I do that?

2

Can you upload a drawing/illustration image, so we’ll better understand what exactly you want to implement?

3

Sure. Basically, I want the main image to become the item clicked.

https://static.wixstatic.com/media/a27d24_421990f89bdc4381b0ee76abdfb2afea~mv2_d_4032_3024_s_4_2.jpg(image larger than 4 MB)

4

@joaohess so add to your page the Thumbnail Gallery.

939×1289 212 KB

5

@jonatandor35 I was using it, but the Thumbnail Gallery has only one row of thumbnails (I know you can scroll horizontally, but I need several rows: I need to showcase all of my images at the same time as thumbnails)…

6

@joaohess There’s several ways to accomplish that. It can be done with galleries and/or repeaters.
Here’s one way:

  1. For the full-size image you should use the slide deck gallery (hereafter: “gallery1”).
  2. Go to its setting ad change from “crop” to “fit” if you want the whole image to be displayed
  3. For the thumbnails use a repeater (hereafter: “repeater1”), adjust its containers to the desired size and connect it to your database.
  4. Put a slide deck gallery (hereafter: “gallery2”) in the repeater’s container. Set the right size, set it to “fit”, set it to “when clicked: nothing happens”.
  5. Connect the image field in gallery2 to the image in your database.
  6. Put a completely transparent box (hereafter: “box1”) over the container
  7. Paste the following code in the page code section:

$w.onReady( function () {
$w(‘#repeater1’).onItemReady( ($item, itemData, index) => {
$item(“#box1”).onClick( (event) => {
let image = itemData.image;
$w(“#gallery1”).items = [{
“src”: image
}]
})
})
})