Smooth Zoom

작업물

Smooth Zoom
최종 수정일:

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

👀 Demo
Github

설치

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) => `${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

Report an issue