Zoom & Compare Different Regions Of An Image - jQuery Doublezoom

Doublezoom is a fresh new image zoom jQuery plugin that allows you to magnify and compare different regions of an image.

It provides an intuitive way to see multiple detailed views of a single image to make comparisons, which can be useful in many fields, such as medicine and visual art.

How It Works:

• The first mouse click will display a detailed view of the current region of the image in Window 1.
• The second mouse click will display another detailed view of the region of the image in Window 2.
• The third mouse click will reset the plugin.

How to use it:

1. Download and load the jQuery Doublezoom plugin's files in the document.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery doublezoom plugin -->
<link rel="stylesheet" href="/path/to/doublezoom.css" />
<script src="/path/to/doublezoom.js"></script>

2. You might need the imagesLoaded jQuery plugin to detect if the image has beed loaded.

<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>

3. The required HTML structure for the image zoom area.

<div class="doublezoom-container">
  <div class="doublezoom-image">
    <div class="box">
      <!-- Replace Your Image Here -->
      <img
        id="myimage"
        width="540"
        src="autumn-forest.jpg"
        class="img-fluid"
        alt="..."
      />
    </div>
  </div>
  <div class="doublezoom-landing">
    <div class="doublezoom-landing-left"></div>
    <div class="doublezoom-landing-right"></div>
  </div>
</div>

4. Initialize the plugin on the image. That's it.

$('.doublezoom-container').imagesLoaded( function() {
  $("#myimage").doublezoom();
});

---

This awesome jQuery plugin is developed by oldauntie. For more Advanced Usages, please check the demo page or visit the official website.