Skip to main content

Lightbox

MSK Lightbox는 이미지와 미디어를 화면 위에서 크게 확인하는 primitive입니다. 성경 이야기 장면, 상품 이미지, 첨부 이미지처럼 원본 확인이 필요한 영역에서 사용합니다.

Preview​

Data API​

<a
  href="/images/story/john-2.jpg"
  data-msk-lightbox
  data-msk-lightbox-caption="요한복음 2장 이야기 장면"
>
  <img src="/images/story/john-2-thumb.jpg" alt="요한복음 2장 이야기 장면">
</a>

JavaScript API​

window.MSK.ui.lightbox.open('/images/story/john-2.jpg', {
  alt: '요한복음 2장 이야기 장면',
  caption: '요한복음 2장 이야기 장면',
});

window.MSK.ui.lightbox.close();

Rules​

  • caption과 alt는 text로만 렌더링합니다.
  • 이미지 클릭 확대는 project local 구현 대신 이 primitive를 사용합니다.
  • PDF, 영상 등은 추후 media adapter로 확장합니다.