jQuery Zoom is a simple and easy-to-use jQuery zoom plugin that enlarge your images on mouse over, grab, click or toggle. The primary features of Image Inner Zoom Plugin:
- Custom image loader.
- Custom cursor on hover.
- Supports all major browsers and even IE8.
- Smooth animations.
- Inner zoom mode.
- Mousewheel to zoom in/out.
Live Demo

Hover

Grab

Click to activate

Click to toggle
How to Use
1. CSS
Add the css below to your html page
<style>
/* styles unrelated to zoom */
* {
border: 0;
margin: 0;
padding: 0;
}
p {
position: absolute;
top: 3px;
right: 28px;
color: #555;
font: bold 13px/1 sans-serif;
}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display: inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content: '';
display: block;
width: 33px;
height: 33px;
position: absolute;
top: 0;
right: 0;
background: url(icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection {
background-color: transparent;
}
#ex2 img:hover {
cursor: url(grab.cur), default;
}
#ex2 img:active {
cursor: url(grabbed.cur), default;
}
</style>
2. HTML
Create a container where you want to render image zoom
<span class="zoom" id="ex1">
<img src="daisy.jpg" width="555" height="320" alt="Daisy on the Ohoopee" />
<p>Hover</p>
</span>
<span class="zoom" id="ex2">
<img src="roxy.jpg" width="290" height="320" alt="Roxy on the Ohoopee" />
<p>Grab</p>
</span>
<span class="zoom" id="ex3">
<img src="daisy.jpg" width="555" height="320" alt="Daisy on the Ohoopee" />
<p>Click to activate</p>
</span>
<span class="zoom" id="ex4">
<img src="roxy.jpg" width="290" height="320" alt="Roxy on the Ohoopee" />
<p>Click to toggle</p>
</span>
3. Javascript
Load jQuery library together with the Image Inner Zoom library into your code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function () {
$('#ex1').zoom();
$('#ex2').zoom({
on: 'grab'
});
$('#ex3').zoom({
on: 'click'
});
$('#ex4').zoom({
on: 'toggle'
});
});
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.