fancybox 옵션 정리

fancybox 옵션 정리

 

fancybox 버전 4에 대한 옵션을 정리해보았습니다.

 

Options

 

Fancybox 구성 요소의 핵심에 의해 설정되는 기본 옵션입니다.

// Change defaults
Fancybox.defaults.infinite = 0;

// Start Fancybox with custom options when user clicks on the matching element
Fancybox.bind("[data-fancybox]", {
  infinite: false,
});

// Immediately start Fancybox with custom options
Fancybox.show(
  [
    {
      src: "https://lipsum.app/id/98/800x600",
      type: "image",
    },
    {
      src: "https://lipsum.app/id/99/800x600",
      type: "image",
    },
  ],
  {
    infinite: false,
  }
);

 

startIndex {Number}

시작 시 활성 슬라이드의 인덱스를 바꿀 수 있다 기본값은 0

 

preload {Number}

활성 슬라이드 전후에 미리 로드할 슬라이드 수 기본값은 1

 

infinite {Boolean}

슬라이드를 무한반복으로 돌리냐는 옵션 기본값은 true

 

showClass {String|false}

펜시 박스가 열리는 클래스(모션)에 대한 옵션 기본값 fancybox-zoomInUp 

가능한 옵션 : fancybox-fadeIn, fancybox-zoomInUp or false.

 

hideClass {String|false}

펜시 박스가 닫히는 클래스(모션)에 대한 옵션 기본값 fancybox-fadeOut

가능한 옵션 : fancybox-fadeOut, fancybox-zoomOutDown or false.

 

animated {Boolean}

배경 및 UI 요소는 시작/닫을 때 페이드 인/아웃해야 합니다. 기본값 true

 

hideScrollbar {Boolean}

브라우저 스크롤바를 숨겨야 하는 경우 기본값 true

 

parentEl {HTMLElement|null}

기본값은 null이고 null인 상태이면 팬시 박스가 실행하면 바디에 맨 아래 자식으로

팬시 박스가 붙여진다는 얘기이고 다르게 지정할 수 있습니다.

 

mainClass {String|null}

Custom class name or multiple space-separated class names for the container. Default: null

 

trapFocus {Boolean}

Trap focus inside Fancybox. Default: true

 

placeFocusBack {Boolean}

Fancybox를 닫은 후 포커스를 다시 트리거 요소로 설정

 

click {String|function}

배경을 클릭하면 팬시 박스가 꺼지는 옵션 기본값 close

가능한 옵션 펜스 박스 닫기 또는 담으로 기타 등등 커스텀 가능하다.

 

dragToClose {Boolean}

콘텐츠를 위아래로 드래그하면 팬시 박스가 닫히게 된다. 기본값 true
가능한 옵션 ture, false

 

keyboard {Object|false}
Enable keyboard navigation. Default:
{
  Escape: "close",
  Delete: "close",
  Backspace: "close",
  PageUp: "next",
  PageDown: "prev",
  ArrowUp: "next",
  ArrowDown: "prev",
  ArrowRight: "next",
  ArrowLeft: "prev",
}

키보드로 팬시 박스를 제어하는 값입니다. 위에 값이 디폴트.

 

template {Object}

HTML templates for various elements. Default:

closeButton(Close button icon),
spinner(Loading indicator icon),

main(main container element)에 대한 대체 요소를 지정할 수 있습니다.

{
  // Close button icon
  closeButton:
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg>',
  // Loading indicator icon
  spinner:
      '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="25 25 50 50" tabindex="-1"><circle cx="50" cy="50" r="20"/></svg>',
  // Main container element
  main: null,
}

 

 

<div
  class="fancybox__container"
  role="dialog"
  aria-modal="true"
  aria-hidden="true"
  aria-label="{{MODAL}}"
  tabindex="-1"
>
  <div class="fancybox__backdrop"></div>
  <div class="fancybox__carousel"></div>
</div>

 

위에 코드가 기본값으로 지정된다.

 

groupAll {Boolean}

일치하는 요소들을 그룹화한다. 기본값 펄스

Example:

Fancybox.bind(
  'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]',
  {
    groupAll: true,
  }
);

 

groupAttr {String|false}

The name of the attribute used for grouping. Default: data-fancybox

아래와 같이 [data-fancybox="single"]로 지정하는 거는
fancybox를 여러 가지 버전을 만들 때 필요할 거 같다.
single에 대한 옵션을 따로 주고 싶을 때..? 사용할 거 같습니다.

Fancybox.bind('[data-fancybox="single"]', {
  groupAttr: false,
});

 

caption {Function|null}

팬시 박스를 실행했을 때 이미지 밑에 캡션을 추가하는 옵션이다.

 <a
    data-fancybox="gallery"
    href="https://lipsum.app/id/60/1600x1200"
    data-caption="First image"
  />

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    return (
      `${slide.index + 1} / ${carousel.slides.length} <br />` + slide.caption
    );
  },
});

데모 사이트 : https://fancyapps.com/playground/GQ

 

Carousel {Object}

기본 캐러셀에 대한 옵션을 확장하는 선택적 개체입니다. 예를 들어 사용자 정의하는 데 사용할 수 있습니다.

데모 https://fancyapps.com/playground/Vy