웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] jquery Isotope v1.5.25 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] jquery Isotope v1.5.25

해피CGI윤실장 2018. 3. 20. 09:07

* Isotope 소개

   - 특정영역의 이미지를 분류하여 보여주는 편리한 jquery plugin


* License

   - BSD, MIT License


* 이용방법
 
- 첨부된 압축파일을 다운로드 및 압축을 해제해하여
필요한 css, js 파일을 활용하여 사이트를 구성하는데 활용할 수 있습니다
다음과 같이 문서 상단에 jquery , isotope, css 파일을 선언합니다
      


이번엔 영역별로 노출할 매칭될 카테고리 들을 선언해줍니다




그리고 카테고리에 소속되어 보여줘야될 이미지를
카테고리별 id값에 적용하여 내용을 각각 구성해 줍니다





그리고 하단에 isotope 가 이미지 크기에 따라 너비를 올바르게 계산할 수 있도록
jquery window load 이벤트를 연결합니다 jquery 부분에 선언되는 2개의 섹션이 있으며
lsotope 를 초기화하고 그 컨테이너를 정의하는데 필요합니다




적용되었을때의 결과 화면은 아래와 같습니다


 

홈페이지바로가기  소스다운로드

Comments