AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
thisgun

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

thisgun
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2014-05-21 (수) 11:37:57 · 16256 · 7

링크

http://thisgun.cafe24.com/yc5/shop/item.php?it_id=1400639103 (9478) http://mark-rolich.github.io/Magnifier.js/ (3565)
제곧내.png
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
#PC용

첨부파일

제곧내.png (743 KB) 0회 2014-05-21 11:37
magnifier.zip (91.1 KB) 439회 2014-05-21 14:12
|

댓글 7개

비비톤
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-21 (수) 15:22:36
웁스~~
환환이º
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-01-28 (수) 13:28:14
질문 올려놓고 비슷한 스킨없을까 하고 찾는중에 이걸 봤네요... 불쌍하긴하지만... 좀 웃었네용 ㅋㅋ
작은앙심
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-30 (금) 10:23:51
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
불불독
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-11-25 (화) 09:46:02
안녕하세요. IE8 에서는 상품상세를 포함한 아래부분이 출력이 안되네요.
감사합니다.
초초미
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-11-19 (목) 10:49:26
잘사용하겠습니다. 좋은 정보 감사합니다.
당당근이좋니
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-03-27 (금) 16:24:52
혹시 최신버젼에서는 안되나요?
댓글을 작성하시려면 로그인이 필요합니다.

영카트5 스킨

119건

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

태그 필터 (최대 3개) 전체 PC용 모바일용 Device
+