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:
- Install the Cloud Zoom module.
- Download version 1.0.3 of the Cloud Zoom files (there are more recent versions. You will need 1.0.3).
- Upload the Cloud Zoom 1.0.3 files to /sites/all/libraries/cloud-zoom so that your folder structure looks like this:
- 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.
Woooow this is a great tutorial. Many thanks