JavaScript Image Zoom in Zoom Out on Click

This JavaScript code enables image zoom in and out functionality on click. It uses mouse events for zooming. Helpful for enhancing image viewing experience.

You can use this code on any website with images to improve user experience. It enhances image viewing by allowing users to zoom in and out with a simple click. This feature can make your website more interactive and engaging for visitors.

How to Zoom Zoom In Zoom Out Image On Click Using JavaScript

1. Start by creating an HTML file and setting up the structure. Define a container for your image with a specific class or ID. Here’s an example:

<div class="zoom js-zoom">
  <div class="zoom__inner js-zoom__inner">
    <img src="https://picsum.photos/200/200?image=835" data-zoom="https://picsum.photos/800/800?image=835" class="zoom__image js-zoom__image" alt="">
  </div>
</div>

<h2>Image Zoom</h2>

<h3>Data attribute</h3>
<dl>
  <dt><code>data-image</code></dt>
  <dd>optional - path to large scale image. If not set the default image is scaled.</dd>
</dl>

<h3 class="clear">Code example</h3>
<textarea rows="10" cols="30">
  &lt;div class=&quot;zoom&quot;&gt;
    &lt;div class=&quot;zoom__inner&quot;&gt;
      &lt;img src=&quot;https://picsum.photos/200/200?image=835&quot; data-zoom=&quot;https://picsum.photos/800/800?image=835&quot; class=&quot;zoom__image&quot; alt=&quot;&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</textarea>

2. Style your HTML elements using CSS to ensure proper layout and appearance. You can customize the design according to your preferences. Here’s a basic CSS setup:

body {
  font-family: arial;
}

textarea {
  font-size: 16px;
  width: 100%;
}

.clear {
  clear: both;
}

.zoom {
  box-sizing: border-box;
  height: 100%;
  padding-top: 100%;
  position: relative;
  width: 100%;
}
.zoom::before, .zoom::after {
  background-clip: content-box;
  background-color: #fff;
  border: 10px solid rgba(0, 0, 0, 0.5);
  border-width: 12px 6px;
  content: "";
  height: 6px;
  left: 20px;
  pointer-events: none;
  position: absolute;
  top: 20px;
  width: 20px;
}
.zoom::before {
  border: 0;
  height: 20px;
  margin: 5px 0 0 13px;
  width: 6px;
  z-index: 20;
}
.zoom__inner {
  background-color: #000;
  border: 10px solid #000;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.zoom__image {
  display: block;
  width: 100%;
}
.zoom--zoomed::before {
  display: none;
}
.zoom--zoomed .zoom__inner {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.zoom--zoomed .zoom__inner::-webkit-scrollbar {
  height: 0 !important;
  width: 0 !important;
}
.zoom--zoomed .zoom__image {
  width: 200%;
}

@media (min-width: 768px) {
  .zoom {
    float: left;
    height: 200px;
    margin: 0 20px 20px 0;
    padding-top: 0;
    width: 200px;
  }
  .zoom:hover, .zoom:focus {
    cursor: zoom-in;
  }
  .zoom:hover .zoom__image-over, .zoom:focus .zoom__image-over {
    display: block;
  }

  .zoom__image-over {
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    display: none;
    height: 398px;
    left: 100%;
    margin-left: 20px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 398px;
  }
  .zoom__image-over-inner {
    background-repeat: none;
    background-size: cover;
    display: block;
    height: 800px;
    width: 800px;
  }

  .zoom--zoomed:hover, .zoom--zoomed:focus {
    cursor: zoom-out;
  }
}

3. Now, let’s add the JavaScript code to enable zoom functionality. Create a new JavaScript file and write the following code:

class Zoom {
  constructor(element) {
    this.element = element;

    this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    this.addElements();
    this.setElements();
    this.setData();
    this.setEvents();
  }

  addElements() {
    this.element.innerHTML += '<span class="zoom__image-over js-zoom__image-over"><span class="zoom__image-over-inner js-zoom__image-over-inner"></span></span>';
  }

  setElements() {
    this.inner = this.element.querySelector('.js-zoom__inner');
    this.image = this.element.querySelector('.js-zoom__image');
    this.imageOver = this.element.querySelector('.js-zoom__image-over');
    this.imageOverInner = this.element.querySelector('.js-zoom__image-over-inner');
  }

  setData() {
    this.data = {
      imageZoom: this.image.getAttribute('data-zoom') || this.image.getAttribute('src')
    }
  }

  setEvents() {
    const zoomedClass = 'zoom--zoomed';

    this.image.addEventListener('mousemove', event => {
      const scale = this.imageOver.offsetWidth / this.image.offsetWidth;

      this.imageOverInner.setAttribute('style', 'background-image: url(' + this.data.imageZoom + ');');

      this.imageOver.scrollTop = event.y * scale;
      this.imageOver.scrollLeft = event.x * scale;

      this.inner.scrollTop = event.y;
      this.inner.scrollLeft = event.x;
    });

    this.element.addEventListener('click', event => {
      if (this.element.classList.contains(zoomedClass)) {
        this.element.classList.remove(zoomedClass);

        this.inner.scrollTop = 0;
        this.inner.scrollLeft = 0;
      } else {
        this.element.classList.add(zoomedClass);

        this.inner.scrollTop = event.y;
        this.inner.scrollLeft = event.x;
      }

      if (this.data.imageZoom && this.image.getAttribute('src') !== this.data.imageZoom) {
        this.image.setAttribute('src', this.data.imageZoom);
      }
    });
  }
};
  
const zoom = new Zoom(document.querySelector('.js-zoom'));

Customize the JavaScript code according to your requirements, such as adding transition effects or adjusting zoom levels. Test the functionality in different browsers to ensure compatibility and smooth performance.

That’s all! hopefully, you have successfully created a functionality to zoom images on click. If you have any questions or suggestions, feel free to comment below.