Skip to main content

API

Initialization#

Fancybox an be launched via standard constructor interface:

const fancybox = new Fancybox([  {    src: "<p>Lorem ipsum dolor sit amet.</p>",    type: "html",  },]);

It is also possible to launch Fancybox using static method Fancybox.show():

const fancybox = Fancybox.show([  {    src: "https://lipsum.app/id/99/800x600",    type: "image",  },]);

If you wish to launch Fancybox when user clicks or taps on HTML elements, add default data-fancybox attribute or use API bind() method to attach click handler to the selected items, as well as all future matching elements. You will then be able to retrieve instance object from any event callback. Example:

<div id="gallery">  <a href="https://lipsum.app/id/1/800x600">    <img src="https://lipsum.app/id/1/300x225" />  </a>
  <a href="https://lipsum.app/id/2/800x600">    <img src="https://lipsum.app/id/2/300x225" />  </a></div>
<script>  Fancybox.bind("#gallery a", {    on : {      ready : (fancybox) => {        console.log(`fancybox #${fancybox.id} is ready!`);      }    }  });</script>

Instance methods are available after Fancybox's initialization.

const fancybox = new Fancybox([  {    src: "<h2>Hello, world</h2><p>Lorem lipsum</p>",    type: "html",  },  {    src: "https://lipsum.app/id/1/800x600",    type: "image",  },]);
// Methods usage examples:fancybox.next();fancybox.close();

Instance Methods#

close([event: ClickEvent]): void#

Start closing the current instance.

next(): void#

Slide carousel to next page.

prev(): void#

Slide carousel to previous page.

jumpTo([args: any]): void#

Slide carousel to selected page with optional parameters. Examples:

Fancybox.getInstance().jumpTo(2);Fancybox.getInstance().jumpTo(3, { friction: 0 });

getSlide(): Object|null#

Get the active slide. This will be the first slide from the current page of the main carousel.

focus([event: FocusEvent]): void#

Place focus on the first focusable element inside current slide.

hideScrollbar(): void#

Hide vertical page scrollbar and adjust body right padding value to prevent content from shifting
(otherwise the body element may become wider and the content may expand horizontally).

revealScrollbar(): void#

Stop hiding vertical page scrollbar.

clearContent(slide: Object): void#

Remove content for given slide.

setContent(slide: Object, html: HTMLElement|String[, options: Object]): void#

Set new content for given slide.

showLoading(slide: Object): void#

Create loading indicator inside given slide.

hideLoading(slide: Object): void#

Remove loading indicator from given slide.

Static Methods#

bind(selector: String[, options: Object]): void#

Attach a click handler function that starts Fancybox to the selected items, as well as to all future matching elements.

unbind(selector: String): void#

Remove the click handler that was attached with bind()

show(items: Object[, options: Object]): Fancybox#

Create new Fancybox instance with provided options.

getInstance([id: String|Numeric]): Fancybox|null#

Retrieve instance by identifier or the top most instance, if identifier is not provided.

close([all: Boolean]): void#

Close all or topmost currently active instance.

destroy(): void#

Immediately destroy all instances (without closing animation) and clean up all bindings.