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

• 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

3 Answers 3

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.