Close fancybox with javascript

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: "
Lorem ipsum dolor sit amet.
",  type: "html",  >, ]); 

From anywhere in the code:

const fancybox = Fancybox.getInstance(); 

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

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

Instance Methods #

checkFocus #

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

clearContent #

Clear content for given slide

clearIdle #

close #

event?: Event, hideClass?: string | false

destroy #

endIdle #

focus #

Place focus on the first focusable element inside current slide

getSlide #

Retrieve current carousel slide

hideLoading #

Hide loading icon inside given slide

isClosing #

Check if the instance is being closed or already destroyed

isCurrentSlide #

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

isOpeningSlide #

Check if the given slide is opening slide

isTopmost #

Check if there is another instance on top of this one

jumpTo #

Slide carousel to page by its index with optional parameters

next #

Slide carousel to the next page

prev #

Slide carousel to the previous page

resetIdle #

setContent #

Set new content for the given slide

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

setError #

Show error message for given slide

slide: slideType, message: string

setIdle #

showLoading #

Show loading icon inside given slide

toggleFullscreen #

toggleIdle #

Static Methods #

bind #

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

selector: string, userOptions?: Partial

bind #

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

container: HTMLElement | null, selector: string, userOptions?: Partial

close #

Close all or topmost currently active instance

destroy #

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

fromEvent #

Start Fancybox using click event

fromNodes #

Start Fancybox using HTML elements

nodes: Array, options?: Partial

fromSelector #

Start Fancybox using the previously assigned selector

fromSelector #

Start Fancybox using the previously assigned selector for the given container

container: HTMLElement | null, selector: string

getInstance #

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

getSlide #

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

next #

Slide carousel of the current instance to the next page

prev #

Slide carousel of the current instance to the previous page

show #

Create new Fancybox instance with provided options

slides?: Array, options?: Partial

unbind #

Remove selector from the list of selectors that triggers Fancybox

unbind #

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

container: HTMLElement | null, selector?: string

Источник

Options #

Fancybox has many options that allow for easy customization. Several options accept a method and use a return value. This allows, for example, to set options like wheel depending on whether the user is using a touchpad mouse device.

Customize Declarative Usage #

Use the Fancybox.bind() method to launch Fancybox with custom options when the user clicks on the matching element.

Fancybox.bind('[data-fancybox="gallery"]',   hideScrollbar: false, >); 

If you’re having trouble setting the options, make sure the selector actually returns your elements, e.g. check the return value of document.querySelectorAll(your_selector) :

document.querySelectorAll('[data-fancybox="gallery"]'); 

Constructor Options #

You can pass a set of options as a second parameter into a Fancybox constructor.

new Fancybox( // Array containing gallery items  [ // Gallery item    src: "image-a.jpeg",  thumb: "thumbnail-a.jpeg",  >,  ], // Gallery options    hideScrollbar: false,  > ); 

Global Options #

You might want to set options that are common to all instances. Use Fancybox.defaults static property to change default options:

Fancybox.defaults.showClass = "f-scaleIn"; 

If you want to change several values at the same time:

Fancybox.defaults =  . Fancybox.defaults,  showClass: "f-scaleIn",  hideClass: "f-scaleOut", >; 

Available Options #

See the corresponding plugin page for additional customization options. For example, Images plugin for images, HTML plugin for HTML content, iframes, videos, etc.

animated #

Should backdrop and UI elements fade in/out on start/close

autoFocus #

Set focus on first focusable element after displaying content

backdropClick #

The action to perform when the user clicks on the backdrop

ClickAction | ((any?: any) => ClickAction | void) 

type ClickAction = | "toggleZoom" | "toggleCover" | "toggleMax" | "zoomToFit" | "zoomToMax" | "iterateZoom" | false | "close" | "next" | "prev"; 

caption #

| string | ((instance: Fancybox, slide: slideType, caption?: string) => string) 

Carousel #

Optional object to extend options for main Carousel

closeButton #

If true, a close button will be created above the content

commonCaption #

If true, only one caption element will be used for all slides

compact #

If compact mode needs to be activated

boolean | ((instance: Fancybox) => boolean)

() =>  window.matchMedia("(max-width: 578px) 

contentClick #

The action to perform when the user clicks on the content

ClickAction | ((any?: any) => ClickAction | void) 

type ClickAction = | "toggleZoom" | "toggleCover" | "toggleMax" | "zoomToFit" | "zoomToMax" | "iterateZoom" | false | "close" | "next" | "prev"; 

contentDblClick #

The action to take when the user double-clicks on the content

ClickAction | ((any?: any) => ClickAction | void) 

type ClickAction = | "toggleZoom" | "toggleCover" | "toggleMax" | "zoomToFit" | "zoomToMax" | "iterateZoom" | false | "close" | "next" | "prev"; 

defaultDisplay #

The default value of the CSS display property for hidden inline elements

defaultType #

"image" | "iframe" | "video" | "inline" | "html"; 

dragToClose #

Enable drag-to-close gesture — drag content up/down to close instance

Fullscreen #

If Fancybox should start in full-scren mode

groupAll #

If true, all matching elements will be grouped together in one group

groupAttr #

The name of the attribute used for grouping

height #

Change content height per slide

| "auto" | number | ((instance: Fancybox, slide: slideType) => "auto" | number) 

hideClass #

Class name to be applied to the content to hide it.
Note: If you disable image zoom, this class name will be used to run the image hide animation.

hideScrollbar #

If browser scrollbar should be hidden

id #

Custom id for the instance

idle #

Timeout in milliseconds after which to activate idle mode

keyboard #

 Escape: "close", Delete: "close", Backspace: "close", PageUp: "next", PageDown: "prev", ArrowUp: "prev", ArrowDown: "next", ArrowRight: "next", ArrowLeft: "prev", > 

l10n #

mainClass #

Custom class name for the container

on #

parentEl #

Element where container is appended
Note. If no element is specified, container is appended to the document.body

placeFocusBack #

Set focus back to trigger element after closing Fancybox

showClass #

Class name to be applied to the content to reveal it.
Note: If you disable image zoom, this class name will be used to run the image reveal animation.

src #

| string | HTMLElement | ((instance: Fancybox, slide: slideType) => string | HTMLElement) 

startIndex #

Index of active slide on the start

tpl #

HTML templates for various elements

 // Close button icon  closeButton?: string; // Main structure of Fancybox  main?: string; > 

 closeButton: '', main: `>" tabindex="-1">     `, > 

trapFocus #

Trap focus inside Fancybox

wheel #

Mouse wheel event listener

| "zoom" | "pan" | "close" | "slide" | false | (( instance: Fancybox, event: MouseEvent  ) => "zoom" | "pan" | "close" | "slide" | false) 

width #

Change content width per slide

| "auto" | number | ((instance: Fancybox, slide: slideType) => "auto" | number) 

Источник