| Drupal
Use Cloud Zoom for Thumbnail Galleries in Drupal

Cloud Zoom is a JQuery addon that provides image galleries that are ideal for shopping carts.

Cloud Zoom will show a small, thumbnail sized image. When you hover over the small image, you'll then get a large version of the image. This effect is really popular in e-commerce: you'll see it on Amazon.com and in Drupal Commerce.

Here's how to use Cloud Zoom in Drupal:

Use Cloud Zoom for Thumbnail Galleries in Drupal
  • Go to a content type that uses an image field.
  • Click the Manage Display tab.
  • Change the Format to "Cloud zoom".
  • Save the content type.
  • You will now see a wide range of settings. Click the cog next to those settings:
  • Chose the settings for your galleries. The two most important settings are "Slide image style" and "Thumbnails image style". These control the size of the images at the top and bottom of the gallery.
  • Save the content type.
  • Go to the add content and upload several images:

You will now see that Cloud Zoom is working on your site. All of the images will be showing underneath the main image on top. Hover your mouse over the smaller images and the large image will update.


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.