Как запустить событие при нажатии ссылки для Isotope.js?

Я пытаюсь добавить функцию к событию клика в свой код. Кстати, это для использования Isotope.js, довольно крутого инструмента jQuery.

Таким образом, приведенный ниже код работает следующим образом: Щелчок по ссылке фильтра данных в изотопе <ul> запускает огонь. Это заполняет страницу различными <li>, которые соответствуют параметру фильтра данных. Все хорошо.

Но затем у меня есть дополнительный код, который изменяет размер одного <li>, поэтому мне нужно, чтобы isotope запускал следующее по щелчку любого <li>. Isotope — это инструмент динамического макета страницы, который использует каменную кладку.

.isotope( 'reLayout', callback )

Который сбрасывает свойства макета и размещает каждый элемент элемента. См. - вывод isotope.js

Я думаю, мне просто нужен еще один фрагмент кода для скрипта, который запускает функцию ретрансляции при нажатии <li>.

Это то, что у меня...

<ul><a class="black" href="#" data-filter=".'.$folder.'">'.$folder.'</a> </ul>';

<li><a href="'.$file.'">'.rtrim($name,'.mp3').'</a></li>;

<script>
  $('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
  $('#container').isotope({ filter: selector });
  return false;
});

$('#container').isotope({
  masonry : {
    columnWidth : 1
  }

 }); 
</script>

javascript click jquery jquery-isotope jquery-masonry
person user987721    schedule 17.10.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward 

      // change size of clicked element
      $container.delegate( '.element', 'click', function(){
        $(this).toggleClass('large');
        $container.isotope('reLayout');
      });

Это код http://isotope.metafizzy.co/demos/relayout.html. страница использует, когда они делают именно то, что вы пытаетесь сделать. Этот же подход должен сработать и для вас.

Таким образом, $container будет вашим $("#container"), а .element будет таким же, как элементы в вашем контейнере. Это добавляет или удаляет класс «большой», который класс «большой» имеет css, что дает этому элементу больший размер. Затем, как вы заметили, изотоп вызывается с помощью «реле».

person Keith.Abramo    schedule 17.10.2011
comment
Спасибо, что так быстро ответили... поверьте мне, я очень старался с документацией на сайте. Я не понимаю, что он переключает размер с помощью своего кода. Мои ссылки ‹li› запускают целую кучу кода (soundmanager2), который выполняет изменение размера. Итак, я просто хочу сказать очень просто: инициируйте ретрансляцию, когда пользователь нажимает на «li». Возможно? - person user987721; 18.10.2011
comment
Привет, спасибо - это сработало. Мне пришлось просто удалить строку о переключении класса. - person user987721; 18.10.2011