// Should allow caption to overlap the content preventCaptionOverlap: true,
// Should display navigation arrows at the screen edges arrows: true,
// Should display counter at the top left corner infobar: true,
// Should display close button (using `btnTpl.smallBtn` template) over the content // Can be true, false, "auto" // If "auto" - will be automatically enabled for "html", "inline" or "ajax" items smallBtn: "auto",
// Should display toolbar (buttons at the top) // Can be true, false, "auto" // If "auto" - will be automatically hidden if "smallBtn" is enabled toolbar: "auto",
// What buttons should appear in the top right corner. // Buttons will be created using templates from `btnTpl` option // and they will be placed into toolbar (class="fancybox-toolbar"` element) buttons: [ "zoom", //"share", "slideShow", //"fullScreen", //"download", "thumbs", "close" ],
// Detect "idle" time in seconds idleTime: 3,
// Disable right-click and use simple image protection for images protect: false,
// Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc modal: false,
image: { // Wait for images to load before displaying // true - wait for image to load and then display; // false - display thumbnail and load the full-sized image over top, // requires predefined image dimensions (`data-width` and `data-height` attributes) preload: false },
ajax: { // Object containing settings for ajax request settings: { // This helps to indicate that request comes from the modal // Feel free to change naming data: { fancybox: true } } },
// Preload iframe before displaying it // This allows to calculate iframe content width and height // (note: Due to "Same Origin Policy", you can't get cross domain data). preload: true,
// Custom CSS styling for iframe wrapping element // You can use this to set custom iframe dimensions css: {},
// Iframe tag attributes attr: { scrolling: "auto" } },
// For HTML5 video only video: { tpl: '<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' + '<source src="{{src}}" type="{{format}}" />' + 'Sorry, your browser doesn\'t support embedded videos, download and watch with your favorite video player!' + "</video>", format: "", // custom video format autoStart: true },
// Default content type if cannot be detected automatically defaultType: "image",
// Duration in ms for open/close animation animationDuration: 366,
// Should image change opacity while zooming // If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios zoomOpacity: "auto",
// This small close button will be appended to your html/inline/ajax content by default, // if "smallBtn" option is not set to false smallBtn: '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' + '<svg xmlns="https://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"/></svg>' + "</button>" },
// Container is injected into this element parentEl: "body",
// Hide browser vertical scrollbars; use at your own risk hideScrollbar: true,
// Focus handling // ==============
// Try to focus on the first focusable element after opening autoFocus: true,
// Put focus back to active element after closing backFocus: true,
// Do not let user to focus on element outside modal content trapFocus: true,
// Module specific options // =======================
fullScreen: { autoStart: false },
// Set `touch: false` to disable panning/swiping touch: { vertical: true, // Allow to drag content vertically momentum: true // Continue movement after releasing mouse/touch when panning },
// Hash value when initializing manually, // set `false` to disable hash change hash: null,
// Customize or add new media types // Example: /* media : { youtube : { params : { autoplay : 0 } } } */ media: {},
slideShow: { autoStart: false, speed: 3000 },
thumbs: { autoStart: false, // Display thumbnails on opening hideOnClose: true, // Hide thumbnail grid when closing animation starts parentEl: ".fancybox-container", // Container is injected into this element axis: "y" // Vertical (y) or horizontal (x) scrolling },
// Use mousewheel to navigate gallery // If 'auto' - enabled for images only wheel: "auto",
// Callbacks //==========
// See Documentation/API/Events for more information // Example: /* afterShow: function( instance, current ) { console.info( 'Clicked element:' ); console.info( current.opts.$orig ); } */
onInit: $.noop, // When instance has been initialized
beforeLoad: $.noop, // Before the content of a slide is being loaded afterLoad: $.noop, // When the content of a slide is done loading
beforeShow: $.noop, // Before open animation starts afterShow: $.noop, // When content is done loading and animating
beforeClose: $.noop, // Before the instance attempts to close. Return false to cancel the close. afterClose: $.noop, // After instance has been closed
onActivate: $.noop, // When instance is brought to front onDeactivate: $.noop, // When other instance has been activated
// Interaction // ===========
// Use options below to customize taken action when user clicks or double clicks on the fancyBox area, // each option can be string or method that returns value. // // Possible values: // "close" - close instance // "next" - move to next gallery item // "nextOrClose" - move to next gallery item or close if gallery has only one item // "toggleControls" - show/hide controls // "zoom" - zoom image (if loaded) // false - do nothing
// Clicked on the content clickContent: function(current, event) { return current.type === "image" ? "zoom" : false; },
// Clicked on the slide clickSlide: "close",
// Clicked on the background (backdrop) element; // if you have not changed the layout, then most likely you need to use `clickSlide` option clickOutside: "close",
// Same as previous two, but for double click dblclickContent: false, dblclickSlide: false, dblclickOutside: false,
// Custom options when mobile device is detected // =============================================
Гость написал: Можно ли сделать картинку в квадрат данным способом? Например, если картинка вертикальная, но не хватает полей слева и справа, то сделать их белыми.
По моему fancybox так не умеет. Надо в их документации посмотреть
Как вариант, еще можно использовать превью записи (показать в списке) и детальное изображение (открывать при клике). Но скорее всего в таком случае придется отказаться от webp (раньше битрикс не поддерживал), зато можно самостоятельно редактировать обе версии изображения, а для автоматизации использовать "Уменьшать изображение, если большое" и "Использовать детальную картинку"
