- 사진, 그룹화, 슬라이드 쇼, 아약스, 인라인 및 아이프레임 콘텐츠를 지원합니다.
- 경량 : 10KB의 JavaScript (gzipped 5KB 미만).
- CSS를 통해 제어되므로 스타일을 다시 지정할 수 있습니다.
- 소스 파일을 변경하지 않고 콜백 및 이벤트 훅으로 확장 할 수 있습니다.
- JS에 설정되며 기존 HTML을 변경하지 않아도됩니다.
- 이미지를 사진 그룹에 미리로드합니다.
* Colorbox 사용방법
첨부된 압축파일을 해제하여 원하는 경로에 업로드합니다
jquery , colorbox js파일과 css 파일을 경로에 맞게 불러옵니다
라이트 박스 레이어 팝업 이미지를 보여주기 위한
스크립트를 호출을 아래와 같이 group1 로 선언 및 html 코드를 작성합니다
위와 같이 테스트할만한 샘플코드를 작성후 디자인을 어느정도 정리한후
웹페이지에서 실행을 하면 아래와 같은 이미지 팝업을 확인하실 수 있습니다
* Settings
transition : 전환유형을 설정 "elastic", "fade" , "none" 으로 설정 가능합니다
speed : 페이드 및 전환 속도를 밀리 초 단위로 설정 가능합니다
href : URL 주소 링크를 걸수 있습니다
title : 제목을 기입하는데 이용합니다
rel : Colorbox 갤러리의 선언된 요소를 그룹화하여 보여주거나 재정의하여 이용할 수 있습니다
ex. $("a.gallery").colorbox({rel:"group1"});
그룹화를 사용하지 않으려면 'nofollow' 로도 설정가능
이 밖에 옵션에 대한 셋팅 값은 사이트에 접속하여 확인이 가능하겠습니다
해당 플러그인은 활용용도가 넓고 많이 사용하는 플러그인 이므로
사이트 작업시 유용하게 사용되겠습니다
네티즌 의견이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
