Use Cloud Zoom for Thumbnail Galleries in 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:

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

Instructor

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

0 0 votes
Blog Rating
Subscribe
Notify of
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ETweneboah

Woooow this is a great tutorial. Many thanks

1
0
Would love your thoughts, please comment.x
()
x