Saturday, 19 March 2011

Featured Image Zoomer

FF2+ IE6+ Opr9+

Featured Image Zoomer v1.5

  Author:
Dynamic Drive

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

Directions
Developer's View

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

Select All

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:

Select All

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>





posted by Sanjay @ 22:52   0 Comments