Magnifier.js를 이용해서 이미지에 돋보기 기능을 넣어 보았습니다. > 영카트5 스킨

영카트5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

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

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

첨부파일

magnifier.zip (91.1K) 428회 다운로드 2014-05-21 14:12:19

본문

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
추천
9

댓글 전체

전체 113
영카트5 스킨 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT