CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mewebs
mewebs

Reputation: 555

JQuery toggle images CSS

I am using Jquery to change the css of some images.

It works and changes the image css size when clicked. The only issue is that when I click on the next image, the previous image stays with the new css toggle.

Is there a way that when I click on the next image, the previous image goes back to the original css.

I have included a jsfiddle example here: http://jsfiddle.net/webdott/hSFpp/

Here is the jquery code:

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

You can see that each image you click stays large.

Thanks

Upvotes: 2

Views: 1200

Answers (3)

Ali Çarıkçıoğlu
Ali Çarıkçıoğlu

Reputation: 1305

check this fiddle. I solved your issue. please check this fiddle http://jsfiddle.net/Resey/1/ 

$('img').click(function() {
    $(this).toggleClass('fullview').siblings().removeClass('fullview');
});

Upvotes: 0

samrap
samrap

Reputation: 5673

Try removing the class on img "fullview" and adding it to $(this) after. 

$('img').click(function() {
    $('img').removeClass('fullview');
    $(this).addClass('fullview');
});

Fiddle

UPDATE:

I realized that though we both solved the problem, clicking the large image didn't toggle it. I added a function for that in the following code:

if ( $('img').hasClass('fullview') ) {
    $(this).click(function() {
        $(this).removeClass('fullview');
});
}

UPDATED FIDDLE

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337570

You need to remove the fullview class from all other img elements, before adding it to the one which was clicked. Try this:

$('img').click(function() {
    $('img').removeClass('fullview'); // remove class from all
    $(this).addClass('fullview'); // add class to clicked img
});

Updated fiddle

Upvotes: 4

Related Questions