[플러그인] 이미지 확대 플러그인 Zoomer

https://www.jqueryscript.net/demo/Smooth-Image-Enlargement-Plugin-Zoomer/

jQuery Zoomer Plugin Examples

 

 

 

---

 

이미지를 확대, 축소 하고 마우스로 드래그하면 이동이 가능한 플러그인.

간단한 지도 이미지에 사용하면 좋다. 

 

 

간단한 예약 사이트를 작업 하는데 썸네일을 클릭하면 팝업이 뜨고,

버튼을 클릭하면 팝업 내 이미지가 확대되고 축소도 되면서 드래그도 가능해야 했다.

처음에는 백그라운드 이미지를 넣어서 +버튼을 누르면 백그라운드 이미지 사이즈를 늘리고 -버튼을 누르면

백그라운드 이미지 사이즈가 줄어드는 식으로 생각을 해서 스크립트를 짰다.

하지만 이런저런 변수로 인해 플러그인을 찾아 보았고 그 중에 제일 괜찮은 플러그인이 바로 이 Zoomer였다.

 

웹은 IE9이상 가능하고 모바일에서도 잘 나온다.

 

 

 

 

 

/* ---------
   html
----------*/
<div>
  <img src="" alt="">
  <a href="#none" class="expand"></a>
</div>



/* ---------
   script
----------*/

//zoomer
function zoomAction() {
  $(".zoomer_basic").zoomer();
  $(".zoomer_custom").zoomer({
    controls: {
      zoomIn: ".zoomer_custom_zoom_in",
      zoomOut: ".zoomer_custom_zoom_out",
      next: null,
      previous: null
    }
  });
}


// zoomer 실행
zoomAction();


// zoomer 삭제
$('.zoomer_basic, .zoomer_custom').zoomer('destroy');

 

위는 내가 쓴 코드이다.

 

zoomer를 function으로 묶어서 이벤트 실행시에만 작동하게 했다.

나 같은 경우는 팝업 오픈시에만 zoomer를 실행!

 

그리고 zoomer를 확대한 상태에서 팝업을 끄면 그 상태로 머물러 있었기 때문에 초기상태로 돌려놔야했다.  팝업을 닫을 때마다 destroy시키도록했다.

 

 

zoomer를 실행하면 자동적으로 html태그가 생긴다. 해당 태그를 잘 살펴보면서 커스텀하면 된다. 

작동 방법도 쉽고 웹/모바일에서도 잘 되기 때문에 다음에 또 이런 UI를 쓸 일이 있으면 쓰고 싶은 플러그인이다.

물론 직접 만들어보는게 제일 좋겠지만.