CSS Codes
CSS Layouts
FF2+ IE6+ Opr9+

Featured Image Zoomer (now w/Multi-Zoom) v2.1

Author: Dynamic Drive / John Davenport Scheuer

Description: This script lets you view a magnified portion of any image upon moving your mouse over it. A magnifying area appears alongside the image displaying the magnified image 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 latter setup enables you to initially show a low-res zoomable image on the page, and use the larger 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 zoomable 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 viewable area of the magnified image, plus whether it should appear to the "right" or "left" of the zoomable image.
  • Set whether to display a "magnifying lens" over the zoomable 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.
  • Support for single image or multi-zooms. In the latter, you specify a series of mini thumbnail images that when clicked on load a "midsize" version of the image, with this image being zoomable. Multi-zooms are great for previewing and getting in close on a series of product or related images.

Zoom zoom!

Demos:

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 zoomable image enabled.

 

   Demo 3:

zoomable
Milla Jojovitch
Milla Saleen Hayden Jaguar
  • Lens Effect ( cursorshade: true ) with a yellow shading (cursorshadecolor: '#fdffd5'), except 2nd image (Saleen S7 Twin Turbo), which has a custom magnified image size as well:

    <a href="saleensmall.jpg" data-lens="false" data-magsize="150,150" data-la . .

  • Zooms from 3 to 10 ( zoomrange: [3, 10] )
  • Zoomable image centered vertically within its container ( imagevertcenter: true ) - new with multi-zoom
  • Descripton follows image bottom ( descpos: true ) - new with multi-zoom
  • Magnified image centered vertically in relation to the zoomable image ( magvertcenter: true ) - new with multi-zoom
  • Duration of fade in for new zoomable image 1.5 seconds ( speed: 1500 ), defaults to 'slow', 0.6 seconds - new with multi-zoom
     
Demo 2:

  • Same image used as original and magnified image.
  • No default power specified- magnified image used as is inside magnifier.
  • Adjustable power option not used. ( zoomrange property not set)
  • Magnifier size set to 200px by 200px, positioned right of original image.

 

   Demo 4:

zoomable
Angelina Jolie
Angelina Saleen Jaguar Relaxing Music
  • Zooms to actual resolution of the largeimage ( zoomrange property not set)
  • Zoomable image not centered vertically within its container ( imagevertcenter property not set)
  • Descripton doesn't follow image bottom ( descpos property not set)
  • Magnified image not centered vertically in relation to the zoomable image ( magvertcenter property not set)
  • Although there is no variable zoom, mousewheel is disabled while over image ( disablewheel: true ) - new

Directions Developer's View

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

Select All

The above code references two external files plus a loading gif, 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

Now that you have the script installed on your page, it's time to learn how to set everything up to your liking. In general you can have two types of featured image zooms- 1) single image zoom where it's just a standalone image with zoom capability, or 2) multi-image zoom where a series of small thumbnails each load up a midsized image when clicked on, with the midsized image having the zoom capability. Lets see how you would set these up.

Set Up information for Single Image Zoom

To set up Featured Image Zoomer on a single image, first, define the "zoomable" or smaller version of the image as regular HTML markup on the page, for example:

<img id="image1" src="haydensmall.jpg" style="width:300px; height:200px" />

Notice the code in red. Your zoomable image should:

  • Carry an arbitrary but unique ID value

  • Have explicit dimensions defined. The dimensions setting ensures the script properly resizes the magnified image relative to the original image at all times. You can set it using inline CSS like above, or via the width/height options inside the on page addimagezoom script code.

With the zoomable image defined on the page, to apply the zoom effect to it, call the initialization function addimagezoom() inside the HEAD section of your page with the desired options that are applicable to Single image zooms (multi-zoom images support additional options):

jQuery(document).ready(function($){
 $(' #image1 ').addimagezoom({
   zoomrange: [3, 10],
   magnifiersize: [300,300],
 // additional 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 supported options , each separated by a comma.

Set Up information for Multi-Zoom

A multi-zoom consists of two or more small thumbnail images that each loads a midsized (zoomable) image inside a common area when clicked on. The magnified image is only revealed when the user hovers over this midsized image. Multi-zooms are great for showcasing product images or any set of related images.

Set up wise, the difference between a Multi-Zoom and a Single Image Zoom lies mainly in the HTML markup, plus some of the addimagezoom() options you can define. For the markup, a multi-zoom should consist of something like the following:

<div class="targetarea" style="border:1px solid #eee">
<img id="multizoom1" alt="zoomable" title="" src="millasmall.jpg"/>
</div>
<div id="description" >Milla Jojovitch</div>
<div class="multizoom1 thumbs">
<a href="millasmall.jpg" data-large="milla.jpg" data-title="Milla Jojovitch" ><img src="milla_tmb.jpg" alt="Milla" title=""/></a>
<a href="saleensmall.jpg" data-lens="false" data-magsize="150,150" data-large="saleen.jpg" data-title="Saleen S7 Twin Turbo" ><img src="saleen_tmb.jpg" alt="Saleen" title=""/></a>
"
"
"
</div>

Logically the markup for a mult-zoom should consist of 3 parts:

  1. A "targetarea" DIV that houses the "midsized" preview image, loaded when the user clicks on a thumbnail image. The contained image should be given a unique ID (ie: " multizoom1 "), and its src property set to the midsized image for the first thumbnail image (ie: "millasmall.jpg"). Everything else is optional, including the CSS class " targetarea ".

  2. If you wish to display a description of each image when its thumbnail is clicked and its midsized image is loaded (see "descArea" option), define a DIV with an unique but arbitrary ID (ie: "description") to house it on the page. The script uses the contents of each thumbnail image's link's "data-title" attribute as the description. If you don't wish to display a description, simply do not define this DIV.

  3. Finally, a "thumbs" DIV that houses the thumbnail image links. This DIV should carry a CSS class that reflects the ID of the midsized (zoomable) image element above it and the class name of "thumbs", in this case , " multizoom1 thumbs ".  In other words, whatever the midsized image's unique ID is set to, your thumbnails' DIV should carry a CSS class of the same value and the class of "thumbs". The ID as class and "thumbs" class can also be used for styling. And you can add additional CSS classes to this DIV to style it further.

    Within the "thumbs" DIV is where you define each thumbnail link. Each thumbnail link should consist of:

    •  A hyperlinked image (<a> element with an <img> inside it).
      Within the <a> element itself, it should carry at least 2 of the following 3 attributes: " href ", it needs the href under all circumstances, it's the URL of the midsized image. and needs to be set to the path to the midsized version of the thumbnail image (ie: " millasmall.jpg "), and in addition one of the following " data-large " or " data-dims ". The first one is the path to the full blown large image used as the magnified version (data-large). Or if the midsized image is a scaled down version of the larger image, use instead data-dims to indicate those scaled down dimensions. See additional supported attributes below.

    • The inner <img> element should simply have its src attribute point to the path and filename of the thumbnail image itself.

For 3) above, inside each thumbnail link, you've already seen that you can and should insert at least an " href " attribute and at least one of either a " data-large " or " data-dims " attribute. The following lists all of the supported attributes you can add inside the thumbnail link's <a> element. Each one sets/overrides a particular setting for that thumbnail image:

  • href="path_to_midsized_image"
  • data-large="path_to_fullblown_large_image"
  • data-zoomrange="2, 10"
  • data-magsize="150, 150"
  • data-dims="300, 250"
  • data-title="Some description for this image"
  • data-lens=true/false

Save for href , data-large , data-dims , and data-title , the rest of the above attributes simple mirror the equivalent property found in options of addimagezoom() . These attributes let you override the setting of a particular option for the given thumbnail link. The href attribute as mentioned should be set to the path of the midsized image that's shown inside the container above the thumbnails. The data-large attribute should point to the path of the full blown large image shown when the mouse moves over the midsized image. data-dims lets you specify explicit dimensions for the midsized image, instead of letting its natural dimensions rule the roost. And finally, data-title should be defined and set to the description for the given thumbnail's image when the  descArea option below is defined (to show a description of each thumbnail's image).

The following thumbnail link for example makes use of several of the aforementioned attributes:

<a href="saleensmall.jpg" data-dims="300, 225" data-magsize="150,150" data-large="saleen.jpg" data-title="Saleen S7 Twin Turbo" ><img src="saleen_tmb.jpg" alt="Saleen" title=""/></a>

Finally, just like in the Single Image zoom setup, in the HEAD section of your page, you should call the initialization function addimagezoom() with the desired options that are applicable to Multi image zooms:

jQuery(document).ready(function($){
 $(' #image1 ').addimagezoom({
   zoomrange: [3, 10],
   magnifiersize: [300,300],
 // additional options
 })
})

Without further adieu then, below lists the options you can pass into addimagezoom() . Separate each with a comma:

addimagezoom() options for Single and Multi-zoom Images set up. BLUE options are best used only for Single image zooms, YELLOW are best only used for Mult-zooms.
Definitions: zoomable - the image you move the mouse over in a single zoom; midsized - the same image, the one you move your mouse over in a multi-zoom.
Property Default Description
curshade

 

 false Boolean that when set to true shows a magnifying lens on top of the zoomable/midsized image while the mouse is over it. Default is false .
cursorshadecolor

 

 "#fff" HTML color string that sets the background color of the magnifying lens.
cursorshadeopacity

 

 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 "1px solid black" CSS string value that sets the style of the border of the lens.
descArea none Mostly just for multi-image zooms. Specifies the jQuery id selector for the description/caption element that will show the data-title attribute of the active thumbnail image link. It's not required unless you want the description/caption feature:

descArea: '#description' // description selector (optional - but required if descriptions are used)

descpos false Mostly just for multi-image zooms. (true/false) If set to true and the description is used and placed below the zoomable image, the description position follows image position as a set (set in the stylesheet or inline as top margin) distance:

descpos: true // if set to true - description position follows image position at a set distance - new

disablewheel false (true/false) Useful only without variable zoom ( zoomrange property not set). If set to true mousewheel will not shift image position while mouse is over image:

disablewheel: true // even without variable zoom, mousewheel will not shift image position while mouse is over image (optional) - new

imagevertcenter false Mostly just for multi-image zooms. (true/false) If set to true each "midsized" image centers vertically within its container:

imagevertcenter: true // zoomable image centers vertically in its container (optional) - new
magvertcenter false (true/false) If set to true the magnified area centers vertically in relation to the zoomable/midsized image:

magvertcenter: true // magnified area centers vertically in relation to the zoomable image (optional) -new

largeimage undefined (original image used as magnified image). Only applicable in single image zooms , this option 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]
})

In multi-zooms, since there are multiple enlarged images involved, they are specified inline in the HTML markup itself using the data-large attribute for each thumbnail image link. If not specified for a thumbnail image link, it will use the href of the thumbnail image link.

magnifierpos "right" Sets the position of the magnifying area relative to the original image. Enter " right " or " left ". Default is " right ".

Note: If there's not enough room for it in the window in the desired direction, it will automatically shift to the other direction.

magnifiersize [200, 200] Sets the magnifying area's dimensions in pixels. Default is [200, 200] , or 200px wide by 200px tall.

In multi-image zoom setups, this option can be overridden and set separately on each thumbnail image link using the data-magsize attribute within the HTML markup:

<a href="angelinasmall.jpg" data-magsize="150, 150" data-large="angelina.jpg" data-title="Angelina Jolie"><img src="angelina_tmb.jpg" alt="Angelina" title=""/></a>

width undefined (script determines width of the zoomable/midsized image) Mostly just for single image zooms, this option lets you set the width of the zoomable (what would be midsized in a multi-zoom) image via scripting instead of via inline or external CSS.

width: 150,

For multi-zoom, this should be (if used at all) overridden/substituted for by the first numeric value within the data-dims attribute within the HTML markup of the thumbnail image link:

<a href="angelinasmall.jpg" data-dims="250, 179" data-large="angelina.jpg" data-title="Angelina Jolie"><img src="angelina_tmb.jpg" alt="Angelina" title=""/></a>

height undefined (script determines height of the zoomable/midsized image) Mostly just for single image zooms, this option lets you set the height of the zoomable (what would be midsized in a multi-zoom) image via scripting instead of via inline or external CSS.

height: 200,

For multi-zoom, this should be (if used at all) overridden/substituted for by the second numeric value within the data-dims attribute within the HTML markup of the thumbnail image link:

<a href="angelinasmall.jpg" data-dims="250, 179" data-large="angelina.jpg" data-title="Angelina Jolie"><img src="angelina_tmb.jpg" alt="Angelina" title=""/></a>

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 above lets you define the large image that should be used as the magnified image.

In multi-image zoom setups, this option can be overridden and set separately on any or each of its thumbnail image links using the data- zoomrange attribute within the HTML markup:

<a href="angelinasmall.jpg" data-zoomrange="2, 10" data-large="angelina.jpg" data-title="Angelina Jolie"><img src="angelina_tmb.jpg" alt="Angelina" title=""/></a>

If not included in this way for any given thumbnail image link, it will default to whatever the zoomrange setting is for this multi-zoom. If that's not set, the larger magnified image will be shown in its native dimensions. For your information, this larger magnified image comes from the data-large attribute of the thumbnail image link, or if that's not set, the href of the thumbnail image link,

initzoomablefade true Sets whether or not the zoomable/midsized image should fade in automatically when the page loads. Defaults to true.

initzoomablefade: false,

See also zoomablefade option. If zoomablefade is set to false, this will also be false.

For multi-zoom, if zoomablefade is true and this is false, only the first midsized image will not fade in.
zoomablefade true Sets whether or not the midsized image within a Featured Image Zoomer should fade in as the page loads and, if this is a multi-zoom, when the user switches between midsized images using the thumbnail links. Defaults to true.
speed 600 Sets the duration of fade in for midsized images (in milliseconds) when zoomablefade is set to true:

speed: 1500,
zIndex script determines optimal z-index value to use In most cases the script will determine the optimal z-index to use here, so this property should only be used if there are z-index stacking problems. If there are, use it to set the z-index for created elements. It should be at least as high as the highest z-index of the zoomable (midsized) image and, if any its positioned parents. Example:

zIndex: 4