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

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_01").elevateZoom();

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

<img id="zoom_02" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_02").elevateZoom({tint:true, tintColour:'#F90', tintOpacity:0.5});

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

<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">
 
  <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
    <img id="img_01" src="thumb/image1.jpg" />
  </a>

  <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
    <img id="img_01" src="thumb/image2.jpg" />
  </a>

  <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
    <img id="img_01" src="thumb/image3.jpg" />
  </a>

  <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
    <img id="img_01" src="thumb/image4.jpg" />
  </a>

</div>

JAVASCRIPT

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});

CSS

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

/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}
 
 /*Change the colour*/
 .active img{border:2px solid #333 !important;}

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
(click/dblclick to display/hide)

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

<img id="zoom_04a" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04b" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04c" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_04a").elevateZoom({zoomWindowPosition: 1});
$("#zoom_04b").elevateZoom({zoomWindowPosition: 12});
$("#zoom_04c").elevateZoom({zoomWindowPosition: "demo-container", zoomWindowHeight: 200, zoomWindowWidth:200, borderSize: 0, easing:true});
$("#zoom_04d").elevateZoom({zoomWindowPosition: 1, zoomWindowOffetx: 10});

Inner Zoom

The zoom can be placed inside of the image

SHOW THE CODE

HTML

<img id="zoom_05" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_05").elevateZoom({
  zoomType				: "inner",
  cursor: "crosshair"
});

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

<img id="zoom_07" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_07").elevateZoom({
  zoomType				: "lens",
  lensShape : "round",
  lensSize    : 200
});

Fade in / Fade Out Settings

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

SHOW THE CODE

HTML

<img id="zoom_08" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_08").elevateZoom({
			zoomWindowFadeIn: 500,
			zoomWindowFadeOut: 500,
			lensFadeIn: 500,
			lensFadeOut: 500
});

External Controls

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

SHOW THE CODE

HTML

<img id="zoom_09" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

<select id="select"> 
<option value="1">Front</option>
<option value="2">Back</option>
<option value="3">Scenery</option>
<option value="4">Side</option>
</select>

JAVASCRIPT

$("#zoom_09").elevateZoom({
            gallery : "gallery_09",
            galleryActiveClass: "active"
    	  		}); 
            
  
     $("#select").change(function(e){
   var currentValue = $("#select").val();
   if(currentValue == 1){    
   smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png';
   largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg';
   }
   if(currentValue == 2){    
   smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png';
   largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg';
   }
   if(currentValue == 3){    
   smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png';
   largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg';
   }
   if(currentValue == 4){    
   smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png';
   largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg';
   }
	// Example of using Active Gallery
  $('#gallery_09 a').removeClass('active').eq(currentValue-1).addClass('active');		
 
 
 	 var ez =   $('#zoom_09').data('elevateZoom');	  
   
  ez.swaptheimage(smallImage, largeImage); 
     
    });

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

<img id="zoom_10" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_10").elevateZoom({easing : true});

Mousewheel Zoom

You can scroll over the image to zoom in closer!

SHOW THE CODE

HTML

<img id="zoom_mw" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_mw").elevateZoom({scrollZoom : true});

The zoomlevel by default is 1, but this can be overridden
You can do this with the zoomLevel config option
Zoom Level 2 would make the image twice as small
Zoom Level 0.5 would make the image twice as big

SHOW THE CODE

HTML

<img id="zoom_11" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_11").elevateZoom({zoomLevel : 0.5});

Change the Zoom Window Size

The Zoom Window Size can be adjusted to any proportions.

SHOW THE CODE

HTML

<img id="zoom_13" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_14" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

JAVASCRIPT

$("#zoom_13").elevateZoom({
            zoomWindowWidth:300,
            zoomWindowHeight:100
}); 

$("#zoom_14").elevateZoom({
            zoomWindowWidth:100,
            zoomWindowHeight:300
});

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

<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">
 
  <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
    <img id="img_01" src="thumb/image1.jpg" />
  </a>

  <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
    <img id="img_01" src="thumb/image2.jpg" />
  </a>

  <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
    <img id="img_01" src="thumb/image3.jpg" />
  </a>

  <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
    <img id="img_01" src="thumb/image4.jpg" />
  </a>

</div>

JAVASCRIPT

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({constrainType:"height", constrainSize:274, zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});

CSS

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

/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}
 
 /*Change the colour*/
 .active img{border:2px solid #333 !important;}