[javascript] Isotope에서 아이템들에 대한 확대/축소 효과를 적용하는 방법은 무엇인가요?

Isotope에서 아이템들에 대한 확대/축소 효과를 적용하는 방법은 scale 메소드를 사용하는 것입니다. 이 메소드를 호출하여 아이템의 크기를 조정할 수 있습니다.

먼저, 확대/축소 효과를 적용하려는 Isotope 컨테이너의 요소를 선택합니다. 예를 들어, #isotope-container라는 id를 가진 요소를 선택하고자 한다면, 다음과 같이 선택할 수 있습니다:

var container = document.querySelector('#isotope-container');

다음으로, 선택한 요소에 Isotope 라이브러리를 초기화합니다. 이 때, itemSelectorlayoutMode 등 필요한 옵션을 설정합니다:

var iso = new Isotope(container, {
  itemSelector: '.item',
  layoutMode: 'fitRows'
});

이제, 확대/축소 효과를 적용할 아이템을 클릭할 때마다, 해당 아이템의 크기를 변경하는 scale 메소드를 호출합니다. 예를 들어, .item 클래스를 가진 각각의 아이템을 클릭할 때마다 크기를 변경하려면, 다음과 같이 코드를 작성할 수 있습니다:

var items = document.querySelectorAll('.item');

items.forEach(function(item) {
  item.addEventListener('click', function() {
    // 아이템의 크기를 2배로 확대합니다.
    iso.scale(item, 2);
  });
});

위의 예제에서는 아이템을 2배로 확대하도록 설정했습니다. 필요에 따라 다른 확대/축소 비율을 사용할 수도 있습니다.

참고: Isotope 라이브러리의 버전에 따라 메소드 이름이 다를 수 있으니, 사용 중인 라이브러리 버전에 맞는 메소드를 사용해야 합니다.

참고 문서: