Do you want to beautify your gallery or user profile?

You can enable image zooming using the cloudzoom module. the module utilizes jQuery script by Professor Cloud the idea is simple yet effective.

The idea of this is to utilize 2 different size of image, one is the small one and the other is the 3 times larger than the small one size.

Then utilizing jQuery, the image smoothly changed when the mouse cursor hovering the small image.

Now the drupal module makes it a lot easier to get this jQuery plugin in drupal. It creates CCK field formatter that you can use under the CCK field display option.

Setting it up is easy, you just need to create a small imagecache preset and the 3 times larger image cache preset. After that you need to go to your CCK field display option and select the cloudzoom field formatter.

The only catch is at current version the zoom style available by default is the one that creates a box in the side of the image.

If you want to use the style that zoom inside the image without creating another box, you need to change the code in the module a bit.

Look for the code on line 95 and change it as follow :


  // Return the preview image as a link to the larger image with a cloud-zoom CSS class
  return l($small, imagecache_create_path($zoom_preset, $element['#item']['filepath']), array('html' => TRUE, 'attributes' => array('class' => 'cloud-zoom', 'rel' => "position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4")));

Voila! you got the inner zoom style.

Note: the author of the drupal module states that in the future release those options will be able to be configured, so no need for hacking the code anymore. So try the dev version of the module or hack in hte 1.0 version of the module.

A sample of site that utilizes this plugin :

http://www.travesto.com/content/016845128jpg-world