Параметры Fancybox 4


Пример использования:


а) Запуск по id блока:

Fancybox.show([{src: #modal}], { mainClass: "standart_modal", Toolbar: false, closeButton: false, Image: {zoom:false,click:"close",wheel:"close",} });

б) Привязка к клику по элементу:

Fancybox.bind(".zoom,#gallerypic .image", { mainClass: "standart_modal", Image: { zoom: false, click: "close", wheel: "slide" } });


  • Index of active slide on the start

startIndex: 0,

  • Number of slides to preload before and after active slide

preload: 1,

  • Should navigation be infinite

infinite: true,

  • Class name to be applied to the content to reveal it

showClass: "fancybox-zoomInUp", // "fancybox-fadeIn" | "fancybox-zoomInUp" | false

  • Class name to be applied to the content to hide it

hideClass: "fancybox-fadeOut", // "fancybox-fadeOut" | "fancybox-zoomOutDown" | false

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

animated: true,

  • If browser scrollbar should be hidden

hideScrollbar: true,

  • Element containing main structure

parentEl: null,

  • Custom class name or multiple space-separated class names for the container

mainClass: null,

  • Set focus on first focusable element after displaying content

autoFocus: true,

  • Trap focus inside Fancybox

trapFocus: true,

  • Set focus back to trigger element after closing Fancybox

placeFocusBack: true,

  • Action to take when the user clicks on the backdrop

click: "close", // "close" | "next" | null

  • Position of the close button - over the content or at top right corner of viewport

closeButton: "inside", // "inside" | "outside"

  • Allow user to drag content up/down to close instance

dragToClose: true,

  • Enable keyboard navigation

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

  • HTML templates for various elements

template: {
  // Close button icon
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg>',
  // Loading indicator icon
  '<svg xmlns="http://www.w3.org/2000/svg" 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>

  • Localization of strings

l10n: en,

  • Св-ва, применимые к изображению:

Image: {
  // Disable animation from/to thumbnail on start/close
  zoom: false,

  // Disable zoom on scroll event 
  wheel: false, // slide

  // Disable zoom on image click
  click: false, // close

  // Fit image horizontally only
  fit: "contain-w", | cover
  • Center thumbnails only if draggable
Thumbs: {
   minScreenHeight: 0,
   Carousel: {
      center: function () {
         return this.elemDimWidth > this.wrapDimWidth;
  • Настройка Toolbar
Toolbar: { display: [ { id: "prev", position: "center" }, { id: "counter", position: "center" }, { id: "next", position: "center" }, "zoom", "slideshow", "fullscreen", "download", "thumbs", "close", ], },

Instance Methods

  • Пример использования:


  • Или из любой части кода:


close([event: ClickEvent]): 
Start closing the current instance.

Slide carousel to next page.

Slide carousel to previous page.

jumpTo([args: any]): 
Slide carousel to selected page with optional parameters. Examples:

Fancybox.getInstance().jumpTo(2);Fancybox.getInstance().jumpTo(3, { friction: 0 });

getSlide(): Object|null
Get the active slide. This will be the first slide from the current page of the main carousel.

focus([event: FocusEvent]): 

Place focus on the first focusable element inside current slide.

hideScrollbar(): void

Hide vertical page scrollbar and adjust body right padding value to prevent content from shifting
(otherwise the body element may become wider and the content may expand horizontally).

revealScrollbar(): void

Stop hiding vertical page scrollbar.

clearContent(slide: Object): void

Remove content for given slide.

setContent(slide: Object, html: HTMLElement|String[, options: Object]): void

Set new content for given slide.

showLoading(slide: Object): void

Create loading indicator inside given slide.

hideLoading(slide: Object): void

Remove loading indicator from given slide.

Static Methods

bind(selector: String[, options: Object]): 

Attach a click handler function that starts Fancybox to the selected items, as well as to all future matching elements.

unbind(selector: String):

Remove the click handler that was attached with bind()

show(items: Array[, options: Object]): Fancybox

Create new Fancybox instance with provided options.

getInstance([id: String|Numeric]): Fancybox|null

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

close([all: Boolean]): 

Close all or topmost currently active instance.


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


Пример использования:


<div class="carousel">
  <div class="carousel__slide">1</div>
  <div class="carousel__slide">2</div>
  <div class="carousel__slide">3</div>


const mainCarousel = new Carousel(document.querySelector(".carousel"), { Dots: false, // Опции });


  • Number of slides to preload before/after visible slides

preload: 0,

  • Number of slides to group into the page, if `auto` - group all slides that fit into the viewport

slidesPerPage: "auto",

  • Index of initial page

initialPage: null,

  • Index of initial slide

initialSlide: null,

  • Скорость смены слайдов

friction: 0.92,  | от 0 до 0.99

  • Отключение анимации смены слайдов

friction: 0,

  • Disable touch guestures
Panzoom: {
  touch: false,
  • Should center active page

center: true,

  • Should carousel scroll infinitely

infinite: true,

  • Should the gap be filled before first and after last slide if `infinite: false`

fill: true,

  • Should Carousel settle at any position after a swipe.

dragFree: false,

  • Prefix for CSS classes, must be the same as the SCSS `$carousel-prefix` variable

prefix: "",

  • Class names for DOM elements (without prefix)

classNames: {
  viewport: "carousel__viewport",
  track: "carousel__track",
  slide: "carousel__slide",

  //Classname toggled for slides inside current page
  slideSelected: "is-selected",

  • Localization of strings

l10n: en,

  • Скрытие кнопок навигации

Navigation: false,

  • Точки навигации

Dots: true,

  • Элементов на слайд

slidesToSlide: 2,

Instance Methods

  • Пример использования:



Slide to the next page.


Slide to the previous page.

slideTo(page: Number[, params: Object]): 

Slide to page by its index with optional parameters.


Perform all calculations and center current page.


Теги: Настройки библиотеки Fancybox 4.0.6.

UPD: обновлено 10.08.2022

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать