최종 수정일 :
(2년 전)
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) 값으로 지정되니 참고해주세요.
![[JS] Infinite Scroll 플러그인](https://wp.marshallku.com/wp-content/uploads/2020/03/infinite-scroll-400x400.png)