显示实际尺寸的图像onclick

Question

在发布之前，我正在测试超过30个左右的Jquery图像插件，以便在点击时使我的图像显示为全宽。

HTML的结构如下：

<div class="whatever">
   <img id="noonecares" src="pff"></img>
</div>

而不是

<a href=".."><img ></img></a>

我不是在谈论放大照片，而是显示整个图像 我最好找一个Jquery解决方案。

我一直在研究的解决方案是：zoomfancy easyzoom ajaxzoom ...

谢谢你们

Answer 1

像

这样的东西

<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>

脚本

$("div").on("click", function() {
    window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1"); 
});

jsfiddle：http://jsfiddle.net/chrisbenseler/6GW6M/

Answer 2

如果你只想要一个简单的内嵌图像扩展器，那么jQuery的toggleClass()就是完美的。使用CSS将图像缩小为固定大小，然后通过单击进行切换。

DEMO

Answer 3

这是我的方法。

<div class="whatever">
   <img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>

脚本

$('.whatever').on('click','#noonecares', function(){
    window.open($(this).attr('src'));
});

JSfiddle：http://jsfiddle.net/hFp6z/

更新：如果您希望插件缩放完整尺寸，则可以检查fancybox或lightbox。