Cloud Zoom Alternative

Feb
20
2012

A client needed the ability to easily zoom into images in place. That is, display a small image, and when hovering, zoom a part of the image. In that spirit, I found the freely available cloud zoom library. Though I did find a Drupal module for that, it only exposed a very limited amount of options that are available, and the dev version, which included more features, had bugs (hence the dev). This is my implementation, which (hopefully) will help people out.

To use, simply

  1. Install the module as any other
  2. Download the necessary library from Professor Cloud
  3. Deploy it
    • If you have the libraries module, deploy it in your libraries folder. 
    • Else unzip in the module folder, so that [module-folder]/cloud_zoom/cloud-zoom.1.0.2.js is accesible
  4. Navigate to the module settings page ( admin/settings/cloud-zoom/general )
  5. Click Add to create a new preset
  6. Fill out the name, and the imagecache presets you need
    • Thumbnail for gallery images ( eg 80x80 )
    • Active for the box on which the lens appears ( eg 250x250 )
    • Over is the big image, of which only a part will appear ( eg 800x800 )
  7. Select any library options, and click Save
  8. (Optional but recommended) Flush all caches
  9. Go to your content type, in the display settings. ( eg for story admin/content/node-type/story/display/basic )
  10. For your imagefield(s) select "Cloud Zoom: [presetname]" from the dropdown
  11. Save and enjoy!
Features
  • Implemented (v.1.1)
    • Integrates with the Cloud Zoom jQuery library
    • Uses Libraries API when available, defaults to module directory otherwise
    • Requires Imagecache and Imagefield
    • Exposes all library options
    • Define an unlimited number of presets, each with its own library settings.
    • Automatically use Cloud Zoom Galleries when used in a multivalue imagefield
    • Use titles in images (even when using galleries, via JS hack)
    • Use the Farbtastic colorpicker for tint color selection
    • Lightbox module integration via Lightbox2 module ( no hacks / edits required to the library! )
    • Views Gallery integration ( select to group values, without filling in number of images )
  • Planned
    • Features integration
    • Default CSS styles
Changelog
  • 0.1 -- Basic fork
  • 0.5 -- Basic functionality
  • 0.6 -- Added farbtastic color picker
  • 0.7 -- Added image title options, fixed title in galleries ( JS hack )
  • 1.0 -- Published to client websites
  • 1.1 -- Added Lightbox integration via Lightbox2 module ( requires jQuery update )
Requirements
  • Requires the Cloud Zoom jQuery library
  • Requires Imagecache module
  • Requires the Imagefield module
  • Optionally requires the Libraries module ( if not present it defaults to the module directory )
  • If you want to use Lightbox integration, you need the Lightbox2 and jQuery Update modules.
File attachments
cloud_zoom.zip

Tags

Project Categories