Image Power Zoomer v1.2
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:
The above code references an external file which you should download below (right click, and select "Save As"):
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:
<img id="myimage" src="ocean.gif" style="width:200px; height:150px" />
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:
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom()
})
</script>
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:
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('img.showcase').addpowerzoom() //add zoom effect to images with CSS
class "showcase"
$('#gallerydiv img').addpowerzoom() //add zoom effect to all images inside
DIV with ID "gallerydiv"
})
</script>
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.
| 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({ 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({ Default value is
|
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({ If this option is not defined, the original image is used instead. Default value is |
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({ Default value
is |
The following defines all 4 options of addpowerzoom():
<script type="text/javascript">
jQuery(document).ready(function($){ //fire on DOM ready
$('#myimage').addpowerzoom({
defaultpower: 2,
powerrange: [2,5],
largeimage: null,
magnifiersize: [100,100] //<--no comma following last option!
})
})
</script>
When more than 1 option is defined, separate each one with a comma.