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

jQuery를 사용하여 첨부한 이미지를 확대 / 축소 / 드래그해서 움직일 수 있는 화면이 필요했다.

버튼만들고 하나하나 짜다보니 처음 생각보다 많은걸 해야할 것 같아 찾아보다보니 

jQuery Zoomer가 있었다!! 깔끔하고 간단하게 확대 / 축소 / 드래그 가 필요한 곳에 쓰면 좋을듯싶다.

 

일단, 아래에서 

jquery.fs.zoomer.min.js

jquery.fs.zoomer.css

받아준다

 

https://github.com/FormstoneClassic/Zoomer

GitHub - FormstoneClassic/Zoomer: A jQuery plugin for smooth image exploration.

 

- header

    <!-- 이미지 확대축소 -->
    <script src="/resources/assets/lib/jquery.fs.zoomer.min.js"></script>
    <link rel="stylesheet" href="/resources/assets/style/lib/jquery.fs.zoomer.css" />

 

- body

<div style="border: 1px solid black; width: 570px;">
	<div class="viewer" style="width: 530px; height: 500px;">
		<img alt="test" src="/resources/test.jpg" />
	</div>
</div>

 

-script

  $(function() {
  	//이미지 확대 축소
	$('.viewer').zoomer();
  })

간단하게 셋팅이 끝난다!

확대/축소/드래그

 

아래에서 데모 테스트도 가능하다!

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

Demo for