[해피CGI][cgimall] 이미지 줌(Zoom) 기능이 있는 Jquery 갤러리 - xZoom

해피CGI, #happycgi, #cgimall, #JQuery, #image, #zoom, #이미지확대

- 라이센스

MIT



- 사용 방법


1. 파일 상단에 Jquery 라이브러리와 xzoom.css 파일, xzoom.min.js 파일을 링크합니다.

 

2. IMG 태그로 이미지를 출력하고 아래 옵션을 적용합니다.

· xoriginal - 확대/축소된 이미지로 사용되는 큰 이미지 경로

· xpreview - 선택 사항이지만 설정 시 이 속성은 중간 미리보기 이미지로 사용되는 반면
이 경우 src 속성은 작은 축소판 이미지로 사용됩니다.
이 속성이 설정되어 있지 않으면 src 속성이 중간 미리보기 이미지로 사용됩니다.

· xtitle - 캡션으로 사용될 텍스트 문자열이며 titleClass가 있는 "div" 컨테이너 내부의 확대/축소 출력 창에 표시됩니다.
이 속성이 사용되지 않으면 xZoom은 이미지의 일반 제목 속성을 사용합니다.

 

3. xZoom 플러그인을 호출합니다.

 

4. 각종 옵션, API 메소드, 이벤트도 제공하고 있으니 플러그인 사이트를 참고하시기 바랍니다. (상단 홈페이지 바로가기 클릭)





- 작동 예제