jquery

Magnify 돋보기(확대) 플러그인 적용하기

소화자/ editor

  • 6 comments
  • 2,421 views
  • 2017년 12월 3일

https://github.com/thdoan/magnify 에서 제공하는 MIT 라이센스의
magnify 돋보기 플러그인 사용법을 익혀 웹페이지에 적용시켜 봅니다.

시작하기 전에


자바스크립트로 직접 돋보기 기능을 구현해 보려다가 문득 이미 무료로 좋은 게 있지 않을까 생각에,
검색을 해 보았더니, 역시 상업용도 있지만, 제가 제일 좋아하는 MIT 라이센의 따끈 따근한 업데이트 된지
얼마 안된 Magnify란 플러그인이 있었습니다.

Magnify 플러그인 다운로드 에서 다운받아 압축을 푸시면 dist 디렉토리의 css , js  폴더 아래
필요한 css, js 파일이 들어있습니다.
물론 bowser나 npm을 이용해서 바로 설치도 가능합니다.

MIT 라이센스답게 사용법에 대한 설명이 많이 부족한 것 같아, 제 경험을 공유하고자 합니다.

자 그럼 달려볼까요~~

 

예제 보고 Feel 받기


먼저 그림 위에 마우스를 올려 보고, 버튼도 눌러 봅니다.

Html5Around.com on html5around.com

동작 원리


돋보기의 동작원리는 그림 자체를 확대해서 보여주는 것이 아니고,
작은 그림과 큰 그림 2개를 준비해서, 화면에는 작은 그림만 보여주고
마우스를 올리면 좌표비율로 계산해서 해당되는 부분의 큰 그림을 보여주는 눈속임입니다.

 

사용법 터득


• html 파트

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<title>Html5Around.com</title>
<link rel="stylesheet" href="https://thdoan.github.io/magnify/css/magnify.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<![endif]-->
<!--[if IE 9]><!-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--<![endif]-->
<script src="https://thdoan.github.io/magnify/js/jquery.magnify.js"></script>
 </head>
<body>
<!-- img 태그 src에 작은 이미지, data-magnify-src에 큰 이미지를 링크 -->
<img id="sample-watch" src="http://html5around.com/wordpress/wp-content/uploads/2017/03/html5around_msmall.jpg" 
 alt="Sample image" class="zoom" data-magnify-src="http://html5around.com/wordpress/wp-content/uploads/2017/03/html5around_mbig.jpg">
&nbsp; &nbsp; &nbsp;
<p><br><button id="html5"> 돋보기 기능 끄기 </button>&nbsp;-&nbsp;
 <button id="around"> 돋보기 기능 켜기 </button><br />
 <button id="com"> 1클릭에 돋보기 40px크게 400px 까지만... </button>
</p>
</body>
</html>

여기서 주목하셔야 할 부분은 magnify.css, jquery.min.js, jquery.magnify.js 파일을
link와 script src 속성을 이용해서 미리 포함 시켜 놓으셔야 합니다.
다운받은 경로로 연결시키시거나,그게 넘 귀찮으시다면 그냥 제 소스 그대로 쓰셔도 됩니다.

다음으로 img 태그의 src속성에는 작은이미지를 연결시키시고, data-magnify-src 속성에는 큰 이미지를 연결시킵니다.

img 태그안에 class="zoom"이 포인트로 돋보기 기능을 쓰고자 하는 이미지에는 이걸 꼭 쓰셔야합니다.

• CSS 파트

/* 돋보기 크기 조절용 */
.magnify .magnify-lens {
 width: 200px;
 height:200px;
}

/* Demo용 CSS */
html {
 width: 100%;
 height: 100%;
 display: table;
}
body {
 width: 100%;
 height: 100%;
 display: table-cell;
 font-family: sans-serif;
 font-size: 12px;
 padding: 1em;
 text-align: center;
 vertical-align: middle;
}
img {
 border: none;
}
#sample-watch {
 width: 100%;
 max-width: 400px;
}

CSS에서 중요한 부분은 .magnify .magnify-lens로 magnify.css에 이미 정의가 되어 있는 부분으로
제가 돋보기 사이즈 조정을 편하게 하시라고 밖으로 꺼내 놓았습니다.
여기에 원하시는 돋보기의 크기값을 세팅하시면 됩니다.

참고로 돋보기는 magnify.css 파일을 보시면 바로 아시겠지만, 이미지가 아니고, 그냥 css로
border-radius:50%를 줘서 만든 box입니다.

