|
|
|
Feb 21st, 11': Script updated to v1.5, which
now includes new feature by
jscheuer1 to
show optional "magnifying lens" while over thumbnail image.
Description: This script lets you view a magnified portion of any
image upon moving your mouse over it. A magnifying glass appears alongside the
image displaying the magnified area on demand. The user can toggle the zoom
level by using the mousewheel. It's great to use on product images,
photos, or other images with lots of details you want users to be able to get
into on command. Here are the script's features:
-
Ability to specify either the original image or a larger
version of it as the "magnified" image. The later setup enables you to
initially show a low-res thumbnail image on the page, but use a high-res
image to show the image in detail when magnified.
-
The "magnified" image is only loaded on demand (the first
time the user moves his mouse over the thumbnail image), saving on initial
page download time.
-
Supports an optional adjustable power setting. When enabled,
the user can adjust the zoom level on demand by using the mouse wheel while
over the image.
-
Customize the dimensions of the magnified image, plus whether it
should appear to the "right" or "left" of the thumbnail image.
-
Set whether to display a "magnifying lens" over the
thumbnail image that isolates the area that's currently being magnified when
the mouse rolls over it. The style of this lens can be customized, such as
the border and background colors, dimensions etc. new
in v1.5
Zoom zoom!
Demos (Drag inside image to see more. First and 2nd
image zoomable as well):
|
Demo 1:
- Different, higher resolution image used as the magnified
image and loaded on demand.
- Default power is 3X of original image.
- Adjustable power range between "3X to 10X" enabled (use
mouse wheel to change power).
- Magnifier size set to 300px by 300px, positioned right of
original image.
- Magnifying lens over thumbnail image enabled.
|
 |
Demo 2:
- Different, higher resolution image used as the magnified
image and loaded on demand.
- Default power is 5X of original image.
- Adjustable power option disabled.
- Magnifier size set to 400px by 400px, positioned right of
original image.
- Magnifying lens with red style over thumbnail image enabled.
|
|
Demo 3:
- Same image used as original and magnified image.
- No default power specified- magnified image used as is
inside magnifier.
- Adjustable power option disabled.
- Magnifier size set to 200px by 200px, positioned right of
original image.
|
Directions
Step 1: Add the below code inside the <HEAD> section of the
page:
The above code references an .js external file plus two
images which you
should download below (right click, and select "Save As"):
Inside the .js file, you may wish to edit the below two variables near the
top:
loadinggif: 'spinningred.gif', //full path or URL to
"loading" gif
magnifycursor: 'crosshair', //Value for CSS's 'cursor' attribute, added to
original image
Step 2: Insert the below sample code into the BODY
section of your page, which shows 3 featured image zoomers:
Detailed Set Up information
To enable Featured Image Zoomer on an image, first, locate or define the
initial image on the page:
<img id="image1"
src="saleen.jpg" style="width:300px; height:200px"
/>
Notice the code in red- your image should carry an arbitrary but
unique ID value, plus have explicit dimensions defined. The dimensions
setting ensures the script properly resizes the magnified image relative to the
original image at all times.
With your initial image defined on the page, to apply the zoom
effect to it, just call the function addimagezoom() on the image
inside the HEAD section of your page like so:
jQuery(document).ready(function($){
$('#image1').addimagezoom({
//options
})
})
The code in red should be a
jQuery selector
that selects the element(s) you want the zoom effect to be added to, in this
case, the element with ID="image1". Options if defined
should be an empty object containing one or more of the below options, each
separated by a comma:
addimagezoom() function options
| HTML Attribute |
Default |
Description |
zoomrange |
undefined (no resizing of magnified image). |
Sets the zoom level of the magnified image
relative to the original image. The value should be in the form [x, y],
where x and y are integers that define the lower and upper bounds of the
zoom level. For example:
[3, 3] //sets the zoom level to 3, with no ability to
toggle the zoom level[2, 10] //sets the initial zoom level to 2, with
ability to increase up to 10 by using the mouse wheel.
The default value for this option is undefined, which
means the script will simply display the magnified image in its original
dimensions with no resizing. The largeimage option below
lets you define the large image that should be used as the magnified
image. |
magnifiersize |
[200, 200] |
Sets the magnifying area's dimensions in
pixels. Default is [200, 200], or 200px wide by 200px tall. |
magnifierpos |
"right" |
Sets the position of the magnifying area
relative to the original image. Enter "right" or "left".
Default is "right". |
largeimage |
undefined (original image used as magnified
image). |
Specifies the full path or URL to the
magnified image. This should be a larger, higher resolution version of
the original image, for example: $('#image1').addimagezoom({
zoomrange: [3, 10],
largeimage: 'myimages/haydenlarge.jpg'
})
If you omit the zoomrange option, the large image will
not be resized (to a power of the original image). You would do this
when the magnified image is already at the magnification level you want:
$('#image1').addimagezoom({
largeimage: 'http://mysite.com/images/car.jpg'
})
Notice that I left out the "zoomrange" option, which
causes the natural dimensions of the large image to be used, with no
resizing. The default value for largeimage is undefined,
which causes the script to simply use the original image as the
magnified image as well. In this case you'll want to make sure
zoomrange is defined so the magnified image is enlarged in some
way:
$('#image1').addimagezoom({
zoomrange: [5, 5]
})
|
| curshade v1.5 |
false |
Boolean that when set to true
shows a magnifying lens on top of the thumbnail image while the mouse is
over it. Default is false. |
| cursorshadecolor v1.5 |
"#fff" |
HTML color string that sets the background
color of the magnifying lens. |
| cursorshadeopacity v1.5 |
0.3 |
Decimal value that sets the degree of opacity
of the lens, where 1 is fully opaque (as if no opacity is applied), and
0.1 is almost transparent. |
| cursorshadeborder v1.5 |
"1px solid black" |
CSS string value that sets the style of the
border of the lens. |
The following shows the initialization code for the 3 demos you
see at the top, just to make sure you get the idea:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'hayden.jpg' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshadecolor: 'pink',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
cursorshade: true,
largeimage: 'saleen.jpg' //<-- No comma after last option!
})
$('#image3').addimagezoom()
})
</script>
|
Image Effects 