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. Examples:

js
// Close all instances
Fancybox.close();

// Zoom in on the image on the current slide
Fancybox.getCarousel()?.getPlugins()?.Zoomable?.execute("zoomIn");

To use instance methods, first retrieve a reference to the Fancybox instance. It will be returned using the API method Fancybox.show(), but you can also retrieve it from anywhere in the code.

js
const fancyboxRef = Fancybox.getInstance();

Or inside any callback:

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

Now you are ready to call any available instance method, example:

js
fancyboxRef.close();

Static Methods ​

bind ​

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

Parameters

selector?: string, userOptions?: Partial<FancyboxOptions>

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<FancyboxOptions>

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

FancyboxInstance | undefined

fromNodes ​

Start Fancybox using HTML elements

Parameters

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

Returns

FancyboxInstance | undefined

fromSelector ​

Start Fancybox using the previously assigned selector

Parameters

selector: string, options?: Partial<FancyboxOptions>

Returns

FancyboxInstance | undefined

fromSelector ​

Start Fancybox using the previously assigned selector for the given container

Parameters

container: HTMLElement | null, selector: string, options?: Partial<FancyboxOptions>

Returns

FancyboxInstance | undefined

getCarousel ​

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

Returns

CarouselInstance | undefined

getDefaults ​

Retrieve reference to the object containing the Fancybox default options

Returns

FancyboxOptions

getInstance ​

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

Parameters

id?: number | string

Returns

FancyboxInstance | undefined

getSlide ​

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

Returns

CarouselSlide | undefined

show ​

Create new Fancybox instance with provided options

Parameters

slides?: Partial<CarouselSlide>[], options?: Partial<FancyboxOptions>

Returns

FancyboxInstance

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

Instance Methods ​

close ​

Initiate closing

Parameters

event?: Event

Returns

void

destroy ​

Destroy the instance

Returns

void

getCarousel ​

Retrieve reference to the carousel instance

Returns

CarouselInstance | undefined

getContainer ​

Retrieve reference to the instance's main element

Returns

HTMLElement

getId ​

Retrieve instance ID

Returns

string | number

getOptions ​

Retrieve reference to an instance options object

Returns

FancyboxOptions

getPlugins ​

Retrieve an object containing instance plugin references

Returns

FancyboxPlugins

getSlide ​

Retrieve current carousel slide

Returns

CarouselSlide | undefined

getState ​

Retrieve current instance state

Returns

FancyboxState

init ​

Run instance initialization

Parameters

slides?: Partial<CarouselSlide>[], options?: Partial<FancyboxOptions>

Returns

FancyboxInstance

isCurrentSlide ​

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

Parameters

slide: CarouselSlide

Returns

boolean

isTopMost ​

Check if there is another instance on top of this one

Returns

boolean

off ​

Unsubscribe from specific event

Parameters

event: Event, callback: (...args: FancyboxEventArgs[Event]) => void

Returns

FancyboxInstance

on ​

Subscribe to specific event

Parameters

event: Event, callback: (...args: FancyboxEventArgs[Event]) => void

Returns

FancyboxInstance

toggleIdle ​

Toggle idle state

Parameters

force?: boolean

Returns

void