Easy Image Magnification Plugin – jQuery EasyZoom

EasyZoom is an elegant, highly optimised jQuery image zoom and panning plugin based on the original work by Alen Grakalic. EasyZoom supports touch-enabled devices and is easily customisable with CSS. The primary features of Easy Image Magnification Plugin:

  • Fully Customisable
  • Coloured Tints
  • Fancybox Gallery Support
  • Variable zoom on mouse scroll
  • External Controls
  • Window Zoom, Lens Zoom and Inner Zoom

Live Demo

1. Overlay

2. Adjacent

3. With Thumbnail Images

4. Active/Inactive Toggle

How to Use

Add the css below to your html page

<link rel="stylesheet" href="css/example.css" />
<link rel="stylesheet" href="css/pygments.css" />
<link rel="stylesheet" href="css/easyzoom.css" />

Create a container where you want to render image zoom

<section id="example">

    <h2>
        Examples
    </h2>

    <p style="text-align: center;">
        Use your mouse cursor or finger to zoom and pan the images below.
    </p>

    <h3>
        Overlay
    </h3>

    <div class="easyzoom easyzoom--overlay">
        <a href="example-images/1_zoom.jpg">
            <img src="example-images/1_standard.jpg" alt="" width="640" height="360" />
        </a>
    </div>

    <h3>
        Adjacent
    </h3>

    <!-- Placeholder for demo purposes only -->
    <div style="float: right; width: 310px; height: 400px; background: #EEE;"></div>

    <div class="easyzoom easyzoom--adjacent">
        <a href="example-images/2_zoom.jpg">
            <img src="example-images/2_standard.jpg" alt="" width="310" height="400" />
        </a>
    </div>

    <h3>
        With thumbnail images
    </h3>

    <div class="easyzoom easyzoom--overlay easyzoom--with-thumbnails">
        <a href="example-images/3_zoom_1.jpg">
            <img src="example-images/3_standard_1.jpg" alt="" width="640" height="360" />
        </a>
    </div>

    <ul class="thumbnails">
        <li>
            <a href="example-images/3_zoom_1.jpg" data-standard="example-images/3_standard_1.jpg">
                <img src="example-images/3_thumbnail_1.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="example-images/3_zoom_2.jpg" data-standard="example-images/3_standard_2.jpg">
                <img src="example-images/3_thumbnail_2.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="example-images/3_zoom_3.jpg" data-standard="example-images/3_standard_3.jpg">
                <img src="example-images/3_thumbnail_3.jpg" alt="" />
            </a>
        </li>
        <li>
            <a href="example-images/3_zoom_4.jpg" data-standard="example-images/3_standard_4.jpg">
                <img src="example-images/3_thumbnail_4.jpg" alt="" />
            </a>
        </li>
    </ul>

    <h3>
        Active/Inactive toggle
    </h3>

    <div class="easyzoom easyzoom--overlay easyzoom--with-toggle">
        <a href="example-images/3_zoom_1.jpg">
            <img src="example-images/3_standard_1.jpg" alt="" width="640" height="360" />
        </a>
    </div>

</section>

Load jQuery library together with the Easy Image Magnification library into your code

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/easyzoom.js"></script>
<script>
    // Instantiate EasyZoom instances
    var $easyzoom = $('.easyzoom').easyZoom();

    // Setup thumbnails example
    var api1 = $easyzoom.filter('.easyzoom--with-thumbnails').data('easyZoom');

    $('.thumbnails').on('click', 'a', function (e) {
        var $this = $(this);

        e.preventDefault();

        // Use EasyZoom's `swap` method
        api1.swap($this.data('standard'), $this.attr('href'));
    });

    // Setup toggles example
    var api2 = $easyzoom.filter('.easyzoom--with-toggle').data('easyZoom');

    $('.toggle').on('click', function () {
        var $this = $(this);

        if ($this.data("active") === true) {
            $this.text("Switch on").data("active", false);
            api2.teardown();
        } else {
            $this.text("Switch off").data("active", true);
            api2._init();
        }
    });
</script>

Source Code

Download

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