javascript - Display image with actual sizes onclick - Stack Overflow

admin管理员组

文章数量:1429568

Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.

the structure of the HTML is as follows:

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

and not

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

I'm not talking about zooming in the photos but displaying the whole image onclick instead I'm looking for a Jquery solution preferably.

The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...

Thank y'all

Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.

the structure of the HTML is as follows:

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

and not

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

I'm not talking about zooming in the photos but displaying the whole image onclick instead I'm looking for a Jquery solution preferably.

The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...

Thank y'all

• javascript
• jquery
• html
• zooming

Share Improve this question Follow edited Aug 1, 2014 at 17:24 user1578720 asked Aug 1, 2014 at 17:18 user1578720user1578720 1733 silver badges88 bronze badges 2

• you mean in a new browser window – Ehsan Sajjad Commented Aug 1, 2014 at 17:22
• in a responsive lightbox-like popup window – user1578720 Commented Aug 1, 2014 at 18:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.

DEMO

Something like

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

script

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

?

jsfiddle: http://jsfiddle/chrisbenseler/6GW6M/

This is my approach.

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

Script

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

JSfiddle: http://jsfiddle/hFp6z/

UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.

本文标签： javascriptDisplay image with actual sizes onclickStack Overflow