jQuery making images bigger

On my site I've got images which are in reality for example 2000 / 1500 px

I resized them using width and heig开发者_如何转开发ht properties in CSS, but I would like to show them bigger (maybe in popup or something like that) after clicking on them.

Which one plugin or method is the easiest one to accomplish this?

$('img').click(function() {
   $(this).toggleClass('clicked');
});

img {
    width: 50px;
    height: auto;
}

.clicked {
    width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /> <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />  <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" />

Fancybox (jQuery plugin) is one of my favorites: http://fancybox.net/

Very easy to use and the site provides a lot of examples.

You do not need any specific plugin for that. You can simply use jQuery's css method:

$('img').css({
    width: 'auto',
    height: 'auto'
});

Note: This'll target all of your images. You'll want to replace that with your own CSS selector.

You can find many of them out there
All of them extremely easy to implement.