Dynamic Drive DHTML Scripts- Image Power Zoomer

New Revised CSS Library Forums Web Tools

Image Power Zoomer v1.1

Author: Dynamic Drive

Updated June 18th, 10: Adds ability to specify a different, higher resolution version of the original image as the image used inside the magnifying glass.

Description: Some images are worth a closer look, which is why there's Image Power Zoomer. It gives any image on your page the ability to be magnified when the mouse rolls over it. A "magnifying glass" that appears over the image lets the user zoom in on any portion of it as it follows the cursor around. Furthermore, the magnification power can be adjusted on the fly by turning the mouse wheel back or forth, just like in many graphics programs. Lets take a closer look at this script's features:

Applies the zoom effect to any image on the page without adding any additional markup to it.
Ability to use either the original image, or a different, higher resolution version of it as the image used inside the magnifying glass, to provide as much detail as possible. v1.1 feature
The default zoom level (ie: 2x) can be changed for each image.
When the user scrolls the mouse wheel while over the image, the zoom level decreases or increases based on the scroll direction. The range of zoom can be changed (ie: 2x to 10x).
The size of the "magnifier" can be changed for each image.

It's time to shine the spotlight on deserving images on your site with this script!

Demos (scroll your mouse wheel while over the image to further zoom in or out).

Demo 1 (default power: 2x. Range: 2x to 7x. Magnifier size: 150px by 150px):

Demo 2/3 (3rd demo uses a different, higher res version of original image as the magnified image):

Directions

Step 1: Add the below code inside the <HEAD> section of the page:

Select All

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="ddpowerzoomer.js">

/***********************************************
* Image Power Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){ //fire on DOM ready

	/*
	EXAMPLE 1:
	$('#myimage').addpowerzoom()

	EXAMPLE 2:
	$('img.vacation').addpowerzoom({
		defaultpower: 2,
		powerrange: [2,5],
		largeimage: null,
		magnifiersize: [100,100] //<--no comma following last option!
	})
	*/

})

</script>

The above code references an external file which you should download below (right click, and select "Save As"):

ddpowerzoomer.js

Step 2: Then, to apply the power zoom effect on an image, first, define the image on your page as you normally would, with a unique ID attribute to help identify it:

Tip: Give the image you're applying the zoom effect to explicit CSS width and height attributes that reflect the image's original dimensions. This helps the script initialize much faster than without those attributes present.

Then, inside the HEAD section of your page, call the jQuery method addpowerzoom(options) on the image in question:

Where "#myimage" is a jQuery Selector that selects this particular image and adds a zoom effect to it. Notice that you should invoke this function only after the page has loaded, by wrapping it inside jQuery's ready() function.

You can apply the power zoom effect to a collection of images all at once. Simply change your jQuery selector to target the desired group of images. Here are a couple of examples:

As you can see, based on your understanding of jQuery Selectors, you can target the zoom effect in a variety of ways.

When you call addpowerzoom() with no parameter passed in, certain settings are automatically entered. These global settings that you can customize are defined near the top of ddpowezoomer.js:

dsetting: {defaultpower:2, powerrange:[2,7], magnifiersize:[75, 75]},

The defaultpower setting sets the default magnification power. The powerrange setting sets the range of possible powers (applicable when the user scrolls the mouse wheel). And finally, the magnifiersize sets the default dimensions of the magnifier that appears over the image.

addpowerzoom() options

When calling the addpowerzoom(options) method, you can pass into it 4 options to customize the settings for the affected image(s). These options if defined override those defined globally inside the .js file mentioned above. The options should be defined inside an empty object {}, each separated by a comma if more than 1 is defined.

**addpowerzoom() options**
Option	Description
`defaultpower: value`	Sets the default magnification power when the mouse rolls over the image. Value should be an integer greater or equal to 1. Example: $('#myimage').addpowerzoom({ defaultpower:3 //default power: 3x original image }) A value of 1 means no magnification by default. Default value is 2.
`powerrange: [lowvalue, highvalue]`	Sets the range of possible magnification powers when the user scrolls the mouse wheel while over the target image. Be sure this range covers the `defaultpower` setting above. Example: $('#myimage').addpowerzoom({ defaultpower:3, powerrange: [2, 10] //Possible range: 2x to 10x magnification }) Default value is `[2,7]`.
`largeimage: "path_to_image"`	If defined, specifies the path to the magnified image shown within the magnifying glass. It should be a larger, higher resolution version of the original image, to provide as much details as possible: $('#myimage').addpowerzoom({ defaultpower:3, powerrange: [2, 10], largeimage: "http://mysite.com/images/sarah_large.jpg" }) If this option is not defined, the original image is used instead. Default value is `null`.
`magnifiersize: [width, height]`	Sets the dimensions of the magnifier that appears over the target image. For large images it makes sense to take advantage of that real estate by also increasing the magnifier's size. Example: $('#myimage').addpowerzoom({ magnifiersize: [120, 120]} //Set size of magnifier to 120px by 120px ) Default value is `[75,75]`.

The following defines all 4 options of addpowerzoom():

When more than 1 option is defined, separate each one with a comma.