jQuery Image Zoom - jquery-izoomify

jquery-izoomify is an image zoom plugin. It creates a flawless zoom effect to your images. Inspired by jquery-zoom plugin.

Settings:

• target - The parent container. Default is false.
• url - The url of the image to display on hover. Default is false.
• magnify - Image zooming or magnification. Default is 1.2.
• touch - Interact with touch events. Default is true.
• duration - Speed of zooming in/out of the image. Default is 120.
• callback - Function to be called once loaded. Default false.

---

Usage:

1. Include the jquery.izoomify.js right after the jquery library.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.izoomify.js"></script>

2. Add the picture to be magnified using this markup.

<div class="target">
    <img src="path/to/image.jpg" alt="Image To Zoom" />
</div>

3. Call the jquery-izoomify plugin on the parent container.

// Javascript
$(function () {
  $('.target').izoomify();
});

---

Examples:

1. Display the hi-res version of the image when magnifying.

<div class="target">
    <img
        src="thumb.jpg"
        alt="Image To Zoom"
        data-izoomify-url="hi-res.jpg"
    />
</div>

// Or via Javascript
$('.target').izoomify({
    url: 'hi-res.jpg'
});

2. Set the zoom factor.

<div class="target">
    <img
        src="thumb.jpg"
        alt="Image To Zoom"
        data-izoomify-url="hi-res.jpg"
        data-izoomify-magnify="2.5"
    />
</div>

// Or via Javascript
$('.target').izoomify({
    url: 'hi-res.jpg',
    magnify: 2.5
});

3. Set the duration of the zoom (in/out) animation.

<div class="target">
    <img
        src="thumb.jpg"
        alt="Image To Zoom"
        data-izoomify-url="hi-res.jpg"
        data-izoomify-duration="350"
    />
</div>

// Or via Javascript
$('.target').izoomify({
    url: 'hi-res.jpg',
    duration: 350 // milliseconds
});

4. Enable/disable touch support.

// Javascript
$('.target').izoomify({
    url: 'hi-res.jpg',
    touch: false
});

5. Trigger a callback function after the plugin has been loaded.

// Javascript
$('.target').izoomify({
    url: 'hi-res.jpg',
    callback: function () {
        // your code here..
    }
});

---

See Demo and Download:

Demo Download

SHARE