CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andrew
Andrew

Reputation: 27

Resize an Image on click

So I'm trying to make a simple gallery of photos that enlarge when you click them and then return to their smaller size when you click them a second time. I have the enlarge part working but so far I have only been able to get the picture to scale back down by using ".mouseout" with JQuery, which is not what I want. Also I'd like the image to sit on top off all the other images/divs when it is enlarged, right now it gets covered by any other image to the left or right. Here's my code, and a jsfiddle link at the bottom

HTML

<div id="Gpic1">
    <img id='table' src='http://i.imgur.com/7ESpNI8.jpg'>
</div>

CSS

#Gpic1 {
    width: 280px;
    height: 187px;
    display: block;
    background: black;
}
#table {
    width: 280px;
    height: 187px;
}

JQuery

$('#Gpic1').hover(function () {
    $(this).find('img').fadeTo(500, 0.5);
}, function () {
    $(this).find('img').fadeTo(500, 1);
});

$('#table').click(function () {
    $('#Gpic1').find('img').fadeTo(0, 1);
    $("#table").stop().animate({
        width: 800,
        height: 533
    }, 200); //Bigger
}).mouseout(function () {
    $("#table").stop().animate({
        width: 280,
        height: 187
    }, 200); //Smaller
});

http://jsfiddle.net/kmx6C/

Thanks

Upvotes: 1

Views: 8856

Answers (2)

anAgent
anAgent

Reputation: 2780

You will need to keep track if the image is expanded or normal:

See it here: http://jsfiddle.net/kmx6C/4/

if ($(e.target).hasClass('expanded')) {
    $("#table").removeClass('expanded').stop().animate({
        width: 280,
        height: 187
    }, 200);
} else {
    $('#Gpic1').find('img').fadeTo(0, 1);
    $("#table").addClass('expanded').stop().animate({
        width: 800,
        height: 533
    }, 200);
}

If you're going to still use the mouseout event, then you'll want to make sure to remove the class there:

$("#table").removeClass('expanded').stop().animate({
    width: 280,
    height: 187
}, 200);

As for making is "sit" a top of other images, you'll want to make sure that the "z-index" and "position" is set accordingly.

Upvotes: 1

orhanhenrik
orhanhenrik

Reputation: 1415

You can add a class enlarged to the element you are enlarging, and then check whether the image is currently enlarged or not.

    if($('#table').hasClass('enlarged')){
        $('#table').removeClass('enlarged');
        $("#table").stop().animate({width: 280, height: 187}, 200 );
    }else{
        $('#table').addClass('enlarged')
        $("#table").stop().animate({width: 800, height: 533}, 200 );
    }

Fiddle: http://jsfiddle.net/4LUYM/

Upvotes: 3

Related Questions