JQuery Isotope - доступный контент в расширенном .item?

Question

Я новичок в jQuery, но я понимаю, как все работает. Теперь я использую изотоп (жидкость/отзывчивый макет) для разработки простой страницы и сумел успешно интегрировать Fancybox в содержимое в нем. Но проблема в том, что всякий раз, когда я пытаюсь щелкнуть ссылку на изображение в одном из моих ящиков в Isotope, предполагая, что окно будет увеличиваться после каждого щелчка, поле закрывается назад до его первоначального размера, при этом изображение накладывается сверху Все это.

Я не знаю, как это объяснить, но вот сайт sample, что я создал в jsfiddle:

1) Каким-то образом мне удалось получить ящики, чтобы работать так, как я хочу так выбора коробки ISN Это проблема. Но как нажимать на текстовую/видеосвязь расширенного блока без закрытия окна до его первоначального размера и положения? Я только хочу, чтобы он закрылся, когда я нажимаю на новую коробку.

2) А также, если возможно, может ли окно прокручиваться до выбранного поля каждый раз, когда его нажимают?

Надеюсь, это не слишком смущает никого. Спасибо заранее! :)

Answer 1

Я здесь новый, поэтому прошу прощения за отсутствие тщательного ответа. Чтобы получить желаемый эффект, вам нужно отменить функцию щелчка из раскрывающегося окна и выбрать другой элемент (возможно, загрузить его/показать его при расширении? Я бы предложил поместить элемент внутри расширенного элемента.), Чтобы запустить тот же эффект, что и теперь привязаны к расширенному ящику. Таким образом, ящик может работать с обычным текстом/видео/фотографиями, и вы все равно можете удалить расширение.

Answer 2

Если вы все еще ищете простое переменное решение, вы можете сделать это так

$(function() { 

    var $container = $('#container'); 

    $container.delay(2500).show().css({ 
     opacity: 0 
    }).animate({ 
     opacity: 1 
    }, 2500).isotope({ 
     itemSelector: '.element', 
     masonry: { 
      columnWidth: 288 
     }, 
     getSortData: { 
      selected: function ($item) { 
       return ($item.hasClass('clicked') ? -1000 : 0) + $item.index(); 
      } 
     }, 
     sortBy: 'selected' 

    }); 

    $('.maximised, .medium').hide(); 

    $('.display1, .display2').click(function() { 
     var $this = $(this); 
     bSelector = $this.hasClass('display1') ? '.maximised' : '.medium'; 

     var $previousSelected = $('.clicked'); 
     if (!$this.hasClass('clicked')) { 
      $this.addClass('clicked'); 
      $previousSelected.find('.minimised').toggle(); 
      $previousSelected.find('.maximised').toggle(); 
      $previousSelected.find('.medium').toggle(); 
     } 

     $previousSelected.removeClass('clicked'); 

     $this.find('.minimised').toggle(); 
     $this.find(bSelector).toggle(); 

     $container.isotope('updateSortData', $this).isotope('updateSortData', $previousSelected).isotope(); 
    }); 

}); 

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