작성일자
카테고리 Javascript/JQuery


위 이미지에서 마우스를 큰 이미지에 대면 사각형 안쪽이 돋보기처럼 확대되어 보입니다. 그리고 사각형 외부는 흐릿하게 되는 제이쿼리 플러그인을 이용한 이미지 확대효과입니다. 원본 사이트를 참고하시려면 이곳 을 클릭하면 이동합니다. 다음의 압축파일은 index파일을 수정하고 이미지를 다운 받아 설치한 것으로 인덱스파일을 클릭하면 기본 웹브라우저에서 바로 볼 수 있고 자바스크립트 파라미터는 이미지로 만들었으니 참고하세요.

cloud-zoom.1.0.2-1.zip

 
설치방법은 아주 간단합니다.


스타일 시트 링크 파일은 경로를 바꿔서 자신의 사이트에 맞춥니다. 구글의 제이쿼리 라이브러리를 사용하면 별도의 제이쿼리 라이브러리를 설치하지 않아도 되고 속도도 빠릅니다.  클라우드줌 제이쿼리 플러그인도 js폴더나 다른 곳에 설치하고 경로도 바꿔줍니다. 


이미지는 같은 이미지가 3종류입니다. 원본이미지인 bigimage가 있고, 작은 이미지, 썸네일 이미지인 tinyimage가 있습니다.


cloud-zoom 클래스가 있는 큰 이미지 링크가 작은 이미지를 감싸도록 합니다. 이부분만 사용하면 하나의 이미지를 사용하여 확대사진을 만들 수 있지만 이미지갤러리를 만들어서 썸네일이미지를 클릭하면 작은 이미지가 나타나고 이 작은 이미지를 확대하여 보게 할 수 있습니다.


위와같이 클래스를 cloud-zoom-gallery로 바꿔주고 설정을 해주면 됩니다.


자바스트립트 파라미터 설정은 cloud-zoom.1.0.2.js 파일을 에디터에 열고 하단에 보면 위와같이 나옵니다.


zoomWidth와 zoomHeight는 auto로 설정해두면 마우스오버했을때 우측에 나오는 이미지창의 크기가 작은 이미지 사이즈과 같게 나옵니다. 수치의 단위는 픽셀이고 변경해서 설정할 수 있습니다.

포지션은 작은 이미지를 기준으로 좌,우,상,하,내부로 설정할 수 있고 다른 html 요소의 id를 입력할 수도 있습니다. 

adjustX와 Y는 줌윈도우를 세밀하게 픽셀단위로 위치를 수정할 수 있습니다. tint는 작은 이미지에 나타나는 색상을 설정할 수 있습니다. 6자리의 색상코드인 헥스넘버로 입력합니다. softFocus가 설정되어있을때는 작동하지 않습니다.

tintOpacity는 돋보기 커서의 투명도이며 수치가 0이면 완전 투명이고 1이면 완전 불투명입니다. 소프트포커스는 작은이미지에 커서를 올렸을때 나타나는 블러효과입니다. 틴트를 설정했을때는 작동하지 않습니다.

smoothMove는 줌이동시 이미지의 부드러운 정도를 설정합니다. 수치가 높으면 움직임이 부드럽고 1은 전혀 효과가 없습니다.
showTitle은 이미지의 타이틀을 보이게 하고 titleOpacity는 타이틀의 투명도를 설정합니다.

이렇게 변경을 하면 cloud-zoom.1.0.2.js파일을 min버전으로 저장하거나 이 파일을 직접 링크로 변경해줘야 적용이 됩니다.


<저작권 관련>

이 버전의 클라우드 줌 플러그인은 라이센스가 MIT로 돼있어서 상업적으로 사용해도 됩니다. MIT 라이센스는 저작물의 사용, 복사, 배포, 수정, 병합이 자유롭게 할 수 있으나 저작물의 이름이나 저작권자의 이름은 변경할 수 없습니다. 위 플러그인의 코드는 아래의 구글 코드 링크로 가면 내용을 볼 수 있습니다. MIT 라이센스로 나오죠.


반면에 이보다 높은 버전인 2.0이나 3.0 버전은 기능이 향상되면서 라이센스를 구매해야 상업적으로 사용할 수 있고 블로그와 같은 개인 용도는 무료로 사용할 수 있습니다.


저작자 표시 비영리 변경 금지
신고
BlogIcon 글쓴이입니다

