이미지 줌 라이브러리 제작일지

개발

이미지 줌 라이브러리 제작일지
최종 수정일:

Github
라이브 데모

일전에 블로그에 업데이트하고 굉장히 만족도가 높았던 이미지 줌 효과를 난생처음 npm 패키지로 만들어보고 있습니다.
그간 만든 것은 대부분 코드를 복사 붙여 넣기 해야 쓸 수 있었는데, 이젠 cdn 링크를 script로 추가하는 건 물론이고, npm i smooth-zoom으로 설치까지 할 수 있습니다.

webpack으로 빌드해보려다 계속 실패해서 일단 수동으로 작업해서 올려뒀는데, Rollup으로 갈아타거나 간단한 스크립트를 만들거나 해서 빌드 자동화도 해야 하고, 구형 브라우저 지원도 해야 하고, 아직 신경 쓸 게 많네요. 일단 IE11까진 지원해볼 생각입니다.
정리되는 대로 글도 조금 더 다듬어서 작성하도록 하겠습니다.

설치

npm install smooth-zoom
# or
yarn add smooth-zoom

사용법

<script src="node_modules/smooth-zoom/dist/zoom.min.js"></script>
<!-- or -->
<script src="https://cdn.jsdelivr.net/npm/smooth-zoom@latest/dist/zoom.min.js"></script>

설치 후 스크립트 태그를 추가하셔도 되고, 설치 없이 사용하시려면 jsdelivr 링크를 추가하시면 됩니다.

import Zoom from "smooth-zoom";

혹은 모듈로 가져오실 수도 있습니다.

Zoom(".zoomable");

그다음, CSS 셀렉터를 담아 호출해주시면 끝입니다.

옵션

Zoom(".zoomable", {
    originalizer: (src) => src.replace(/-[0-9]+\.jpg/, ".jpg"),
    background: "auto",
});

originalizer

background

Report an issue