Methods #

Fancybox supports multiple instances and provides both static and instance methods for your convenience.

Static methods can be used from anywhere in the code.

// Close all instances
Fancybox.close();

// Zoom in on the image on the current slide
Fancybox.getSlide()?.panzoom.zoomIn();

To use instance methods, first retrieve a reference to the Fancybox instance.

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

From anywhere in the code:

const fancybox = Fancybox.getInstance();

Inside any callback:

Fancybox.bind("[data-fancybox]", {
  on: {
    done: (fancybox) => {
      // here `fancybox` refers to the current instance
    },
  },
});

Now you are ready to call any available instance method as shown below:

fancybox.next();

Instance Methods #

checkFocus #

Make sure the element, that has the focus, is inside the container

Parameters

event?: FocusEvent

Returns

void

clearContent #

Clear content for given slide

Parameters

slide: slideType

Returns

void

clearIdle #

Clear idle state timer

Returns

void

close #

Initiate closing

Parameters

event?: Event, hideClass?: string | false

Returns

void

destroy #

Destroy the instance

Returns

void

endIdle #

Deactivate idle state

Returns

void

focus #

Place focus on the first focusable element inside current slide

Parameters

event?: FocusEvent

Returns

void

getSlide #

Retrieve current carousel slide

Returns

slideType | undefined

hideLoading #

Hide loading icon inside given slide

Parameters

slide: slideType

Returns

void

isClosing #

Check if the instance is being closed or already destroyed

Returns

boolean

isCurrentSlide #

Check if the given slide is the current slide in the carousel

Parameters

slide: slideType

Returns

boolean

isOpeningSlide #

Check if the given slide is opening slide

Parameters

slide: slideType

Returns

boolean

isTopmost #

Check if there is another instance on top of this one

Returns

boolean

jumpTo #

Slide carousel to page by its index with optional parameters

Parameters

...args: any

Returns

void

next #

Slide carousel to the next page

Returns

void

prev #

Slide carousel to the previous page

Returns

void

resetIdle #

Reset idle state timer

Returns

void

setContent #

Set new content for the given slide

Parameters

slide: slideType, html?: string | HTMLElement, shouldReveal?: boolean

Returns

void

setError #

Show error message for given slide

Parameters

slide: slideType, message: string

Returns

void

setIdle #

Activate idle state

Parameters

now?: boolean

Returns

void

showLoading #

Show loading icon inside given slide

Parameters

slide: slideType

Returns

void

toggleFullscreen #

Toggle full-screen mode

Returns

void

toggleIdle #

Toggle idle state

Returns

void

Static Methods #

bind #

Add a click handler that launches Fancybox after clicking on items that match the provided selector

Parameters

selector: string, userOptions?: Partial<OptionsType>

Returns

void

bind #

Add a click handler to the given container that launches Fancybox after clicking items that match the provided selector

Parameters

container: HTMLElement | null, selector: string, userOptions?: Partial<OptionsType>

Returns

void

close #

Close all or topmost currently active instance

Parameters

all?: boolean, ...args: any

Returns

void

destroy #

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

Returns

void

fromEvent #

Start Fancybox using click event

Parameters

event: MouseEvent

Returns

Fancybox

fromNodes #

Start Fancybox using HTML elements

Parameters

nodes: Array<HTMLElement>, options?: Partial<OptionsType>

Returns

Fancybox

fromSelector #

Start Fancybox using the previously assigned selector

Parameters

selector: string

Returns

void

fromSelector #

Start Fancybox using the previously assigned selector for the given container

Parameters

container: HTMLElement | null, selector: string

Returns

void

getInstance #

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

Parameters

id?: number

Returns

Fancybox | null

getSlide #

Retrieve reference to the current slide of the highest active Fancybox instance

Returns

slideType | null

next #

Slide carousel of the current instance to the next page

Returns

void

prev #

Slide carousel of the current instance to the previous page

Returns

void

show #

Create new Fancybox instance with provided options

Parameters

slides?: Array<userSlideType>, options?: Partial<OptionsType>

Returns

Fancybox

unbind #

Remove selector from the list of selectors that triggers Fancybox

Parameters

selector: string

Returns

void

unbind #

Remove all or one selector from the list of selectors that triggers Fancybox for the given container

Parameters

container: HTMLElement | null, selector?: string

Returns

void