Loading small image from product gallery every x seconds when mouse hover on image in product list

Question

I need help regarding getting all the small images from Magento product gallery for a certain product in the correct order that was set in admin, append them to a hidden div, then show them one after the other. When the user hovers the mouse over the image in product list (category page) the images should start showing one after the other in the correct order every x seconds.

Any idea how to do that in AJAX?

EDIT: I have modified the above request to fit my needs better in the least possible cost on the server/client side. Here are the changes to my request: 1. Replace HOVER with PLAY button because HOVER is not a good option for mobile and tablet devices. 2. On each HOVER (on purpose or accidentally), AJAX calls the server, HOVER is not a good idea after all.

I solved the problem above but still have one issue that I will discuss it later on. The way I solved my problem is like I said adding PLAY button below each image to see the remaining images in the product gallery upon user request through AJAX. AJAX was very fast getting the URLs for the images, no problem with that but my issue is the following: I setInterval of 2000ms to assign image src then load the image, but the problem is that on slow devices, the load is taking more time than 2000ms, which is resulting in showing images randomly because the rest where taking more than 2000ms to load.

So my main issue now is to find a way to get all images loaded upon clicking PLAY before starting to show the first image, even if first image is loaded. Any idea how to do that?

PS: the carousel is not an option because it loads all the images for each product, and the images are very large in size (above 300k each, and I might have up to 5 images for each product) in addition to infinite scrolling, it's a huge traffic load for the server.

Another EDIT: I just managed to get the images inside a div like that:

<DIV class="alpha">
    <img src="images/image1.jpg" />
    <img src="images/image2.jpg" />
    <img src="images/image3.jpg" />
    <img src="images/image4.jpg" />
</DIV>

All what I need so far is to show each every x seconds.

Answer 1

i would say don't use ajax, because it will be annoying to user to wait for every image. You can use carousel to do this, u just need to load all images in ul li once, and make sure that are display none, then you can use image hover event (for small images).

Whenever hove then start carousel for that, you can set delay also.

There are lots of carousel available online, you just need to find out based upon your requirement.