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" />

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

  • Don't over-think the problem. You probably don't need AJAX, just set the image element's src attribute periodically and let the browser load stuff automatically. Commented Sep 28, 2014 at 14:59
  • I need to load images on demand because of the large number of images and their large sizes too. This is why I thought a PLAY button on each product is the best option. More details in my post above.
    – Akram
    Commented Sep 29, 2014 at 10:04
  • Thank you for clarifying, more details are always welcome on SO. I just have one pedantic note to make, you started by asking for help with "the small images". Commented Sep 29, 2014 at 11:37
  • You are right, sorry about that, I just fixed my requirement and made it more clear. Thanks
    – Akram
    Commented Sep 29, 2014 at 11:59

1 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.

  • I don't think carousel is a good option because of the size and number of images for each product. I explained this points in my edited post above. Thank you for your suggestion.
    – Akram
    Commented Sep 29, 2014 at 10:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.