Параметры Fancybox 4
FANCYBOX
Пример использования:
JS:
а) Запуск по 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
closeButton:
'<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
spinner:
'<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>
</div>
*/
- Localization of strings
l10n: en,
- Св-ва, применимые к изображению:
Image: {
// Disable animation from/to thumbnail on start/close
zoom: false,
- Center thumbnails only if draggable
- Настройка Toolbar
Instance Methods
- Пример использования:
Fancybox.close();
- Или из любой части кода:
Fancybox.getInstance().jumpTo(1);
close([event: ClickEvent]):
Start closing the current instance.
next():
Slide carousel to next page.
prev():
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.
destroy():
Immediately destroy all instances (without closing animation) and clean up all bindings.
Карусель:
Пример использования:
HTML:
<div class="carousel">
<div class="carousel__slide">1</div>
<div class="carousel__slide">2</div>
<div class="carousel__slide">3</div>
</div>
JS:
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
- 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
- Пример использования:
myCarousel.slideNext();
slideNext():
Slide to the next page.
slidePrev():
Slide to the previous page.
slideTo(page: Number[, params: Object]):
Slide to page by its index with optional parameters.
updatePage():
Perform all calculations and center current page.
destroy()
UPD: обновлено 08.06.2023
Еще нет своего сайта? Запустите интернет-магазин на платформе 5CMS - Все для продаж уже внутри!
-
Папка view предназначена для классов (контроллеров) которые работают с клиентской частью системы. Каждый отдельный класс работает с конкретными данными, которые отведены ему.
-
Расшифровка названий файлов шаблонов десктопного дизайна