JS change height and return to original CSS height

Question

Hoping to get some help on some javascript i'm getting stuck with.

Q1: JS RETURN TO IMAGE HEIGHT AND MARGIN

My layout is horizontal scroll of smaller images positioned in a grid, using different height percentages and margins to position. When you click on any of the images they all expand to height:100% and margin:0 which clears all previous styles putting it into a simple large image layout.

My question is how do I add a function that when clicking on .image-container the height and margins returns to how it was originally set in the css

JS FIDDLE DEMO (click any center image)

// GALLERY 100% height
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900) 
        .animate({'margin': '0'},900); 

    });

    // ? REMOVE HEIGHT ? 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '?'},900)
        .animate({'margin': '?'},900); 

    });

EDIT UPDATED QUESTION: Q2 HOW TO MAKE PAGE SIZE GROW WITH LARGER IMAGES

Right now my .image-container is set to a large width but with responsive images it's hard to find the correct width, is there a way to find this width and to make it grow along with the click grow of images (displayed above)

.image-container {
display:block;
width:3600px;
height: 75%;
float:left;

position:absolute;
top: 13%;
left: 120px;

z-index: -1;

}

Thanks for any help!

Answer 1

You need to store the original height in a variable.

Check out the updated fiddle

var originalheight;
        // GALLERY 100% height
        $('.image-container').click(function(){
            originalheight = $('.image-container img').height();
            $('.image-container img').animate({'height': '100%'},900) 
            .animate({'margin': '0'},900); 

        });

        //REMOVE HEIGHT ?
        $('.image-container').click(function(){
            $('.image-container img').animate({'height': originalheight},900)
            .animate({'margin': '0'},900); 

        });

EDIT:

Sorry about the goof up in previous solution. I didn't notice I was using click twice unnecessarily. Here's the updated solution with the updated fiddle.

       var originalheight;
       $('.image-container').click(function () {
           if (!originalheight) originalheight = $('.image-container img').height();
           if ($('.image-container img').css('height') == originalheight + "px") { // GALLERY 100% height
               $('.image-container img').animate({
                   'height': '100%'
               }, 900).animate({
                   'margin': '0'
               }, 900);
           } else { //REMOVE HEIGHT ?
               $('.image-container img').animate({
                   'height': originalheight
               }, 900).animate({
                   'margin': '0'
               }, 900);
           }
       });

Answer 2

First of all, I suggest you to use the focusout and blur event to undo changes, because the way you implement your 'click' event, the second part only will be considered (you erase the first click implementation doing so). the best thing, is to enlarge the image when clicked, and reinit it's size when you click away.

Try this :

// GALLERY 100% height
$('.image-container')
  .bind('click', function(){
    $('.image-container img').animate({height: '100%'},900) 
    .animate({margin: 0},900);
  })
  .bind('focusout blur', function(){
    $('.image-container img').animate({height: ''},900) 
    .animate({margin: ''},900);
  });

Or better, use classes in which you define the behaiviors on clicking, and on clicking again, for exemple :

<style>
.clickimage{ height : 100%; margin :0;}
.yourOriginalValues {height : original; margin : original;}
</style>

  $('.yourOriginalValues').click(function(){
    $(this).switchClass( "yourOriginalValues", "clickimage", 900 );
  });
  $('.clickimage).click(function(){
    $(this).switchClass( "clickimage", "yourOriginalValues", 900 );
  });      

ps. the switchClass method, is a jQuery UI functionality.

Answer 3

This is my idea, hope it'll work:

// Before animation
    var heights = new Array();
    var margins = new Array();
    $('.image-container img').each(function(){
       heights.push($(this).css('height'));
    });
    $('.image-container img').each(function(){
       margins.push($(this).css('margin'));
    });
// 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': '100%'},900) 
        .animate({'margin': '0'},900); 

    });

    // ? REMOVE HEIGHT ? 
    $('.image-container').click(function(){
        $('.image-container img').animate({'height': heights[$(this).index()]},900)
        .animate({'margin': margins[$(this).index()]},900); 

    });