제이쿼리 갤러리 플러그인::isotope

유용한 제이쿼리 갤러리 필터에 대해 소개합니다~

이름은 isotope,

masonry 플러그인과 결합해 이미지 갤러리 기능을 제공하는 필터

(보고싶은 카테고리를 클릭하면 그 카테고리만 선별해서 보여주는 플러그인)

 

http://isotope.metafizzy.co/

 

 

 

메뉴를 사용하여 이미지보드를 정렬하고 검색할 수 있는 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 불러와서 쓰는 방법

 

 

in-web.co.kr/developer-section/filter-%EC%99%80-sort-%EA%B8%B0%EB%8A%A5%EC%9D%84-%EA%B0%96%EC%B6%98-%EB%B0%98%EC%9D%91%ED%98%95-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-js-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-isotope-js/

[블로그] 사용법

 

 

 

 

flickr(플리커)

www.flickr.com/

 

- 인기있는 사진, 다른사람들 사진을 가지고 올 수 있다.
- flickr api 로 검색해서 api를 끌어와서 기업형 갤러리페이지에 넣을 수 있다.