Zoom zoom!
Demos (Drag inside image to see more. First and 2nd
image zoomable as well):
image zoomable as well):
 | Demo 1:
|
 | Demo 2:
|
 | Demo 3:
|
Directions
Step 1: Add the below code inside the <HEAD> section of the
page:
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
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
})
})
$('#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:| 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:
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({ If you omit the zoomrange: [3, 10], largeimage: 'myimages/haydenlarge.jpg' }) 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({ Notice that I left out the "largeimage: 'http://mysite.com/images/car.jpg' }) 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>
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>
No comments:
Post a Comment