Hover on product image to reveal random image (one of 4)

Hello!

Hoping someone can help me out with this-

I’d like to use a code to generate a random image from my products gallery once hovering over the product image. I implemented a code to reveal one of the images - but I have 4 images that I’d like it to cycle through at random upon hover.

Is this possible? I’d love some feedback if available.

PS - I don’t know where i put the code for the previous hover effect, as I’ve put in many codes over the past couple of years.

Thanks Community!

-Matteo

@DudeRanchCo

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Thanks for the speedy response @KetanKumar !!

https://dude-ranch.co/

The site is currently password protected as it is under construction -

password - dahwea

The “Lavendula” product has multiple images set up for testing purposes.

Again - I want to be able to see a randomized image (from the individual products) on all products upon hover. Each will have a total of 4, including the main image

@DudeRanchCo

can you please share any example?

@KetanKumar

I’m not sure where to find an example!

Like I said, there are 4 images per product, and i would like the hover effect to choose one to reveal at random. Currently there is a hover effect as the “lavendula” product shows - but it only switches to one of the product images. I want it to be a random product image every time you hover.

@DudeRanchCo

no rush yes its possible make more customization code please confirm This Example

Hey @KetanKumar !

This is a great plan B that I will consider, but not exactly what I’m looking for.

In the example you provided, the images loop in chronological order through the product image gallery.

I would like a single image from the product image gallery to appear upon hover - but instead of just switching to the next image in the gallery - I would like the image to be chosen at random- so every time you hover it is a different image in random order.

Currently on my site, the images switch to the last image in the gallery. How can I make it choose a random image every time?

Thanks again!!

@DudeRanchCo

thanks for it

but sorry its bit not possible to this also product image upload only shopify admin product side no any other way also slider work only that way

@KetanKumar

I’m very sorry, I don’t understand. There has to be an addition to the code that could randomize the images, instead of only jumping to the last one in the product images. I’m sure the code is just ‘random’, I just don’t know how to write it.

@DudeRanchCo

no sorry that was not possible randomize image to customization