이미지 확대/축소를 할 수 있는 라이브러리는 여러가지가 있다. 다만 보통 찾기가 어려운게 이미지 확대/축소 검색을 단순한 컨트롤을 이용한 확대 축소 라이브러리만 있기때문에 막상 찾기가 어려울때가 있다.
이번에 찾은 라이브러리는 JQUERY 라이브러리 중 하나인 Zoomer 라이브러리로 컨트롤도(+,-) 지원하고 모바일에서는 터치를 통해 확대하고 이동까지 가능한 참 좋은 라이브러리다. 검색해보면 잘 나오지 않고 깃에 이름이 똑같은 zoomer 라이브러리가 검색되는데 해당 라이브러리와는 다르기 때문에 다운로드는 아래에서 받아야한다.
사실 이 라이브러리는 내가 진행중인 프로젝트중 이미지 확대/축소가 필요하여 찾게되었는데 처음에는 원하는 기능이 검색이 안되서 그냥 터치기능을 이용해서 만들까 했는데 만들다 보면 상당히 시간이 많이 걸리기 때문에 빠른 포기를 하고 계속 구글링 통해 찾다보니 발견하게 되었다. 사용 방법의 경우 아래와 같다. (상단 Zoomer 사이트에서 플러그인 다운로드가 필요하다.)
<!-- jquery 라이브러리 로드 -->
<script src="//code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- Zoomer JS 라이브러리 로드 -->
<script src="https://blog.redinfo.co.kr/public/Zoomer/jquery.fs.zoomer.js"></script>
<!-- Zoomer CSS 로드 -->
<link href="https://blog.redinfo.co.kr/public/Zoomer/jquery.fs.zoomer.css" rel="stylesheet" type="text/css">
<style>
.img-wrap{ width:400px; height:400px; border:solid 1px #eee; overflow: hidden; margin:0 auto;}
.img-wrap img{ width:100%; height:100%; }
</style>
<script>
$(function() {
//이미지 확대 축소
$('.zoomer_basic').zoomer();
})
</script>
<div class="img-wrap zoomer_basic">
<img src="https://blog.redinfo.co.kr/public/Zoomer/tmp.png" alt=""> <!-- 이미지 src는 자신의 이미지로 변경 필요-->
</div>
일단 사용해보니 몇가지 수정이 필요하였는데 그부분은 이미지 주변을 덮는 백그라운드 색상과 컨틀롤러 삭제 문제였다. 프로젝트에 적용될 기능에는 컨트롤러가 필요없었고, 디자인상 백그라운드가 필요가 없었다. 이 문제는 아래와 같이 해결했다.
zoomer 가 기본으로 가지고 가는 백그라운드와 자동생성되는 컨트롤러는 css 를 통해 변경이 가능하다. 물론 기본 백그라운드는 jquery.fs.zoomer.css 에 정의가 되어있는데 해당 파일을 수정해 주어도 된다.
/*zoomer 백그라운드 배경이미지 없애기*/
.zoomer{background-color:transparent; }
/* +,- 컨틀롤러 없애기 */
.zoomer .zoomer-controls{ display: none; }
위의 방법말고 javascript 에서도 할 수 있는데 이는 아래와 callback 옵션을 통해 아래와 같이 해주면된다.
var authCallback = false;
$(function() {
//이미지 확대 축소
$('.zoomer_basic').zoomer({
callback: function(){
if( authCallback === true){ return false; }
$('.zoomer').css({'background-color':'transparent'}).find('.zoomer-controls').hide();
authCallback = true;
}
});
});
위의 javascript 소스를 보면 authCallback 을 통해 실행제어를 해주었는데 이는 zoomer 에서 제공되는 callback 옵션이 로드 후 무한데로 실행되고 있어 제어를 해주었다.
만약 zoomer 사용 후 이미지를 변경하고 싶다면 아래와 같이 load 메서드를 호출 해주면 된다.
$('.zoomer_basic').zoomer('load','https://blog.redinfo.co.kr/public/Zoomer/tmp2.png');
마지막으로 zoomer 기능을 초기화 하고 싶다면 아래와 같이 destroy 메서드를 호출 해주면 된다.
/*zoomer 비우기*/
$('.zoomer_basic').zoomer('destroy');
참고로 위에서 사용된 Zoomer 라이브러리 로드시 js 파일과 css 파일은 임시로 올려둔 파일이기 때문에 반드시 공식 사이트에서 다운로드하여 연결이 필요하다
Comment