Smooth Zoom

Medium이나 Google Photos처럼 이미지를 부드럽게 확대할 수 있게 하는 가벼운 자바스크립트 라이브러리입니다.

설치

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

브라우저 버전을 사용하시려면 건너뛰셔도 됩니다.

사용

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

브라우저 버전을 사용하시려면 위 cdn 링크를, npm 패키지를 설치하셨다면 아래 링크를 사용하실 수 있습니다.

브라우저 버전을 사용할 때 latest 버전을 불러오시면 업데이트가 한참 진행 중일 땐 최신 버전이 유지되지 않을 수 있습니다.
npmjs에서 최신 버전을 확인하셔서 latest 대신 해당 버전 명을 넣으셔도 됩니다.

import Zoom from "smooth-zoom";

모듈로 가져오는 방법도 있습니다.

Zoom(".zoomable");

그 뒤 CSS 셀렉터를 넘기며 호출하시면 됩니다.
추후 React 등에서도 편하게 사용하실 수 있게 element를 넘기는 방법 등도 업데이트하도록 하겠습니다.

옵션

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

originalizer

타입 : (src: string) => string
기본값 : (src) => src
설명 : image-768x768.jpg를 image.jpg로 바꾸듯 이미지의 주소를 원본 주소로 바꾸기 위한 함수입니다.

(src) => `${src.replace(/\/(R|C)[0-9]+x[0-9]+\//, "R0x0")}?original`

티스토리 예제

(src) => src.replace(/-[0-9]+x[0-9]+/, "")

워드프레스 예제

(src) => src.replace(/=w[0-9]+/, "=w0")

Google Photos 예제

background

타입 : string
기본값 : rgb(0, 0, 0)
설명 : 이미지가 줌 인 되었을 때 배경에 나타나는 색상입니다. "auto"를 사용하시면 자동으로 이미지의 평균 색상으로 지정됩니다. CORS 설정이 되지 않은 외부 이미지는 기본값인 rgb(0, 0, 0) 값으로 지정되니 참고해주세요.