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

[해피CGI][cgimall] Zoom Effect jQuery Plugin 본문

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

[해피CGI][cgimall] Zoom Effect jQuery Plugin

해피CGI윤실장 2018. 2. 14. 08:55

jquery 를 이용해서 제작된 이미지를 확대시켜서 볼수 있는 스크립트입니다.

 

다운로드 받은 파일의 압축을 풀어서
index.html 를 웹브라우저로 열어서 보면 확인이 됩니다.




이미지 위에 마우스를 올리면
해당 부분에 이미지를 더 큰 이미지파일을 이용해서
돋보기처럼 확대되는 효과를 가진 자바스크립트입니다.




small/ 경로에 있는 이미지는 작은이미지이며,
large/ 경로에 있는 이미지는 확대된 상태에서 표시되는 이미지입니다.




소스코드는
위 그림과 같은데
data-image 는 일반 이미지
data-zoom-image 는 확대된 큰 이미지
thumb 는 하단의 작은 사진을 의미하네요.

출처는
https://www.sourcecodester.com/javascript/7802/zoom-effect-jquery-plugin.html

입니다.

 

 

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

Comments