Isotope
CDN 또는 NPM 설치 두가지 방법
단 , cdn도 npm 필수는 해주자
npm 설치
(참고)
npm install isotope-layout --save
npm i imagesloaded
(필수)
npm i @types/isotope-layout
npm i @types/imagesloaded
CDN
Isotope는 이미지가 겹치는 버그가 있기 때문에
imageLoaded도 같이 사용
BODY
<!-- 5) isotope 공식 홈페이지 : https://isotope.metafizzy.co/ -->
<script src="/lib/isotope/isotope.pkgd.min.js"></script>
<!-- isotope 이미지 겹침 문제로 사용 -->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>
Isotope 만들기
src/assets/initMain.ts or js
// initMain.ts
export default function initMain() {
// TODO : 6) Isotope + imageLoaded (버그 해결)
// 버그 : 이미지 겹치는 버그
// 소제목 부분 :
// 필터 부분 : potfolio-container 클래스
// TODO : as any : typescript의 타입 무시
/**
* $("필터선택자").imagesLoaded(function () {
isotope 코딩
let 변수명 = $("필터선택자").isotope({옵션})
isotope 소제목 설정 코딩
});
*/
($(".portfolio-container") as any).imagesLoaded(function () {
// TODO : 필터 셋팅
// 필터 선택자 : portfolio-container 태그를 선택해서 isotope 객체 생성
let portfolioIsotope = $(".portfolio-container").isotope({
itemSelector: ".portfolio-item", // 필터 선택자의 자식선택자(여러개)
layoutMode: "fitRows", // 화면 모드
});
// TODO : 소제목 셋팅 (소제목 클릭시)
$("#portfolio-flters li").on("click", function () {
$("#portfolio-flters li").removeClass("active"); // active 클래스 제거
$(this).addClass("active"); // 현재 클릭한 소제목에 active 클래스 추가
// TODO : isotope 객체를 생성, 실행부분
// data-filter=값 , 값 : *, .first, .second
// 현재 클릭한 필터의 값을 선택해서 isotope 를 적용함
// $(필터 선택자).isotope({옵션})
// $(this).data("filter") : data-filter="값"을 가져오는 함수
// 만약 data-var="값"이라면 : $(this).data("var")
portfolioIsotope.isotope({ filter: $(this).data("filter") });
});
});
}
컴포넌트
// IsotopeCom.tsx
import React, { useEffect } from 'react'
import initMain from '../assets/js/initMain'
function IsotopeCom() {
useEffect(()=>{
initMain();
},[])
return (
<div>
{/* Isotope 소메뉴 부분 시작 */}
<div className="row g-3">
<div className="col-lg-12 text-center">
<ul className="list-inline" id="portfolio-flters">
{/* <!-- isotopo 필터 정의 --> */}
<li className="mx-3 active" data-filter="*">
All Projects
</li>
<li className="mx-3" data-filter=".first">
Basic Develop
</li>
<li className="mx-3" data-filter=".second">
Advanced Develop
</li>
</ul>
</div>
</div>
{/* Isotope 소메뉴 부분 끝 */}
{/* <!-- isotope 필터 : .first, .second --> 시작 */}
<div className="row g-3 portfolio-container">
<div className="col-lg-3 col-md-6 portfolio-item first">
<div className="portfolio-img rounded overflow-hidden">
<img
className="img-fluid"
src={require("../assets/img/project/project-1.jpg")}
alt=""
/>
</div>
</div>
<div className="col-lg-3 col-md-6 portfolio-item second">
<div className="portfolio-img rounded overflow-hidden">
<img
className="img-fluid"
src={require("../assets/img/project/project-2.jpg")}
alt=""
/>
</div>
</div>
<div className="col-lg-3 col-md-6 portfolio-item first">
<div className="portfolio-img rounded overflow-hidden">
<img
className="img-fluid"
src={require("../assets/img/project/project-3.jpg")}
alt=""
/>
</div>
</div>
<div className="col-lg-3 col-md-6 portfolio-item second">
<div className="portfolio-img rounded overflow-hidden">
<img
className="img-fluid"
src={require("../assets/img/project/project-4.jpg")}
alt=""
/>
</div>
</div>
<div className="col-lg-3 col-md-6 portfolio-item first">
<div className="portfolio-img rounded overflow-hidden">
<img
className="img-fluid"
src={require("../assets/img/project/project-5.jpg")}
alt=""
/>
</div>
</div>
</div>
{/* <!-- isotope 필터 : .first, .second --> 끝 */}
</div>
)
}
export default IsotopeCom
'React > React - 외부라이브러리' 카테고리의 다른 글
외부라이브러리 - Jquery-ui Calendar (0) | 2023.10.31 |
---|---|
외부라이브러리 - Easing (0) | 2023.10.31 |
외부라이브러리 - owl-carousel (0) | 2023.10.30 |
외부라이브러리 - simpleLightBox (0) | 2023.10.30 |
외부라이브러리 - WOW (typescript) (0) | 2023.10.30 |