Jquery zoom plugin on image click [closed]

Question

I searched a lot on net, but didn't find the required solution, i want to show the same image as a large image(mean when i click on the image, it shows the same image as a large image using zoom option or etc), kindly help me, rather the solution is in HTML, css, js, or jquery plugin, i just need a solution.

Answer 1

A basic and simple approach, using an overlay DIV as lightbox:

// Image to Lightbox Overlay 
$('img').on('click', function() {
  $('#overlay')
    .css({backgroundImage: `url(${this.src})`})
    .addClass('open')
    .one('click', function() { $(this).removeClass('open'); });
});

img{height:100px;}

#overlay{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.8) none 50% / contain no-repeat;
  cursor: pointer;
  transition: 0.3s;
  
  visibility: hidden;
  opacity: 0;
}
#overlay.open {
  visibility: visible;
  opacity: 1;
}

#overlay:after { /* X button icon */
  content: "\2715";
  position: absolute;
  color:#fff;
  top: 10px;
  right:20px;
  font-size: 2em;
}

<div id="overlay"></div>
<img src="http://placehold.it/500x400/0bf">
<img src="http://placehold.it/500x400/f0b"> 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>