Help with Jquery + Masonry Plugin: How to expand/collapse boxes to reveal content

Question

I\'m using the masonry jquery plugin on a project: (http://desandro.com/resources/jquery-masonry)

Basically I have a set of boxes (thumbnails) in a grid. When one is

Answer 1

I have an idea for this. You could change the code to this:

$('.box').click(function(){
   restoreBoxes();
   $(this)
    // save original box size
    .data('size', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $('#grid').masonry();
    })
    .addClass('expanded');
  }

 $( '.expanded' ).find('.main_img').click(function() {
    restoreBoxes();
 });

You'll still need the code that defines the restoreBoxes function and the call to Masonry at the top, I only included the code that needs to be added. So the full code would look like this:

$(document).ready(function(){

 $('#grid').masonry({
    singleMode: false,
    itemSelector: '.box',
    animate: true
 });

 $('.box').click(function(){
   restoreBoxes();
   $(this)
    // save original box size
    .data('size', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $('#grid').masonry();
    })
    .addClass('expanded');
  }

  $( '.expanded' ).find('.main_img').click(function() {
      restoreBoxes();
  });

  function restoreBoxes(){
   var len = $('.expanded').length - 1;
   $('.expanded').each(function(i){
    var box = $(this).data('size');
    $(this).animate({
      width: ( box[0] || 100 ),
      height: ( box[1] || 'auto' )
     }, function(){
        if (i >= len) {
       $('#grid').masonry();
      }
    })
    .removeClass('expanded');
   })
  }
 });
});

I'm not sure if this is the most efficient way, but I tried a version of this on a site I'm working on and was successful. This should make the div collapse only when you click on an image within the expanded div with the class ".main_img". You can replace this with whatever class name you want, but make sure that the image you want to click on to close the div has this class. If you wanted any image in the expanded div to close the div, you could simply use "img" instead of ".main_img". Let me know how this works, and if you get any errors, post them here.