Elevatezoom is a jQuery image zoom plug-in, which supports a variety of zoom methods, powerful and simple. There are three kinds of zooming effect, the picture is clear and the effect is practical. This article will tell you how to use it.
1. jQuery ElevateZoom Plugin Characteristic.
- Fully customizable.
- Support 3 zoom style: Window Zoom, Lens Zoom, and Inner Zoom.
- Variable zoom on mouse scroll.
- Free to use under MIT and GPL Licenses.
- Colored tints.
- External controls.
2. jQuery ElevateZoom Plugin Attributes.
You can read the post https://igorlino.github.io/elevatezoom-plus/api.htm to learn more about the jQuery elevateZoom plugin attributes.
3. jQuery ElevateZoom Plugin Example Source Files.
./
├── images
│ ├── image01.png
│ ├── image02.png
│ ├── image03.png
│ ├── image1.png
│ ├── image2.png
│ └── image3.png
├── index.html
└── js
└── jquery.elevatezoom.min.js
3.1 index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.elevatezoom.min.js"></script>
<style>
ul,
li {
list-style: none;
}
ul {
display: flex;
/* flex-direction: column; */
justify-content: space-around
}
h1 {
text-align: center;
margin: 50px 50px
}
body {
width: 100%;
height: 200%;
background-color: hsla(0,0%,15%,1.00);
}
</style>
</head>
<body>
<h1>elevateZoom</h1>
<ul>
<li>
<img id="zoom_01" src='images/image1.png' data-zoom-image="images/image01.png" />
</li>
<li>
<img id="zoom_02" src='images/image2.png' data-zoom-image="images/image02.png" />
</li>
<li>
<img id="zoom_03" src='images/image3.png' data-zoom-image="images/image03.png" />
</li>
</ul>
<script>
function zoom(element, type, custors) {
element.elevateZoom({
zoomType: type,
cursor: custors,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
}
zoom($('#zoom_01'), "inner", "cursor");
zoom($('#zoom_02'), "window", "crosshair");
zoom($('#zoom_03'), "lens", "default");
</script>
</body>
</html>
3.2 js/jquery.elevatezoom.min.js.
Please download the js/jquery.elevatezoom.min.js file from jQuery Zoom Plugin. The js file jquery.elevatezoom.min.js version that is used in this example is 3.0.8.
3.3 Example Images.
- image1.png – image01.png, image2.png – image02.png and image3.png – image03.png are 3 pair of zoom images.
