Изотоп с ящиками

Question

Я застрял и действительно нуждаюсь в помощи! У меня есть макет кирпичей, которые я использую изотоп jquery для макета. Существуют три кирпичных размера: квадратные, двухсторонние и двухквартирные, поэтому они идеально вписываются в место. То, что мне нужно сделать, - открыть ящик под кирпичом, когда вы нажмете его, и нажимать на любой кирпич ниже, насколько это необходимо для высоты ящика. Вот макет, чтобы объяснить, что я пытаюсь сделать:

Bricks with Drawer http://bdub.ca/bricks_drawer.jpg

В этом примере оранжевый кирпич кликнули и выдвижной ящик открывается на следующей линии разрыва, который после красного кирпича. Ящик всегда будет полушириной, как в макете.

Любые идеи? Я в недоумении, поэтому любые советы будут высоко оценены!

Answer 1

Решение предложил Джейсон Sperske:

http://jsfiddle.net/thomasNDS/5fNe9/2/

В этом примере расширить размер блока по щелчку и relayout других.

  $items.click(function(){ // $items regroup all item display 
      var $this = $(this); 
      // nothing to change if this already has large class 
      if ($this.hasClass('large')) { 
       $this.removeClass('large'); 
      }else{ 
       var $previousLargeItem = $items.filter('.large'); 
       $previousLargeItem.removeClass('large'); 
       $this.addClass('large'); 
      } 
      $container.isotope('reLayout'); 
      }); 

Вы можете настроить этот код в своем примере на 3 разных размера блоков.