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

itemSelector?: 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, itemSelector: string, userOptions?: Partial<FancyboxOptions>

Returns

void

bind ​

Add a click handler that launches Fancybox after clicking items that match the provided selector and are inside a matching group

Parameters

groupSelector: string, itemSelector: 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 and are inside a matching group

Parameters

container: HTMLElement | null, groupSelector: string, itemSelector: 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

itemSelector: string, userOptions?: Partial<FancyboxOptions>

Returns

FancyboxInstance | undefined

fromSelector ​

Start Fancybox using the previously assigned selector for the given container

Parameters

container: HTMLElement | null, itemSelector: string, userOptions?: Partial<FancyboxOptions>

Returns

FancyboxInstance | undefined

fromSelector ​

Start Fancybox using the previously assigned selector and located in a container matching groupSelector

Parameters

groupSelector: string, itemSelector: string, userOptions?: Partial<FancyboxOptions>

Returns

FancyboxInstance | undefined

fromSelector ​

Start Fancybox using the previously assigned selector and located in a container matching groupSelector

Parameters

container: HTMLElement | null, groupSelector: string, itemSelector: string, userOptions?: Partial<FancyboxOptions>

Returns

FancyboxInstance | undefined

fromTriggerEl ​

Start Fancybox using an element that matches the previously assigned selector

Parameters

triggerEl: HTMLElement, userOptions?: 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 | undefined

unbind ​

Remove selector from the list of selectors that triggers Fancybox

Parameters

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

unbind ​

Remove the click handler that launches Fancybox after clicking items that match the provided selector and are inside a matching group

Parameters

groupSelector: string, itemSelector: string

Returns

void

unbind ​

Remove the click handler that launches Fancybox after clicking items that match the provided selector and are inside a matching group in the given container

Parameters

container: HTMLElement | null, groupSelector: string, itemSelector: string

Returns

void

Instance Methods ​

close ​

Initiate closing

Parameters

ev?: Event, customHideClass?: string

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

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

Partial<FancyboxPlugins>

getSlide ​

Retrieve current carousel slide

Returns

CarouselSlide | undefined

getState ​

Retrieve current instance state

Returns

FancyboxState

init ​

Run instance initialization

Parameters

userSlides?: Partial<CarouselSlide>[], userOptions?: Partial<FancyboxOptions>

Returns

FancyboxInstance | undefined

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

localize ​

Translate text with current language strings

Parameters

str: string, params?: Array<[string, any]>

Returns

string

off ​

Unsubscribe from specific event

Parameters

event: FancyboxEvent, callback: (api: any, ...args: FancyboxEventArgs[FancyboxEvent]) => void

Returns

FancyboxInstance

on ​

Subscribe to specific event

Parameters

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

Returns

FancyboxInstance

toggleIdle ​

Toggle idle state

Parameters

force?: boolean

Returns

void