title: jQuery Isotope - How to disable clickable content in expanded .item?
body: <p>I'm using jquery Isotope to create a portfolio gallery, almost everything is working as expected the only thing I would like to change is the behavior of the opened content. Now when you click over a photo the content box expands and reveal a bigger image with some text, the problem is that when you click again on the content box (.item) the content goes back to it's original size and I don't want that because some of the box contains more than one image with colorbox.</p>
  
  <p>The best solution would be to add a close button on the 'large' container instead of using the whole box area, but that's proving to be more than I can handle.</p>
  
  <p>Here is the code I'm using to control the boxes sizes and click detection:</p>
  
  <pre><code>   $(function() {
  
       var $container = $('#pageWrapper'),
            $items = $('.item');
  
      $('#filter').find('a').click(function() {
          // get the href attribute
          var filterName = '.' + $(this).attr('href').slice(1);
          filterName = filterName === '.show-all' ? '*' : filterName;
          $container.isotope({
              filter: filterName
          });
          return false;
      });
  
  // change size of clicked element
      $container.find('.item').live('click', function() {
          if ($(this).is('.large')) {
              jQuery('.item-content', this).fadeToggle("fast", "linear");
              jQuery('.thumb', this).fadeToggle("fast", "linear");
              jQuery('h3', this).fadeToggle("fast", "linear");
              $(this).toggleClass('large');
              $container.isotope('reLayout');
          } else {
              jQuery('.large &gt; .item-content');
              jQuery('.large &gt; .thumb');
              jQuery('.large &gt; h3');
              $container.find('.large').removeClass('large');
  
              jQuery('.item-content', this).fadeToggle("fast", "linear");
              jQuery('.thumb', this).fadeToggle("fast", "linear");
              jQuery('h3', this).fadeToggle("fast", "linear");
              $(this).toggleClass('large');
              $container.isotope('reLayout');
  
          }
      });
  
      // switch selected class on buttons
      $('#categories').find('.option-set a').click(function() {
          var $this = $(this);
  
          // don't proceed if already selected
          if (!$this.hasClass('selected')) {
              $this.parents('.option-set').find('.selected').removeClass('selected');
              $this.addClass('selected');
          }
  
      });
      // isotope behavior
      $container.isotope({
          itemSelector: '.item',
          masonry: {
              columnWidth: 10
          },
  </code></pre>
  
  <p>Any idea how can I stop the 'large' box from closing when clicked and add a button for closing it instead of the whole box?</p>
  
  <p>Thanks in advance!!</p>