Press "Enter" to skip to content

Image Modal Popup With Zoom In/Out jQuery Plugin

The Image Popup jQuery plugin can be used to make images pop when clicked. image-popup.js is a light and fast jQuery image lightbox plugin that displays images in a modal popup with the ability to zoom in and out.

Pop-up images can be zoomed in and out using the dedicated buttons. The class '.zz_iamge' can be added to any <img /> tag to make it pop up.

image zoom on click code, zoom image in bs modal, zoom image onclick using javascript, image zoom on click, jquery image zoom in zoom out on click

How to make use of it:

1. Add the CSS class zz_image to the pictures to be displayed within the lightbox popup on click.

<img src="1.jpg" alt="Image 1" class="zz_image" />
<img src="2.jpg" alt="Image 2" class="zz_image" />
<img src="3.jpg" alt="Image 3" class="zz_image" />
<img src="4.jpg" alt="Image 4" class="zz_image" />
<img src="5.jpg" alt="Image 5" class="zz_image" />
...

2. Load the image-popup.js script after the most recent jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/image-popup.js"></script>

3. The mandatory CSS styles for the picture lightbox.

#zz_frame::before {
  content:  '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,0.85);
  z-index: -1;
}

#zz_frame {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
}

#zz_media {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: 0 auto;
  max-width: 500px;
  display: inline-block;
}

#zz_media img {
  width: 100%;
  box-shadow: 0px 0px 20px 1px rgb(0,0,0);
}

#zz_frame .zz_close {
  color: #fff;
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 26px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

#zz_frame .zz_controls {
  color: #fff;
  position: absolute;
  left: 10px;
  top: 10px;
}

#zz_frame .zz_controls button {
  background: #000;
  border: 0;
  color: #fff;
  padding: 8px;
  margin-right: 5px;
}

Image Modal With Zoom In/Out, Image Popup jQuery Plugin/Github, image slider in modal popup


See Demo And Download

Official Website(manharsharma007): Click Here

This superior jQuery/javascript plugin is developed by manharsharma007. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.