Skip to main content


The following are the default options set by the core of the Fancybox component.

startIndex {Number}#

Index of active slide on the start. Default: 0

preload {Number}#

Number of slides to preload before and after active slide. Default: 1

infinite {Boolean}#

Should navigation be infinite. Default: true

showClass {String|false}#

Class name to be applied to the content to reveal it. Default: fancybox-zoomInUp
Possible values: fancybox-fadeIn, fancybox-zoomInUp or false.

hideClass {String|false}#

Class name to be applied to the content to hide it. Default: fancybox-fadeOut
Possible values: fancybox-fadeOut, fancybox-zoomOutDown or false.

animated {Boolean}#

Should backdrop and UI elements fade in/out on start/close. Default: true

hideScrollbar {Boolean}#

If browser scrollbar should be hidden. Default: true

parentEl {HTMLElement|null}#

Element containing main structure. Default: null
Note: If no element is specified, the container will be added to the end of the list of children of document.body.

mainClass {String|null}#

Custom class name or multiple space-separated class names for the container. Default: null

autoFocus {Boolean}#

Set focus on first focusable element after displaying content. Default: true

trapFocus {Boolean}#

Trap focus inside Fancybox. Default: true

placeFocusBack {Boolean}#

Set focus back to trigger element after closing Fancybox. Default: true

click {String|function}#

Action to take when the user clicks on the backdrop. Default: close
Possible values: close, next or custom function.

closeButton {String}#

Position of the close button. Default: inside
Possible values: inside (over the content) or outside (at top right corner of viewport).

dragToClose {Boolean}#

Allow user to drag content up/down to close instance. Default: true

keyboard {Object|false}#

Enable keyboard navigation. Default:

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

Note: Use KeyboardEvent.code as object keys and any API instance method as value.

template {Object}#

HTML templates for various elements. Default:

{  // Close button icon  closeButton:      '<svg xmlns="" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg>',  // Loading indicator icon  spinner:      '<svg xmlns="" width="50" height="50" viewBox="25 25 50 50" tabindex="-1"><circle cx="50" cy="50" r="20"/></svg>',  // Main container element  main: null,}

Note: If the template.main option is not provided, the structure is generated as follows by default:

<div  class="fancybox__container"  role="dialog"  aria-modal="true"  aria-hidden="true"  aria-label="{{MODAL}}"  tabindex="-1">  <div class="fancybox__backdrop"></div>  <div class="fancybox__carousel"></div></div>

l10n {Object}#

Localization of strings. Default:

{  CLOSE: "Close",  NEXT: "Next",  PREV: "Previous",  MODAL: "You can close this modal content with the ESC key",  ERROR: "Something Went Wrong, Please Try Again Later",  IMAGE_ERROR: "Image Not Found",  ELEMENT_NOT_FOUND: "HTML Element Not Found",  AJAX_NOT_FOUND: "Error Loading AJAX : Not Found",  AJAX_FORBIDDEN: "Error Loading AJAX : Forbidden",  IFRAME_ERROR: "Error Loading Page",}

To change language:

  1. Create translation object, for example, import de from "@fancyapps/ui/src/Fancybox/l10n/de";
  2. Pass l10n: de as an option, or change defaults: Fancybox.defaults.l10n = de;.

groupAll {Boolean}#

Should all matching elements have to be grouped together in one group. Default: false


Fancybox.bind(  'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]',  {    groupAll: true,  });

groupAttr {String|false}#

The name of the attribute used for grouping. Default: data-fancybox

Example (to disable grouping):

Fancybox.bind('[data-fancybox="single"]', {  groupAttr: false,});

caption {Function|null}#

Optional function to customize caption content for each slide, example.