IMPORTANT: The 1.x plugin has been removed from the Professor Cloud website. Only the 2.x plugin is available now, which is not tested with the module and is only free for non-commercial use.

This module integrates the Cloud Zoom JQuery addon (by Professor Cloud) with CCK ImageField and ImageCache (or Drupal 7's core Image module).

This addon provides a small, thumbnail sized image, with an on-hover popup, zoomed and centred on a larger version of the image.

To configure this module you need to follow these steps

Instructions

Drupal 6

1. Download the module into your modules folder.
2. Download Cloud Zoom 1.x (currently, 2.x is not supported). You can get the 1.0.3 release for free, using this link.
3. Expand the ZIP into the "cloud-zoom" subfolder within the module.
   • cloud-zoom.1.0.3.min.js
   • cloud-zoom.css
4. Head onto your site and enable the module. Please take note of the two required modules (ImageCache and ImageField)
5. Within ImageCache, configure 2 presets - one for the small "preview" or thumbnail, and another for the larger image to be zoomed in on. For example, the "preview" could be set to Scale the image to 300 wide and the larger image could be set to Scale the image to 900 wide. This would provide a 3x zoom factor
6. Edit a content type which has an Imagefield and goto the "Display Fields" tab.
7. Set the display format (one of the drop downs) for the field to Cloud Zoom:... and chose the appropriate preview -> zoom ImageCache preset names.
8. Next time you view this image, you should see the small preview and a larger preview popup when you hover your mouse over the image.

Drupal 7

1. Download this module into your modules folder.
2. Download the library into sites/all/libraries/cloud-zoom, using the above link of the supplied drush command (drush cloud-zoom-download or drush czd for short).
3. Enable the module (and dependencies, such as libraries (2.x) and core Image module.
4. Find your image field you want this to apply to and go to the Manage Display tab (you might need to enable Field UI too).
5. Cloud Zoom is now an Format for the Image. Once selected, options will appear to the right to configure the plugin for that field. You can control things like the gallery mode, which image presets are used, positioning and so on. Remember to click the Update and Save buttons when you're done.
6. Visit an entity with the field on it (which has associated images). They should now appear as zoomable images.