Fancyapps

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.

js
// 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.

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

From anywhere in the code:

js
const fancybox = Fancybox.getInstance();

Inside any callback:

js
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:

js
fancybox.next();

Instance Methods ​

TIP

Keep in mind that instance methods will only work after Fancybox has been launched, for example, the user has clicked on a trigger element to launch Fancybox, or you have launched Fancybox via the API.

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