Image Inner Zoom Plugin - jQuery Zoom

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

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>

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>

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>