# What is it?

ElevateZoom-Plus is a jquery plugin for zooming images within a container or also in a "lens" that floats overtop of web page.
It was built using the jQuery library. Licensed under MIT license

# Features

- Fully Customisable
- Coloured Tints
- Fancybox-Plus and Colorbox Gallery Support
- Variable zoom on mouse scroll
- External Controls
- Window Zoom, Lens Zoom and Inner Zoom
- AngularJS directive available: angular-elevatezoom-plus
- Free to use under MIT license

###### HTML

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

###### JAVASCRIPT

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

# Installation and usage

No need to download anything, you only need to include the jquery and elevatezoom plugin files into your project as show below:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/src/jquery.ez-plus.js"></script>

# Include your Image

ElevateZoom-Plus works best using two images, one low resolution for the visible image, and one high resolution for the zoomed image. If you only have one image available, Elevate Zoom will still work if you scale down the image, although this is not recommended as your page load time will increase if you are loading larger images

Please ensure your small image is proportionally scaled down from the large image.

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

# Activate the zoom - Basic Example

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

# More Examples

See More examples of the image zoom here