Zoom Images Like Medium - jQuery Image Previewer

Image Previewer is a lightweight, easy-to-use jQuery image zoom plugin inspired by Medium.com.

The image zoom plugin displays images in a responsive modal window that auto closes the zoom when scrolling away or clicking the outside of the modal.

How to use it:

1. Load the minified version of the jQuery image previewer plugin after jQuery (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery-imagepreviewer.min.js"></script>

2. Call the function on the container containing images. Done.

<article>

  <h3>Heading 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo libero vitae ipsum semper, sed tincidunt massa hendrerit. Integer sed risus sit amet purus pellentesque iaculis. Nulla ultrices nibh ac odio posuere, ut rhoncus diam congue.</p>
  <img src="1.jpg" alt="Image 1">
  
  <h3>Heading 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo libero vitae ipsum semper, sed tincidunt massa hendrerit. Integer sed risus sit amet purus pellentesque iaculis. Nulla ultrices nibh ac odio posuere, ut rhoncus diam congue.</p>
  <img src="2.jpg" alt="Image 2">

  <h3>Heading 3</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras commodo libero vitae ipsum semper, sed tincidunt massa hendrerit. Integer sed risus sit amet purus pellentesque iaculis. Nulla ultrices nibh ac odio posuere, ut rhoncus diam congue.</p>
  <img src="3.jpg" alt="Image 3">

</article>>

window.onload = function() {
  $("article").imagePreviewer();
};

3. Decide whether to close the zoom when scrolling away. Default: true.

window.onload = function() {
  $("article").imagePreviewer({
    scroll: false
  });
};

4. Override the default styles of the modla window.

.layer {
  position: fixed;
  z-index: 100000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background-color: rgba(43,51,59,0.80);
}

.flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
}

#image_preview_popup img.hide {
  opacity: 0;
  transform: scale(0);
  transition: all 0.2;
  cursor: zoom-out;
}

#image_preview_popup img {
  width: 100%;
  height: auto;
  opacity: 1;
  transform: scale(1);
  transition: all 0.2s;
  cursor: zoom-out;
}

---

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