Featured Image Zoomer (now w/Multi-Zoom) v2.1
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:
|
Demo 3:
Milla Jojovitch
|
|
Demo 2:
|
Demo 4:
Angelina Jolie
|
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:
<img id="multizoom1" alt="zoomable" title="" src="millasmall.jpg"/>
</div>
<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:
-
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 itssrc
property set to the midsized image for the first thumbnail image (ie: "millasmall.jpg"). Everything else is optional, including the CSS class "targetarea
". -
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. -
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:
|
|
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.
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({
If you omit the
$('#image1').addimagezoom({
Notice that I left out the "
$('#image1').addimagezoom({
In multi-zooms, since there are multiple enlarged images involved,
they are specified inline in the HTML markup itself using the
|
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
<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
<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
<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:
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
In multi-image zoom setups, this option can be overridden and
set separately on any or each of its thumbnail image links using the
<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
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 |