Versatile Image Zoom/Viewer/Gallery Plugin With jQuery - ezPlus
File Size: | 1.28 MB |
---|---|
Views Total: | 14294 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.