Magnifier.js를 이용해서 이미지에 돋보기 기능을 넣어 보았습니다.

Magnifier.js를 이용해서 상품 보기 페이지의 이미지에 돋보기 기능을 넣어 보았습니다.

그리고 이미지를 클릭시 새창 뜨는것을 colorbox.js 를 이용해 모달창으로 열게금 바꿔 보았습니다.

Magnifier.js 플러그인 주소
http://mark-rolich.github.io/Magnifier.js/

colorbox.js 플러그인 주소
http://www.jacklmoore.com/colorbox/

Works in Chrome, Firefox, Safari, IE 7, 8, 9 & 10

사용방법

/skin/shop/ 폴더에 압축 파일을 풀어서 넣어주신 후,

해당 상품 수정 관리에서 pc용 스킨을 magnifier로 선택해 주시면 됩니다.


이미지 확대 보기 레이어의 크기를 줄이시거나 더 키우고 싶으시다면
magnifier.css 에서
41번째줄 .magnifier_warp .magnifier-preview 의 width나 height를 수정해 주시면 됩니다.

colorbox 플러그인을 사용하고 싶지 않으실 경우
item.form.skin.php 파일의 4번째 줄 소스

$use_colorbox_js = 1; //colorbox.js 사용여부

값을 0으로 설정해 주시면 모달창이 안뜨고, 원래대로 새창이 뜰 것입니다.

기타, 위에서 언급된 플러그인들의 옵션값을 다르게 적용하고 싶다면
item.form.skin.php 하단 부분에서 옵션값을 지정해 주시면 되겠습니다.


아래 내용은 기본 스킨에서 변경되거나, 추가된 파일 내용입니다.

기본 스킨에서 변경된 파일

item.form.skin.php

그 외 추가된 파일

colorbox.css
magnifier.css
Event.js
Magnifier.js
jquery.colorbox.js