CODEWITHSUNDEEP
javascriptjquery
gruber
gruber

Reputation: 29759

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 height 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?

Upvotes: 1

Views: 3031

Answers (4)

Steve Robbins
Steve Robbins

Reputation: 13812

$('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" />

Upvotes: 4

Steve Hansell
Steve Hansell

Reputation: 17703

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

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

Upvotes: 1

Ivan Nikolchov
Ivan Nikolchov

Reputation: 1584

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

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 220066

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.

Upvotes: 0

Related Questions