单击使图像适合屏幕

Question

I have an image that when clicked I wanna make fit screen. I'm currently using a simple IMG tag linking to the full image, but its not what i want.

 <div> <a href="img.jpg"><img src="img.jpg" width="100%"></a> </div>

I want to make it fit screen (onclick), like it happens on the Tumblr or Twitter app on my iphone. Here's an example of the kind of effect I'm describing, but using an image.

I'm trying to make it happen in php or javascript, if possible, for Wordpress. Any help, including how you call this function, would be appreciated.

Answer 1

Assuming you mean "make it fit screen" to mean the browser window entirely, you can do this!

/* Adding the class to the image itself */
$('div').click(function () {
   $(this).children('img').addClass('full-size');
});

/* Adding the class to the container div */
$('div').click(function () {
   $(this).addClass('full-size');
});

/* CSS */
.full-size {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   position: fixed;
}