라이트박스 JS플러그인 chocolat.js

chocolat.js는 웹사이트의 대문을 풀커버 or 컨테이너 내부의 이미지로 제작할 때 사용할 수 있는 자바스크립트 라이브러리다. 사실 풀커버 이미지 정도는 부트스트랩, 파운데이션, 머트리얼과 같은 css프레임워크로도 충분히 제작할 수 있으며, 굳이 chocolat.js를 사용할 필요가 없다.  그럼에도 불구하고 chocolat.js를 한번쯤 눈여겨 볼 필요가 있는 이유는 사용자가 이미지 크기를 조작할 수 있기 때문이다.

 

http://chocolat.insipi.de/#home

 

∵가볍다

chocolat.js은 정말 가볍다.

css,js파일을 합친 용량이 23kb이며, min버전을 사용할 경우 10kb밖에 되지 않는다. 그리고 CDN방식으로도 사용할 수 있는데, 워낙 저용량이다보니 차라리 직접 파일을 다운로드 받아서 사용하는 편이 더 빠를 수 있다. 

<script type="text/javascript" src="dist/js/chocolat.js"></script>

<link rel="stylesheet" href="dist/css/chocolat.css" type="text/css" media="screen" >

만일 이미지 대문이나 이미지박스를 사용할 목적으로 부트스트랩과 같은 라이브러리를 사용하겠다면 chocolat.js만 사용하는 편을 추천한다.

 

∵API

chocolat.js의 API는 아래 링크에서 확인할 수 있다.

https://chocolat.gitbook.io/chocolat/api

Api