Image Zoomer

Image Zoomer (or Image zoom) is a Drupal 7 module which provides 2 JQuery plugins; Power Zoomer and Featured Zoomer.

Power Zoomer demo can be seen here:
Powerzoomer.htm

And Featured Zoomer demo can be seen here:
Featuredzoomer.htm

=============================
HOW TO INSTALL:

1. Download and place this module to your Drupal 7 as normal
(sites/all/modules/imagezoomer)

2. Download the plugins (Powerzoomer and Featuredzoomer)

2.1 For Powerzoomer
http://www.dynamicdrive.com/dynamicindex4/ddpowerzoomer.js

2.2 For Featuredzoomer
http://www.dynamicdrive.com/dynamicindex4/multizoom.js
http://www.dynamicdrive.com/dynamicindex4/multizoom.css
http://www.dynamicdrive.com/dynamicindex4/spinningred.gif

3. Upload all the above to libraries folder so that they look like:

sites/all/libraries/imagezoomer/ddpowerzoomer.js

sites/all/libraries/imagezoomer/multizoom.js
sites/all/libraries/imagezoomer/multizoom.css
sites/all/libraries/imagezoomer/spinningred.gif

4. Enable the module from your Drupal site: /admin/modules

5. Visit this page to configure all the plugins options: /admin/config/user-interface/imagezoomer

=============================
HOW TO USE:

I. FOR NORMAL USERS

1. In your content type, add an image field

2. Go to "Manage display" then change display format from "Image" to "Power Zoomer" or "Featured Zoomer"

3. Click on the cog wheel and select an image style for displaying and another for zooming. For zooming, normally, select "Original" for the best resolution. You could also select other image style if the original image is too large.

4. Save your setting. Create a new node (of that content type), upload an image then save it.

5. In the node view, you should be able to zoom your image using a magnifying glass now.

II. FOR DEVELOPERS

The module provides a theme function so that developers could use it in coding.

Please take a look at this example below:

1. For Power Zoomer

print theme('imagezoomer_power_image', $variables);

With $variables can be declared as such:

$variables = array(
  'file' => $file,
  'image_style_display' => 'style1',
  'image_style_zooming' => 'style2',
  'imagezoomer_power_options' => $options,
);

$file: Drupal image file object. It should include a path to the image file.

'style1': Image style name for displaying. For example: 'product_thumb'.

'style2': Image style name for zooming. It should be larger than style 1. For example: 'product_large'.

$options: Are the powerzoomer plug-in options. For example:

$options = array(
  'imagezoomer_power_default_power' => 2,
  'imagezoomer_power_power_range_low' => 2,
  'imagezoomer_power_power_range_high' => 7,
  'imagezoomer_power_magnifier_size_width' => 75,
  'imagezoomer_power_magnifier_size_height' => 75,
);

If you don't set the specific options as above (leave it empty, for example: 'imagezoomer_power_options' => array())
the theme will take default settings from the settings page.

2. For Featured Zoomer

print theme('imagezoomer_featured_image', $variables);

With $variables can be declared as such:

$variables = array(
  'file' => $file,
  'image_style_display' => 'style1',
  'image_style_zooming' => 'style2',
  'imagezoomer_featured_options' => $options,
);

$file: Drupal image file object. It should include a path to the image file.

'style1': Image style name for displaying. For example: 'product_thumb'.

'style2': Image style name for zooming. It should be larger style 1. For example: 'product_large'.

$options: Are the featuredzoomer plug-in options. For example:

$options = array(
  'imagezoomer_featured_power_range_low' => 2,
  'imagezoomer_featured_power_range_high' => 7,
  'imagezoomer_featured_magnifier_size_width' => 200,
  'imagezoomer_featured_magnifier_size_height' => 200,
  'imagezoomer_featured_magnifier_position' => 'right',
);

Developed by Thiết kế web Drupal