jQuery Isotope - Wie kann anklickbarer Inhalt in expandiertem .item deaktiviert werden?

Question

Ich benutze jquery Isotope, um eine Portfolio-Galerie zu erstellen, fast alles funktioniert wie erwartet, das einzige, was ich ändern möchte, ist das Verhalten des geöffneten Inhalts. Wenn Sie jetzt auf ein Foto klicken, wird das Inhaltsfeld erweitert und zeigt ein größeres Bild mit etwas Text. Das Problem ist, dass der Inhalt, wenn Sie erneut auf das Inhaltsfeld (.item) klicken, auf seine ursprüngliche Größe zurückkehrt und ich nicht möchte das, weil einige der box mehr als ein bild mit colorbox enthält.

Die beste Lösung wäre, eine Schaltfläche "Schließen" auf dem "großen" Container hinzuzufügen, anstatt den gesamten Bereich zu verwenden, aber das ist mehr, als ich verarbeiten kann.

Hier ist der Code, den ich die Boxen steuern bin mit Größen und klicken Sie auf Erkennung:

$(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 > .item-content'); 
      jQuery('.large > .thumb'); 
      jQuery('.large > 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 
     }, 

Jede Idee, wie kann ich die ‚große‘ Box stoppen, wenn darauf geklickt Schließen und eine Schaltfläche zum Schließen sie hinzufügen statt der ganzen Box?

Vielen Dank im Voraus!

Answer 1

Nun, ich habe endlich funktioniert, also werde ich die Änderungen an meinem Code teilen; wahrscheinlich nicht das beste, aber es hat funktioniert. Es kann für jemanden nützlich sein, also geh hier hin.

Dieses Stück Code die Box schrumpfte auf ihrer Originalgröße:

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'); 

Nach ein paar Tagen strugling ich diesen Code für das folgende geändert:

if ($(this).is('.large')) { 
     jQuerycontainer.find('.large').each(function(){ 
     jQuery(this).toggleClass('large'); }); 

nun einmal die .item erweitert zu .item.large wird die Größe nicht geändert, bis Sie auf ein anderes .item klicken, egal wie oft Sie auf die große Box klicken, es bleibt gleich! So kann ich jetzt mehrere Bilder zu einer Box hinzufügen und Lightbox oder Colorbox verwenden, um sie ohne mein Isotop .item.large schrumpfen zu öffnen! : D

Answer 2

Eine gute Lösung, denke ich, ist this one here. Grundsätzlich können Sie jedes divinnerhalb jedes Isotope Elements ein klickbares "maximieren" oder "minimieren" Element machen; wie ein Knopf, ein Bereich, ein Icon, ein Link oder was auch immer. Und Sie müssen sich nicht nur darum sorgen, mit jQuery-Methoden wie event.stopPropagation() herumzuhantieren.