-
유용한 제이쿼리 갤러리 필터에 대해 소개합니다~
이름은 isotope,
masonry 플러그인과 결합해 이미지 갤러리 기능을 제공하는 필터
(보고싶은 카테고리를 클릭하면 그 카테고리만 선별해서 보여주는 플러그인)
메뉴를 사용하여 이미지보드를 정렬하고 검색할 수 있는 isotope.js 사용법
1. 먼저 isotope공홈에 들어가서 제이쿼리 플러그인 알집파일을 저장
2. jsotope.pkgd.min.js 파일 가져오기
3. <script src="js/isotope.pkgd.min.js"></script> 헤더부분에 삽입
4. custom.js 파일 만든 후 isotope 스크립트 아래에 <script defer src="js/custom.js"></script> 삽입
5. html,css,js 가이드 참고후 custom.js 에 활용?
1. isotope.js 파일 load 두가지 방법
- 방법1) 로컬에 따로 js파일 저장 후 사용
- 방법2) 링크로 cdn 파일 연결
2. isotope.js 실행
다양한 옵션 중 기본적인 옵션 등
- itemSelector : 목록 형태의 각 요소들의 selector (움직일 아이템 이름)
- masonry : 레이아웃 형태 중 하나이며 핀터레스트를 생각하면 됨. (참고로 레이아웃에는 여러 종류가 있음)
- columnWidth : item의 넓이값 (= 기준이 되는 아이템 이름)
- gutter : item 간의 간격
- transitionDuration : '0.5s' (모션시간)
[isotope 플러그인 활용예제]
blog.naver.com/coding-/221476309215
[블로그] 링크 방식으로 isotope.js 불러와서 쓰는 방법
[블로그] 사용법
flickr(플리커)
- 인기있는 사진, 다른사람들 사진을 가지고 올 수 있다.
- flickr api 로 검색해서 api를 끌어와서 기업형 갤러리페이지에 넣을 수 있다.반응형'코딩스터디 > .etc' 카테고리의 다른 글
깃허브(GitHub) 설치 및 사용법 (0) 2021.06.25 SASS 사용하기 (0) 2021.05.04 SASS 설치 (0) 2021.05.04 웹표준 & 웹접근성 (0) 2021.05.04 [jQuery] swiper로 슬라이드 구현 (0) 2021.04.28 댓글