Skip to main content

Extensions

Learn about bundled add-ons, how to write and contribute your own, and browse others' third-party extensions.

Photoswipe

JavaScript image gallery for mobile and desktop

Name Version License Repository
PhotoSwipe 4.1.1 MIT https://github.com/dimsemenov/photoswipe

용어설명

Name Description
Gallery
  • photoswipe 가 출력 될때 각각의 개체(이미지 or html)들의 그룹을 의미한다.
  • data-extension="photoswipe" 속성이 표기된 container 단위

Contents

Usage

Extension Import

<link href="path/to/photoswipe.css" rel="stylesheet">
<link href="path/to/default-skin/default-skin.css" rel="stylesheet" >
<script src="path/to/rc-photoswipe.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>

Initialize

One way to initialize all photoSwipe on a page would be to select them by data-extension attribute:

$(function () {
  RC_initPhotoSwipe()
})

Markup

Below is a basic markup that list of links

<div class="my-gallery" data-extension="photoswipe">
  <figure class="figure">
    <a href="path/to/01-big.jpg" data-size="">
      <img src="path/to/01.jpg"  class="figure-img img-fluid">
    </a>
    <figcaption class="figure-caption">Image caption</figcaption>
  </figure>
  ...
</div>

Options

Name Type Default Description
pswp boolean true photoswipe 를 출력하는 전용 DOM 이며 자동생성하지 않을 경우 false 값으로 초기화 하면 된다.
items object null photoswipe 를 통해서 출력되는 각각의 이미지 혹은 다른 형태의 개채들을 배열. 스크립트 방식에서만 사용한다.
index number 0 오픈 시 최초에 보여지는 개체의 index.
showAnimationDuration number 333 오픈 시 에니메이션 지속시간.
hideAnimationDuration number 333 닫을 때 에니메이션 지속시간.
focus boolean true 오픈 시 focus 효과 여부.
bgOpacity number 1 오픈 시 Background Bg Opacity
spacing number 0.12 슬라이드 간격
loop boolean true 슬라이드 loop 여부
pinchToClose boolean true 슬라이드를 아래쪽으로 잡아당겼다 놓는 동작(Pinch) 으로 닫기를 허용할 것인지 여부.
history boolean true URL 에 history 를 적용할지 여부.

Methods

Name Description
galleryOpened.rc.photoswipe photoswipe 오픈 시 해당 gallery data-extension="photoswipe" 에 triggered 된 이벤트
galleryClosed.rc.photoswipe photoswipe 가 닫힐 때 해당 gallery data-extension="photoswipe" 에 triggered 된 이벤트
imageLoaded.rc.photoswipe photoswipe 내 image load 가 완료된 후 해당 gallery .pswp__container 에 trigged 된 이벤트.
slideChanged.rc.photoswipe 각 슬라이드가 변경(drag or 화살표 tap)될때 해당 슬라이드에 trigged 된 이벤트.

Examples

Script type

 <button id="btn" data-toggle="photoswipe">Open PhotoSwipe</button>
// build items array
var items = [{
    src: 'path/to/01_b.jpg',
    w: 964,
    h: 1024,
  }, {
    src: 'path/to/02_b.jpg',
    w: 1024,
    h: 683
  }
];

RC_initPhotoSwipe({
  items: items
});

Custom HTML Content in Slides

 <button id="btn" data-toggle="photoswipe">Open PhotoSwipe</button>
// build items array
var items = [{
    html: '<div class="hello-slide"><h1>Hello world example.com</h1></div>'
  }, {
    src: 'path/to/01_b.jpg',
    w: 1024,
    h: 683
  }
];

RC_initPhotoSwipe({
  items: items
});