Versatile Image Zoom/Viewer/Gallery Plugin With jQuery - ezPlus

ezPlus is an extended version of the elevatezoom plugin that provides customizable, touch-enabled zooming, gallery, popup functionalities on your images.

More features:

• Zoom on mousewheel.
• Image preloading.
• Hover or click to zoom.
• Custom zoom lens.
• ColorBox or Fancy Box based gallery lightbox.

How to use it:

1. Include the JavaScript file jquery.ez-plus.js after you've include the latest jQuery library.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.ez-plus.js"></script>

2. Include the jQuery mouseWheel plugin for the support of zoom on mouse wheel (OPTIONAL).

<script src="/path/to/jquery.mousewheel.js"></script>

3. Include the jQuery easing plugin for more easing effects (OPTIONAL).

<script src="/path/to/jquery.easing.js"></script>

4. Include the ColorBox or Fancy Box plugin for the support of image gallery (OPTIONAL).

<script src="/path/to/jquery.colorbox.js"></script>
<link rel="stylesheet" href="/path/to/colorbox.css">

5. Enable the zooming functionality on the target image.

<img id="demo" src="image.jpg">

$("#demo").ezPlus();

6. To create an image gallery with zooming & lightbox integration.

<img id="demo" src="1.jpg" data-zoom-image="1.jpg"/>

<div id="gallery_demo">
  <a href="#" data-image="1.jpg" data-zoom-image="1.jpg">
      <img id="img_01" src="1.jpg"/>
  </a>
  <a href="#" data-image="2.jpg" data-zoom-image="2.jpg">
      <img id="img_01" src="2.jpg"/>
  </a>
  <a href="#" data-image="3.jpg" data-zoom-image="3.jpg">
      <img id="img_01" src="3.jpg"/>
  </a>
  <a href="#" data-image="4.jpg" data-zoom-image="4.jpg">
      <img id="img_01" src="4.jpg"/>
  </a>
  <a href="#" data-image="5.jpg" data-zoom-image="5.jpg">
      <img id="img_01" src="5.jpg"/>
  </a>
</div>

$("#demo").ezPlus({
  gallery: 'gallery_demo',
  cursor: 'pointer',
  galleryActiveClass: "active",
  imageCrossfade: true,
  loadingIcon: "images/spinner.gif"
});

$("#demo").bind("click", function (e) {
  var ez = $('#zoom_03').data('ezPlus');
  ez.closeAll(); 
  $.fancybox(ez.getGalleryList());
  return false;
});

7. All possible plugin options with default values.

$("#demo").ezPlus({

  container: 'ZoomContainer',
  attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom
  borderColour: '#888',
  borderSize: 4,
  constrainSize: false,  //in pixels the dimensions you want to constrain on
  constrainType: false,  //width or height
  containLensZoom: false,
  cursor: 'inherit', // user should set to what they want the cursor as, if they have set a click function
  debug: false,
  easing: false, // easing effects
  easingAmount: 12,
  enabled: true,

  // gallery options
  gallery: false,
  galleryActiveClass: 'zoomGalleryActive',
  gallerySelector: false,
  galleryItem: 'a',
  galleryEvent: 'click',

  // enable cross-fade effect
  imageCrossfade: false,

  // lens options
  lensBorderColour: '#000',
  lensBorderSize: 1,
  lensColour: 'white', //colour of the lens background
  lensFadeIn: false,
  lensFadeOut: false,
  lensOpacity: 0.4, //opacity of the lens
  lensShape: 'square', //can be 'round'
  lensSize: 200,
  lenszoom: false,

  // image loading spinner
  loadingIcon: false, //http://www.example.com/spinner.gif

  // This change will allow to decide if you want to decrease
  // zoom of one of the dimensions once the other reached it's top value,
  // or keep the aspect ratio, default behaviour still being as always,
  // allow to continue zooming out, so it keeps retrocompatibility.
  mantainZoomAspectRatio: false,
  maxZoomLevel: false,
  minZoomLevel: 1.01,

  // callbacks
  onComplete: $.noop,
  onDestroy: $.noop,
  onImageClick: $.noop,
  onImageSwap: $.noop,
  onImageSwapComplete: $.noop,
  onShow: $.noop,
  onHide: $.noop,
  onZoomedImageLoaded: $.noop,

  preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
  respond: [],
  responsive: true,
  scrollZoom: false, //allow zoom on mousewheel, true to activate
  scrollZoomIncrement: 0.1,  //steps of the scrollzoom
  showLens: true,
  tint: false, //enable the tinting
  tintColour: '#333', //default tint color, can be anything, red, #ccc, rgb(0,0,0)
  tintOpacity: 0.4, //opacity of the tint
  touchEnabled: true,

  // zoom options
  zoomActivation: 'hover', // Can also be click (PLACEHOLDER FOR NEXT VERSION)
  zoomContainerAppendTo: 'body', //zoom container parent selector
  zoomId: -1, // identifier for the zoom container
  zoomLevel: 1, //default zoom level of image
  zoomTintFadeIn: false,
  zoomTintFadeOut: false,
  zoomType: 'window', //window is default,  also 'lens' available -
  zoomWindowAlwaysShow: false,
  zoomWindowBgColour: '#fff',
  zoomWindowFadeIn: false,
  zoomWindowFadeOut: false,
  zoomWindowHeight: 400,
  zoomWindowOffsetX: 0,
  zoomWindowOffsetY: 0,
  zoomWindowPosition: 1, //Possible values: 1-16, but we can also position with a selector string.
  zoomWindowWidth: 400,
  zoomEnabled: true, //false disables zoomwindow from showing
  zIndex: 999

});

Changelog:

v1.2.5 (2020-07-07)

• FIX: problems using ezPlus with multiple images on my page, only same container with identical ID needs to be removed. Issue #120 (Thanks volkerdobler)

2020-01-20

• Fixed: low resolution image zoom not possible

v1.2.4 (2018-09-13)

• FIX: Responsive feature does not destroy zoomContainers. 
• FIX: Fix zoom lens and window positioning inside dialog. When initialising ezPlus on an element present inside a dialog the positions will not be correct unless the dialog occupies the entire viewport. These page offsets will help zoom lens and zoom window to be positioned correctly

v1.2.3 (2018-07-02)

• FIX: Fix for inner zoomType with scrollZoom from triggering error and not working. TypeError: self.zoomLens is undefined line:1197
• IMPROVEMENT: jQuery .data() is initially populated with values from the data- attributes, but setting it only stores the associated new value in memory. It doesn't change the attribute in the DOM. This will make possible, populating the data with new information and ez-plus read the new information.

2018-04-26

• Fix for uncaught undefined e in setPosition in Chrome

2017-12-14

• Fix for uncaught undefined e in setPosition in Chrome

2017-12-13

• Fixed: Hidden images cause zoomContainer to show in upper left corner

---

This awesome jQuery plugin is developed by igorlino. For more Advanced Usages, please check the demo page or visit the official website.