[javascript] Isotope을 사용하여 웹 사이트의 사진 갤러리를 동적으로 업데이트하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope를 사용하여 웹 사이트의 사진 갤러리를 동적으로 업데이트하는 방법

이 글에서는 Isotope라는 자바스크립트 라이브러리를 사용하여 웹 사이트의 사진 갤러리를 동적으로 업데이트하는 방법을 알아보겠습니다. Isotope는 간단하고 유연한 방식으로 웹 요소들을 정렬하고 필터링하는 데 사용되는 도구입니다.

Isotope를 사용하여 웹 사이트의 갤러리를 업데이트하는 방법은 다음과 같습니다.

HTML 파일에 Isotope 라이브러리를 추가합니다. <script> 태그를 사용하여 Isotope 라이브러리를 로드합니다. 이를 위해서는 Isotope 라이브러리 파일을 다운로드하고 script 태그를 통해 파일 경로를 지정해야 합니다.
```
 <script src="isotope.js"></script>
```
갤러리 요소를 준비합니다. 사진들을 감싸고 있는 컨테이너와 각 사진들을 위한 아이템 요소들을 만듭니다. 예를 들어, <div> 요소를 사용하여 컨테이너를 만들고 각 사진을 나타내는 <div> 요소를 아이템으로 만들 수 있습니다.
```
 <div class="gallery">
   <div class="item">사진1</div>
   <div class="item">사진2</div>
   <div class="item">사진3</div>
   
 </div>
```

Isotope를 초기화하고 갤러리를 설정합니다. 자바스크립트 코드를 사용하여 Isotope를 초기화하고 원하는 설정을 적용합니다.

 var gallery = document.querySelector('.gallery');
 var iso = new Isotope(gallery, {
   // 옵션 설정
   itemSelector: '.item',
   layoutMode: 'fitRows'
 });

 // Isotope 갤러리 업데이트
 iso.layout();

필터링 기능을 추가합니다. 필터링은 사용자가 특정 조건에 따라 갤러리를 필터링하여 원하는 이미지만 볼 수 있는 기능입니다. 예를 들어, 버튼을 추가하여 클릭 이벤트를 통해 필터링을 작동하도록 할 수 있습니다.
```
 <button onclick="filterGallery('nature')">자연</button>
 <button onclick="filterGallery('city')">도시</button>
```
```
 function filterGallery(filterValue) {
   iso.arrange({
     filter: filterValue
   });
 }
```

이제 Isotope를 사용하여 웹 사이트의 사진 갤러리를 동적으로 업데이트할 수 있습니다. 필요에 따라 CSS를 사용하여 갤러리의 스타일링을 추가할 수도 있습니다. 자세한 내용은 Isotope의 공식 문서를 참조하시기 바랍니다.

참고 문서: Isotope 공식 문서