• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Nov 19, 12': Script overhauled by John to include support for multiple images swap and zoom and several other new features.

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: Milla Jojovitch 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: Angelina Jolie 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

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

The above code references two external files plus a loading gif, which you should download below (right click, and select "Save As"):

• multizoom.js
• multizoom.css
• 
• samplepics.zip (all the images that make up the demo referenced inside code of Step 2 below, for testing purposes).

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:

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:

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: