jQuery Isotope - Как отключить интерактивный контент в расширенном .item?

Question

Я использую jquery Isotope для создания галереи портфолио, почти все работает как ожидалось, единственное, что я хотел бы изменить, это поведение открытого содержимого. Теперь, когда вы нажимаете на фотографию, окно содержимого расширяется и обнаруживает большее изображение с некоторым текстом, проблема в том, что при повторном нажатии на поле содержимого (.item) содержимое возвращается к его первоначальному размеру, и я не хочу что, поскольку в одном из ящиков содержится более одного изображения с colorbox.

Лучшим решением было бы добавить кнопку закрытия в «большом» контейнере вместо использования всей области окна, но это оказалось больше, чем я могу справиться.

Вот код, я использую для управления коробкой размеров и нажмите обнаружение:

$(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 
     }, 

Любой идею, как я могу остановить «большое» окно от закрытия при нажатии и добавить кнопку для его закрытия вместо всей коробки?

Спасибо заранее!

Answer 1

Ну, я, наконец, получил эту работу, поэтому я поделюсь изменениями, которые я сделал с моим кодом; вероятно, не самый лучший, но он сработал. Это может быть полезно для кого-то, так что вы здесь.

Этот кусок кода сокращалось коробку, чтобы это оригинальный размер:

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

Через несколько дней strugling я изменил этот код для следующих действий:

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

Теперь как только .item расширяется на .item.large он не будет изменяться, пока вы не нажмете на другой .item, независимо от того, сколько раз вы нажимаете на большой ящик, он останется неизменным! Поэтому теперь я могу добавить несколько изображений в один квадрат и использовать Lightbox или Colorbox, чтобы открыть их без моего изотопа .item.large сжимается! : D

Answer 2

Хорошее решение, я думаю, это this one here. В принципе, вы можете сделать любой divвнутри каждого изотопного элемента интерактивный элемент «максимизировать» или «минимизировать»; как кнопка, область, значок, ссылка или что-то еще. И вам не просто нужно беспокоиться о том, чтобы вникать в методы jQuery, такие как event.stopPropagation().