신기한 기능들 많이 보고 가요~^^ 대단한 능력자이신듯~

BlogIcon 베누시안

안녕하세요. 반갑습니다. 칭찬 감사합니다. 하지만 그다지 대단하지도 않습니다. 남이 만든 것 소개한 것 뿐이랍니다.^^

그냥저냥

잘 보고 갑니다. 감사합니다^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 댓글 감사드려요.

쌈쌈

좋은 기능 많이 배워 갑니다^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 좋은 평가 감사합니다.

쌈쌈

한가지 문의 드릴게 있는데 혹시 position을 inside로 하면 마우스 오버를 했을경우 창의 크기를 조절 할 순 없는건가요???

BlogIcon 베누시안

압축파일을 풀면 js파일이 두개가 있습니다. 하나는 용량을 줄인 버전인데 min이라는 단어가 추가 되어있습니다. 이 js파일이 html 파일과 링크되어있어서 설정을 변경해서 사용하려면 min이 없는 js파일을 연결해야합니다. html 파일에서 12번째줄에서 min.만 제거하면 됩니다.

<script type="text/JavaScript" src="cloud-zoom.1.0.2.js"></script>

위처럼 제거하고 js파일을 열어서 설정을 변경하세요. 설정변경 내용은 위 본문 내용을 참고하세요. 픽셀 단위는 입력하지 않습니다.

이미지를 싸고 있는 테두리(파란색)테두리는 없앨수 없는건가요?!!
알려주세요 ㅜ

BlogIcon 베누시안

안녕하세요. 반갑습니다. IE를 사용하면 그런 현상이 나옵니다. CSS에

a img { border:0; }

를 첨부하세요.

비밀댓글입니다

BlogIcon 베누시안

iframe 태그를 사용한 것입니다. 아래의 코드를 html 모드에서 작성하면 같은 이미지가 나타날 겁니다.

<iframe src="http://www.professorcloud.com/mainsite/cloud-zoom-test.htm" style="width:600px; height:400px;" frameborder="0" align="center">

BlogIcon 베누시안

제 스킨을 적용해 주셔서 감사합니다. 글쓰기 메뉴중 모바일 글쓰기도 잘되던가요?

BlogIcon 준콩ol

안녕하세요.
좋은 정보 감사합니다.
혹시 무료로 사용 가능한건가요?
상업적 용도에서도 무료로 사용가능한지 궁금하네요..
라이센스에 관련된 내용을 못찾아서 댓글답니다..

BlogIcon 베누시안

저작권 관련해서 내용을 첨부했으니 참고하세요.

비밀댓글입니다

BlogIcon 베누시안

제이쿼리는 플래시와 달리 소스가 모두 공개될 수 밖에 없습니다. 다만 디자인을 그대로 베껴서 사용하면 저작권 침해로 고소할 수는 있습니다.

안녕하세요

좋은정보 감사드립니다
저 질문이 있는데 혹시 이 게시글에 첨부되어있는 1.0버전을 상업적으로 사용해도 상관없는건가요..
글만읽고 이해가 잘안되서 드리는 질문입니다.

BlogIcon 베누시안

네 상업용으로 사용해도 됩니다.

잘봤습니당~

너무너무 잘봤습니다 궁금했던게 해결됬어요~
질문이 한가지 있는데 마우스 오버됬을때 돋보기라고 해야되나
그 네모 상자의 사이즈를 조절하고 싶은데 그거는 어떻게 해야될지모르겠어요~~

BlogIcon 베누시안

그것은 원본 이미지크기에 따라 달라지므로 설정이 안됩니다.

감사합니다.

안녕하세요. 정말 좋은 기능 제공에 감사드립니다.
다름이 아니라 처음 이미지에서 마우스 on 했을 때 확대화면이 나오지 않습니다.
클릭을 하면 이미지 경로로 넘어가고.. 썸네일 클릭 후 마우스 on을 해야만 확대가 가능한데
해결방법이 없을까요?

BlogIcon 베누시안

데모 파일 대로 적용을 해도 안되는가요?

감사합니다.

관리자의 승인을 기다리고 있는 댓글입니다

안녕하세요

관리자의 승인을 기다리고 있는 댓글입니다

안녕하세요

관리자의 승인을 기다리고 있는 댓글입니다

오오

좋은기능 ㄳㄳ

BlogIcon 차종헌

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바