pencere

모던하고 접근성을 갖춘 프레임워크 독립적인 이미지 라이트박스 — 순수 TypeScript, 런타임 의존성 0개, ESM.

MIT zero deps pure ESM WCAG 2.2 AA CDN Demo

라이브 갤러리 데모

썸네일을 클릭하면 뷰어가 열립니다. ← / → 로 이미지 이동, + / - / 0 으로 줌, Esc 로 닫기. 이미지를 더블클릭하면 2배 줌.

키보드 단축키

키	동작
`Esc`	뷰어 닫기
`←` / `PageUp`	이전 이미지
`→` / `PageDown`	다음 이미지
`Home` / `End`	처음 / 마지막으로 이동
`+` / `-`	1.25배 줌 인 / 아웃
`0`	줌 초기화

추가 기능 데모

RTL(오른쪽→왼쪽) 방향 전환

현재: ltr

해시 딥링크 (#p3 열기)

썸네일 → 라이트박스 모프 전환 (View Transition)

아래 이미지를 클릭하면 자연스러운 모프 애니메이션이 재생됩니다 (Chrome/Edge/Safari TP).

전체화면 모드

선언적 HTML 바인딩 (bindPencere)

아래 썸네일은 data-pencere 속성만으로 동작합니다.

동영상 / iframe / 커스텀 렌더러

플레이스홀더 크로스페이드

CDN 사용법

<!-- importmap으로 pencere 패키지 등록 -->
<script type="importmap">
{
  "imports": {
    "pencere": "https://cdn.jsdelivr.net/npm/pencere@0.3.0/dist/index.mjs"
  }
}
</script>

<!-- ESM으로 import -->
<script type="module">
  import { PencereViewer } from "pencere"

  const viewer = new PencereViewer({
    items: [
      { type: "image", src: "/a.jpg", alt: "이미지", width: 1600, height: 1067 },
    ],
    loop: true,
  })

  document.querySelector("#open").addEventListener("click", () => {
    viewer.open(0)
  })
</script>