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

Daisy on the Ohoopee

Hover

Roxy on the Ohoopee

Grab

Daisy on the Ohoopee

Click to activate

Roxy on the Ohoopee

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>

Source Code

Download

For more Advanced Usages, please check the demo page or visit the official website.