여기서 주의할 부분으로,img에 적용된 css로 sample-watch안에 기술된 width와 max-width 사용입니다.
width를 100% 아닌 값으로 하면 이미지 영역을 제대로 인식하지 못하고,
max-width 속성에 작은이미지의 원래 넓이 값으로 맞춰주지 않으면,해상도가 낮은 상태로 커지는
원치 않는 동작이 발생합니다.
쉽게 그냥 width는 항상 100%,max-width는 작은 이미지의 원래 넓이 값으로 지정하시면 됩니다.

나머지 css 부분은 그냥 정렬등을 위한 곁다리입니다.

• JavaScript 파트


var $zoom;
$(document).ready(function() {
// 돋보기 기능 생성자
  $zoom = $('.zoom').magnify({
     afterLoad: function() {
     console.log('확대 기동!!!');
     }
  });
});

//기능 끄기 버튼
$('#html5').click(function() {
  $zoom.destroy();
});

//기능 켜기 버튼
$('#around').click(function() {
   $zoom = $('.zoom').magnify({
     afterLoad: function() {
       console.log('확대 기동!!!');
     }
   });
});

//돋보기 사이즈 키우기 버튼
$('#com').click(function(){
  var curSize=parseInt($('.magnify .magnify-lens').css("width"));
  if(curSize > 400) curSize=200; // 맥스 400까지만 
  $('.magnify .magnify-lens').css("width",curSize+40);
  $('.magnify .magnify-lens').css("height",curSize+40);
});

$('html').on({
   magnifystart: function() {
     console.log('\'magnifystart\' 이벤트 발생!');
   },
   magnifyend: function() {
     console.log('\'magnifyend\' 이벤트 발생!');
   }
});

html과 css의 설정이 제대로 되어 있다면 jQuery에서의 설정은 너무 쉽습니다.
html의 img 태그안에 class=”zoom”에 생성자를 연결시키기만 합니다.
소스상의 //돋보기 기능 생성자 부분을 그대로 써주시면 됩니다.

destroy() 함수는 돋보기 기능을 멈추게 합니다.

돋보기 사이즈 키우기 버튼은 혹 이해에 도움이 되실까 싶어 제가 임의로 넣어본 기능으로
돋보기 css의 width, height값을 받아와서 누를 때마다 40px씩 커지고,
400px이 넘으면 돋보기 초기 사이지 200px로 돌아가도록 하였습니다.

magnifystart, magnifyend는 magnify 플러그인이 추가로 지원하는 이벤트로
여기서는 돋보기 동작시작시나 끝나는 시점에 원하는 기능이 있으시다면
추가하시면 됩니다.

 

마무리


설명은 좀 길었지만, 실제 해 보시면 그리 어렵지 않다는 걸 아시게 될 겁니다.

사실 이런 샘플은 쉬운 편이죠,
웹 개발의 특성상 실제 적용할 페이지는 무수한 미리보기와 조금씩의 수정이 쌓이고 쌓여 만들어지니까요.

오늘도 화이팅 하십시오 🙂
질문이나 댓글 주시면, 답변 드리겠습니다.

이 글이 누군가에겐 조금이나마 도움이 되었으면 하는 작은 바램입니다.

소화자

존재를 드러내지 않고 무림의 배후를 조정하는 전설로만 전해지는 무엇이든 소화하는... 갑 오징어~^-^

6
Leave a Reply

avatar
2 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
24시간이모자라소화자코딩초보 Recent comment authors
newest oldest most voted
코딩초보
Guest
코딩초보

돋보기기능 끄기가 안됩니다ㅠㅠㅠㅠ

24시간이모자라
Guest
24시간이모자라

위 소스대로 했는데 왜 자꾸 저는 돋보기가 안나오는걸까요 ㅠㅠ
돋보기 기능 끄기 켜기 이런건 필요없어서 그거 빼고는 필요한것을 다 썼는데 ㅠㅠ
Uncaught TypeError: $(…).magnify is not a function
at HTMLDocument. (hotitem.jsp:95)
at l (jquery.min.js:2)
at c (jquery.min.js:2)
이 오류가 .. js도 경로 맞게 설치하고 경로대로 넣었는데..
순서에도 에러가 난다기에 순서도 바디안 맨 밑에 넣어보기도 하고 위에 넣어보기도 하고 다했는데로 휴..ㅠㅠ 이틀 꼬박 새벽에 잠드네요 .. 요세 너무 스트레스에요 ㅠㅠ..도와주세요..