Jquery Image Zoom Plugin Examples


Basic Zoom

The zoom works with either one or two images. Two images are recommended for the zoom to work the best. Most of the settings for the zoom box can be overridden.

SHOW THE CODE
HTML
JAVASCRIPT

Tints

You can easily set tints for the zoom, you can set the colour and opacity of the tint overlay to be any value

Red
black
Green

SHOW THE CODE
HTML
JAVASCRIPT

Gallery & Lightbox

You can attach a set of images to the zoom. Also you can pass a gallery to the lightbox
NEW: The imageCrossfade option will give a simultaneous fadein / fadeout effect on the zoom.

SHOW THE CODE
HTML
JAVASCRIPT
CSS
Note: Don't forget to put the class name you set on the default gallery image so it shows active from the start.
This container is to show that the zoom can be positioned into any on screen element
Position 1: Default
Position 12
Position in a DIV
Position 1 - 10 px X-offset

Window Position

Positioning the window can be done in by setting a default position, and then using x and y offset to adjust
You can also position the window into a container

SHOW THE CODE
HTML
JAVASCRIPT

Inner Zoom

The zoom can be placed inside of the image

SHOW THE CODE
HTML
JAVASCRIPT

Lens Zoom

You can use the lens zoom setting to "Magnify the image".
The image to the lest has been constrained so it tucks underneath the image.

SHOW THE CODE
HTML
JAVASCRIPT

Fade in / Fade Out Settings

You can fade in and out on the Lens, Window and Tint

SHOW THE CODE
HTML
JAVASCRIPT

External Controls

You can fade in and out on the Lens, Window and Tint Change the image on dropdown

SHOW THE CODE
HTML
JAVASCRIPT

Easing

You can use the default easing or a custom easing setting. The amount of easing can also be altered - default is 12, set higher for more, lower for less

SHOW THE CODE
HTML
JAVASCRIPT

Mousewheel Zoom

You can scroll over the image to zoom in closer!

SHOW THE CODE
HTML
JAVASCRIPT

Change the Zoom Window Size

The Zoom Window Size can be adjusted to any proportions.

SHOW THE CODE
HTML
JAVASCRIPT

Image Constrain

You can attach a set of images to the zoom. Also you can pass a gallery to the lightbox

SHOW THE CODE
HTML
JAVASCRIPT
CSS
Note: Don't forget to put the class name you set on the default gallery image so it shows active from the start.

Responsive - Screen-size sensitivity

The example below defines 3 responsive CSS media queries and also in the 'respond' with 4 ranges.

  1. Default - tint color is #0F0(green) ACTIVE
  2. [800px,1199px] - tint color is #00F (purple) ACTIVE
  3. [600px,799px] - tint color is #F00(red) ACTIVE
  4. [100px,599px] - tint color is disabled ACTIVE

SHOW THE CODE
HTML
JAVASCRIPT
CSS