点击图片时使用Jquery缩放插件

Question

我在网上搜索了很多，但没有找到所需的解决方案，我想展示同一张图像作为一个大图像（也就是说，当我点击图像时，使用缩放选项或其他方式显示相同的图像作为大图像），请帮助我，无论解决方案是在HTML、CSS、JS还是jQuery插件中，我只需要解决方案。

- Abdullah Obaidullah

---

你有尝试过自己编写代码吗？ - Zword

是的，我尝试了很多解决方案，也尝试使用jQuery插件，但我没有找到所需的插件。所有插件都使用两个图像，但我想使用单个图像。 - Abdullah Obaidullah

请查看我的回答@AbdullahObaidullah - Zword

Answer 1

使用覆盖层DIV作为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>

- Roko C. Buljan

Answer 2

您可以使用这个使用JQuery来缩放图片的fiddle： http://jsfiddle.net/Zword/QzM6m/

var previous=0;

$('.img').click(function(){
    var s=$(this).attr('id');
    $('#'+s).animate({'width':'200px'});
    if(previous!=0)
    {
    $('#'+previous).animate({'width':'100px'});
    }
    previous=s;
});

- Zword

Answer 3

这是我在谷歌上找到的 ;-)

jquery-zoom-effect-plugins

- Thomas Baumann