1 // ==================================================
4 // Licensed GPLv3 for open source use
5 // or fancyBox Commercial License for commercial use
7 // http://fancyapps.com/fancybox/
8 // Copyright 2019 fancyApps
10 // ==================================================
11 (function (window, document, $, undefined) {
14 window.console = window.console || {
15 info: function (stuff) {}
18 // If there's no jQuery, fancyBox can't work
19 // =========================================
25 // Check if fancyBox is already initialized
26 // ========================================
29 console.info("fancyBox already initialized");
34 // Private default settings
35 // ========================
38 // Close existing modals
39 // Set this to false if you do not need to stack multiple instances
42 // Enable infinite gallery navigation
45 // Horizontal space between slides
48 // Enable keyboard navigation
51 // Should allow caption to overlap the content
52 preventCaptionOverlap: true,
54 // Should display navigation arrows at the screen edges
57 // Should display counter at the top left corner
60 // Should display close button (using `btnTpl.smallBtn` template) over the content
61 // Can be true, false, "auto"
62 // If "auto" - will be automatically enabled for "html", "inline" or "ajax" items
65 // Should display toolbar (buttons at the top)
66 // Can be true, false, "auto"
67 // If "auto" - will be automatically hidden if "smallBtn" is enabled
70 // What buttons should appear in the top right corner.
71 // Buttons will be created using templates from `btnTpl` option
72 // and they will be placed into toolbar (class="fancybox-toolbar"` element)
83 // Detect "idle" time in seconds
86 // Disable right-click and use simple image protection for images
89 // Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
93 // Wait for images to load before displaying
94 // true - wait for image to load and then display;
95 // false - display thumbnail and load the full-sized image over top,
96 // requires predefined image dimensions (`data-width` and `data-height` attributes)
101 // Object containing settings for ajax request
103 // This helps to indicate that request comes from the modal
104 // Feel free to change naming
113 tpl: '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" src=""></iframe>',
115 // Preload iframe before displaying it
116 // This allows to calculate iframe content width and height
117 // (note: Due to "Same Origin Policy", you can't get cross domain data).
120 // Custom CSS styling for iframe wrapping element
121 // You can use this to set custom iframe dimensions
124 // Iframe tag attributes
130 // For HTML5 video only
132 tpl: '<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' +
133 '<source src="{{src}}" type="{{format}}" />' +
134 'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!' +
136 format: "", // custom video format
140 // Default content type if cannot be detected automatically
141 defaultType: "image",
143 // Open/close animation type
146 // "zoom" - zoom images from/to thumbnail
150 animationEffect: "zoom",
152 // Duration in ms for open/close animation
153 animationDuration: 366,
155 // Should image change opacity while zooming
156 // If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios
159 // Transition effect between slides
170 transitionEffect: "fade",
172 // Duration in ms for transition animation
173 transitionDuration: 366,
175 // Custom CSS class for slide element
178 // Custom CSS class for layout
181 // Base template for layout
182 baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
183 '<div class="fancybox-bg"></div>' +
184 '<div class="fancybox-inner">' +
185 '<div class="fancybox-infobar"><span data-fancybox-index></span> / <span data-fancybox-count></span></div>' +
186 '<div class="fancybox-toolbar">{{buttons}}</div>' +
187 '<div class="fancybox-navigation">{{arrows}}</div>' +
188 '<div class="fancybox-stage"></div>' +
189 '<div class="fancybox-caption"><div class="fancybox-caption__body"></div></div>' +
193 // Loading indicator template
194 spinnerTpl: '<div class="fancybox-loading"></div>',
196 // Error message template
197 errorTpl: '<div class="fancybox-error"><p>{{ERROR}}</p></div>',
200 download: '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
201 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"/></svg>' +
204 zoom: '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
205 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 17.3l-3-3a5.9 5.9 0 0 0-.6-7.6 5.9 5.9 0 0 0-8.4 0 5.9 5.9 0 0 0 0 8.4 5.9 5.9 0 0 0 7.7.7l3 3a1 1 0 0 0 1.3 0c.4-.5.4-1 0-1.5zM8.1 13.8a4 4 0 0 1 0-5.7 4 4 0 0 1 5.7 0 4 4 0 0 1 0 5.7 4 4 0 0 1-5.7 0z"/></svg>' +
208 close: '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
209 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"/></svg>' +
213 arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
214 '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.28 15.7l-1.34 1.37L5 12l4.94-5.07 1.34 1.38-2.68 2.72H19v1.94H8.6z"/></svg></div>' +
217 arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
218 '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 12.97l-2.68 2.72 1.34 1.38L19 12l-4.94-5.07-1.34 1.38 2.68 2.72H5v1.94z"/></svg></div>' +
221 // This small close button will be appended to your html/inline/ajax content by default,
222 // if "smallBtn" option is not set to false
223 smallBtn: '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
224 '<svg xmlns="http://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>' +
228 // Container is injected into this element
231 // Hide browser vertical scrollbars; use at your own risk
237 // Try to focus on the first focusable element after opening
240 // Put focus back to active element after closing
243 // Do not let user to focus on element outside modal content
246 // Module specific options
247 // =======================
253 // Set `touch: false` to disable panning/swiping
255 vertical: true, // Allow to drag content vertically
256 momentum: true // Continue movement after releasing mouse/touch when panning
259 // Hash value when initializing manually,
260 // set `false` to disable hash change
263 // Customize or add new media types
282 autoStart: false, // Display thumbnails on opening
283 hideOnClose: true, // Hide thumbnail grid when closing animation starts
284 parentEl: ".fancybox-container", // Container is injected into this element
285 axis: "y" // Vertical (y) or horizontal (x) scrolling
288 // Use mousewheel to navigate gallery
289 // If 'auto' - enabled for images only
295 // See Documentation/API/Events for more information
298 afterShow: function( instance, current ) {
299 console.info( 'Clicked element:' );
300 console.info( current.opts.$orig );
304 onInit: $.noop, // When instance has been initialized
306 beforeLoad: $.noop, // Before the content of a slide is being loaded
307 afterLoad: $.noop, // When the content of a slide is done loading
309 beforeShow: $.noop, // Before open animation starts
310 afterShow: $.noop, // When content is done loading and animating
312 beforeClose: $.noop, // Before the instance attempts to close. Return false to cancel the close.
313 afterClose: $.noop, // After instance has been closed
315 onActivate: $.noop, // When instance is brought to front
316 onDeactivate: $.noop, // When other instance has been activated
321 // Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
322 // each option can be string or method that returns value.
325 // "close" - close instance
326 // "next" - move to next gallery item
327 // "nextOrClose" - move to next gallery item or close if gallery has only one item
328 // "toggleControls" - show/hide controls
329 // "zoom" - zoom image (if loaded)
330 // false - do nothing
332 // Clicked on the content
333 clickContent: function (current, event) {
334 return current.type === "image" ? "zoom" : false;
337 // Clicked on the slide
340 // Clicked on the background (backdrop) element;
341 // if you have not changed the layout, then most likely you need to use `clickSlide` option
342 clickOutside: "close",
344 // Same as previous two, but for double click
345 dblclickContent: false,
346 dblclickSlide: false,
347 dblclickOutside: false,
349 // Custom options when mobile device is detected
350 // =============================================
353 preventCaptionOverlap: false,
355 clickContent: function (current, event) {
356 return current.type === "image" ? "toggleControls" : false;
358 clickSlide: function (current, event) {
359 return current.type === "image" ? "toggleControls" : "close";
361 dblclickContent: function (current, event) {
362 return current.type === "image" ? "zoom" : false;
364 dblclickSlide: function (current, event) {
365 return current.type === "image" ? "zoom" : false;
369 // Internationalization
370 // ====================
378 ERROR: "The requested content cannot be loaded. <br/> Please try again later.",
379 PLAY_START: "Start slideshow",
380 PLAY_STOP: "Pause slideshow",
381 FULL_SCREEN: "Full screen",
382 THUMBS: "Thumbnails",
383 DOWNLOAD: "Download",
388 CLOSE: "Schließen",
391 ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.",
392 PLAY_START: "Diaschau starten",
393 PLAY_STOP: "Diaschau beenden",
394 FULL_SCREEN: "Vollbild",
395 THUMBS: "Vorschaubilder",
396 DOWNLOAD: "Herunterladen",
398 ZOOM: "Vergrößern"
403 // Few useful variables and methods
404 // ================================
407 var $D = $(document);
411 // Check if an object is a jQuery object and not a native JavaScript object
412 // ========================================================================
413 var isQuery = function (obj) {
414 return obj && obj.hasOwnProperty && obj instanceof $;
417 // Handle multiple browsers for "requestAnimationFrame" and "cancelAnimationFrame"
418 // ===============================================================================
419 var requestAFrame = (function () {
421 window.requestAnimationFrame ||
422 window.webkitRequestAnimationFrame ||
423 window.mozRequestAnimationFrame ||
424 window.oRequestAnimationFrame ||
425 // if all else fails, use setTimeout
426 function (callback) {
427 return window.setTimeout(callback, 1000 / 60);
432 var cancelAFrame = (function () {
434 window.cancelAnimationFrame ||
435 window.webkitCancelAnimationFrame ||
436 window.mozCancelAnimationFrame ||
437 window.oCancelAnimationFrame ||
439 window.clearTimeout(id);
444 // Detect the supported transition-end event property name
445 // =======================================================
446 var transitionEnd = (function () {
447 var el = document.createElement("fakeelement"),
451 transition: "transitionend",
452 OTransition: "oTransitionEnd",
453 MozTransition: "transitionend",
454 WebkitTransition: "webkitTransitionEnd"
457 for (t in transitions) {
458 if (el.style[t] !== undefined) {
459 return transitions[t];
463 return "transitionend";
466 // Force redraw on an element.
467 // This helps in cases where the browser doesn't redraw an updated element properly
468 // ================================================================================
469 var forceRedraw = function ($el) {
470 return $el && $el.length && $el[0].offsetHeight;
473 // Exclude array (`buttons`) options from deep merging
474 // ===================================================
475 var mergeOpts = function (opts1, opts2) {
476 var rez = $.extend(true, {}, opts1, opts2);
478 $.each(opts2, function (key, value) {
479 if ($.isArray(value)) {
487 // How much of an element is visible in viewport
488 // =============================================
490 var inViewport = function (elem) {
493 if (!elem || elem.ownerDocument !== document) {
497 $(".fancybox-container").css("pointer-events", "none");
500 x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
501 y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
504 rez = document.elementFromPoint(elemCenter.x, elemCenter.y) === elem;
506 $(".fancybox-container").css("pointer-events", "");
514 var FancyBox = function (content, opts, index) {
517 self.opts = mergeOpts({
519 }, $.fancybox.defaults);
521 if ($.isPlainObject(opts)) {
522 self.opts = mergeOpts(self.opts, opts);
525 if ($.fancybox.isMobile) {
526 self.opts = mergeOpts(self.opts, self.opts.mobile);
529 self.id = self.opts.id || ++called;
531 self.currIndex = parseInt(self.opts.index, 10) || 0;
532 self.prevIndex = null;
537 self.firstRun = true;
542 // Existing slides (for current, next and previous gallery items)
545 // Create group elements
546 self.addContent(content);
548 if (!self.group.length) {
555 $.extend(FancyBox.prototype, {
556 // Create DOM structure
557 // ====================
561 firstItem = self.group[self.currIndex],
562 firstItemOpts = firstItem.opts,
566 if (firstItemOpts.closeExisting) {
567 $.fancybox.close(true);
573 $("body").addClass("fancybox-active");
576 !$.fancybox.getInstance() &&
577 firstItemOpts.hideScrollbar !== false &&
578 !$.fancybox.isMobile &&
579 document.body.scrollHeight > window.innerHeight
582 '<style id="fancybox-style-noscroll" type="text/css">.compensate-for-scrollbar{margin-right:' +
583 (window.innerWidth - document.documentElement.clientWidth) +
587 $("body").addClass("compensate-for-scrollbar");
590 // Build html markup and set references
591 // ====================================
593 // Build html code for buttons and insert into main template
596 $.each(firstItemOpts.buttons, function (index, value) {
597 buttonStr += firstItemOpts.btnTpl[value] || "";
600 // Create markup from base template, it will be initially hidden to
601 // avoid unnecessary work like painting while initializing is not complete
605 firstItemOpts.baseTpl
606 .replace("{{buttons}}", buttonStr)
607 .replace("{{arrows}}", firstItemOpts.btnTpl.arrowLeft + firstItemOpts.btnTpl.arrowRight)
610 .attr("id", "fancybox-container-" + self.id)
611 .addClass(firstItemOpts.baseClass)
612 .data("FancyBox", self)
613 .appendTo(firstItemOpts.parentEl);
615 // Create object holding references to jQuery wrapped nodes
617 container: $container
620 ["bg", "inner", "infobar", "toolbar", "stage", "caption", "navigation"].forEach(function (item) {
621 self.$refs[item] = $container.find(".fancybox-" + item);
624 self.trigger("onInit");
626 // Enable events, deactive previous instances
629 // Build slides, load and reveal content
630 self.jumpTo(self.currIndex);
633 // Simple i18n support - replaces object keys found in template
634 // with corresponding values
635 // ============================================================
637 translate: function (obj, str) {
638 var arr = obj.opts.i18n[obj.opts.lang] || obj.opts.i18n.en;
640 return str.replace(/\{\{(\w+)\}\}/g, function (match, n) {
641 return arr[n] === undefined ? match : arr[n];
645 // Populate current group with fresh content
646 // Check if each object has valid type and content
647 // ===============================================
649 addContent: function (content) {
651 items = $.makeArray(content),
654 $.each(items, function (i, item) {
663 // Step 1 - Make sure we have an object
664 // ====================================
666 if ($.isPlainObject(item)) {
667 // We probably have manual usage here, something like
668 // $.fancybox.open( [ { src : "image.jpg", type : "image" } ] )
671 opts = item.opts || item;
672 } else if ($.type(item) === "object" && $(item).length) {
673 // Here we probably have jQuery collection returned by some selector
676 // Support attributes like `data-options='{"touch" : false}'` and `data-touch='false'`
677 opts = $item.data() || {};
678 opts = $.extend(true, {}, opts, opts.options);
680 // Here we store clicked element
683 obj.src = self.opts.src || opts.src || $item.attr("href");
685 // Assume that simple syntax is used, for example:
686 // `$.fancybox.open( $("#test"), {} );`
687 if (!obj.type && !obj.src) {
692 // Assume we have a simple html code, for example:
693 // $.fancybox.open( '<div><h1>Hi!</h1></div>' );
700 // Each gallery object has full collection of options
701 obj.opts = $.extend(true, {}, self.opts, opts);
703 // Do not merge buttons array
704 if ($.isArray(opts.buttons)) {
705 obj.opts.buttons = opts.buttons;
708 if ($.fancybox.isMobile && obj.opts.mobile) {
709 obj.opts = mergeOpts(obj.opts, obj.opts.mobile);
712 // Step 2 - Make sure we have content type, if not - try to guess
713 // ==============================================================
715 type = obj.type || obj.opts.type;
719 if ((found = src.match(/\.(mp4|mov|ogv|webm)((\?|#).*)?$/i))) {
722 if (!obj.opts.video.format) {
723 obj.opts.video.format = "video/" + (found[1] === "ogv" ? "ogg" : found[1]);
725 } else if (src.match(/(^data:image\/[a-z0-9+\/=]*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg|ico)((\?|#).*)?$)/i)) {
727 } else if (src.match(/\.(pdf)((\?|#).*)?$/i)) {
729 obj = $.extend(true, obj, {
737 } else if (src.charAt(0) === "#") {
745 self.trigger("objectNeedsType", obj);
748 if (!obj.contentType) {
749 obj.contentType = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1 ? "html" : obj.type;
752 // Step 3 - Some adjustments
753 // =========================
755 obj.index = self.group.length;
757 if (obj.opts.smallBtn == "auto") {
758 obj.opts.smallBtn = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1;
761 if (obj.opts.toolbar === "auto") {
762 obj.opts.toolbar = !obj.opts.smallBtn;
765 // Find thumbnail image, check if exists and if is in the viewport
766 obj.$thumb = obj.opts.$thumb || null;
768 if (obj.opts.$trigger && obj.index === self.opts.index) {
769 obj.$thumb = obj.opts.$trigger.find("img:first");
771 if (obj.$thumb.length) {
772 obj.opts.$orig = obj.opts.$trigger;
776 if (!(obj.$thumb && obj.$thumb.length) && obj.opts.$orig) {
777 obj.$thumb = obj.opts.$orig.find("img:first");
780 if (obj.$thumb && !obj.$thumb.length) {
784 obj.thumb = obj.opts.thumb || (obj.$thumb ? obj.$thumb[0].src : null);
786 // "caption" is a "special" option, it can be used to customize caption per gallery item
787 if ($.type(obj.opts.caption) === "function") {
788 obj.opts.caption = obj.opts.caption.apply(item, [self, obj]);
791 if ($.type(self.opts.caption) === "function") {
792 obj.opts.caption = self.opts.caption.apply(item, [self, obj]);
795 // Make sure we have caption as a string or jQuery object
796 if (!(obj.opts.caption instanceof $)) {
797 obj.opts.caption = obj.opts.caption === undefined ? "" : obj.opts.caption + "";
800 // Check if url contains "filter" used to filter the content
801 // Example: "ajax.html #something"
802 if (obj.type === "ajax") {
803 srcParts = src.split(/\s+/, 2);
805 if (srcParts.length > 1) {
806 obj.src = srcParts.shift();
808 obj.opts.filter = srcParts.shift();
812 // Hide all buttons and disable interactivity for modal items
813 if (obj.opts.modal) {
814 obj.opts = $.extend(true, obj.opts, {
822 // Disable keyboard navigation
825 // Disable some modules
831 // Disable click event handlers
835 dblclickContent: false,
836 dblclickSlide: false,
837 dblclickOutside: false
841 // Step 4 - Add processed object to group
842 // ======================================
844 self.group.push(obj);
847 // Update controls if gallery is already opened
848 if (Object.keys(self.slides).length) {
849 self.updateControls();
851 // Update thumbnails, if needed
852 thumbs = self.Thumbs;
854 if (thumbs && thumbs.isActive) {
862 // Attach an event handler functions for:
863 // - navigation buttons
864 // - browser scrolling, resizing;
867 // - detecting inactivity
868 // ======================================
870 addEvents: function () {
875 // Make navigation elements clickable
876 // ==================================
879 .on("click.fb-close", "[data-fancybox-close]", function (e) {
885 .on("touchstart.fb-prev click.fb-prev", "[data-fancybox-prev]", function (e) {
891 .on("touchstart.fb-next click.fb-next", "[data-fancybox-next]", function (e) {
897 .on("click.fb", "[data-fancybox-zoom]", function (e) {
898 // Click handler for zoom button
899 self[self.isScaledDown() ? "scaleToActual" : "scaleToFit"]();
902 // Handle page scrolling and browser resizing
903 // ==========================================
905 $W.on("orientationchange.fb resize.fb", function (e) {
906 if (e && e.originalEvent && e.originalEvent.type === "resize") {
907 if (self.requestId) {
908 cancelAFrame(self.requestId);
911 self.requestId = requestAFrame(function () {
915 if (self.current && self.current.type === "iframe") {
916 self.$refs.stage.hide();
921 self.$refs.stage.show();
925 $.fancybox.isMobile ? 600 : 250
930 $D.on("keydown.fb", function (e) {
931 var instance = $.fancybox ? $.fancybox.getInstance() : null,
932 current = instance.current,
933 keycode = e.keyCode || e.which;
935 // Trap keyboard focus inside of the modal
936 // =======================================
939 if (current.opts.trapFocus) {
946 // Enable keyboard navigation
947 // ==========================
949 if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input,textarea,video,audio,select")) {
953 // Backspace and Esc keys
954 if (keycode === 8 || keycode === 27) {
962 // Left arrow and Up arrow
963 if (keycode === 37 || keycode === 38) {
971 // Righ arrow and Down arrow
972 if (keycode === 39 || keycode === 40) {
980 self.trigger("afterKeydown", e, keycode);
983 // Hide controls after some inactivity period
984 if (self.group[self.currIndex].opts.idleTime) {
985 self.idleSecondsCounter = 0;
988 "mousemove.fb-idle mouseleave.fb-idle mousedown.fb-idle touchstart.fb-idle touchmove.fb-idle scroll.fb-idle keydown.fb-idle",
990 self.idleSecondsCounter = 0;
1000 self.idleInterval = window.setInterval(function () {
1001 self.idleSecondsCounter++;
1003 if (self.idleSecondsCounter >= self.group[self.currIndex].opts.idleTime && !self.isDragging) {
1005 self.idleSecondsCounter = 0;
1007 self.hideControls();
1013 // Remove events added by the core
1014 // ===============================
1016 removeEvents: function () {
1019 $W.off("orientationchange.fb resize.fb");
1020 $D.off("keydown.fb .fb-idle");
1022 this.$refs.container.off(".fb-close .fb-prev .fb-next");
1024 if (self.idleInterval) {
1025 window.clearInterval(self.idleInterval);
1027 self.idleInterval = null;
1031 // Change to previous gallery item
1032 // ===============================
1034 previous: function (duration) {
1035 return this.jumpTo(this.currPos - 1, duration);
1038 // Change to next gallery item
1039 // ===========================
1041 next: function (duration) {
1042 return this.jumpTo(this.currPos + 1, duration);
1045 // Switch to selected gallery item
1046 // ===============================
1048 jumpTo: function (pos, duration) {
1050 groupLen = self.group.length,
1061 if (self.isDragging || self.isClosing || (self.isAnimating && self.firstRun)) {
1066 pos = parseInt(pos, 10);
1067 loop = self.current ? self.current.opts.loop : self.opts.loop;
1069 if (!loop && (pos < 0 || pos >= groupLen)) {
1073 // Check if opening for the first time; this helps to speed things up
1074 firstRun = self.firstRun = !Object.keys(self.slides).length;
1077 previous = self.current;
1079 self.prevIndex = self.currIndex;
1080 self.prevPos = self.currPos;
1082 current = self.createSlide(pos);
1085 if (loop || current.index < groupLen - 1) {
1086 self.createSlide(pos + 1);
1089 if (loop || current.index > 0) {
1090 self.createSlide(pos - 1);
1094 self.current = current;
1095 self.currIndex = current.index;
1096 self.currPos = current.pos;
1098 self.trigger("beforeShow", firstRun);
1100 self.updateControls();
1102 // Validate duration length
1103 current.forcedDuration = undefined;
1105 if ($.isNumeric(duration)) {
1106 current.forcedDuration = duration;
1108 duration = current.opts[firstRun ? "animationDuration" : "transitionDuration"];
1111 duration = parseInt(duration, 10);
1113 // Check if user has swiped the slides or if still animating
1114 isMoved = self.isMoved(current);
1116 // Make sure current slide is visible
1117 current.$slide.addClass("fancybox-slide--current");
1119 // Fresh start - reveal container, current slide and start loading content
1121 if (current.opts.animationEffect && duration) {
1122 self.$refs.container.css("transition-duration", duration + "ms");
1125 self.$refs.container.addClass("fancybox-is-open").trigger("focus");
1127 // Attempt to load content into slide
1128 // This will later call `afterLoad` -> `revealContent`
1129 self.loadSlide(current);
1131 self.preload("image");
1136 // Get actual slide/stage positions (before cleaning up)
1137 slidePos = $.fancybox.getTranslate(previous.$slide);
1138 stagePos = $.fancybox.getTranslate(self.$refs.stage);
1140 // Clean up all slides
1141 $.each(self.slides, function (index, slide) {
1142 $.fancybox.stop(slide.$slide, true);
1145 if (previous.pos !== current.pos) {
1146 previous.isComplete = false;
1149 previous.$slide.removeClass("fancybox-slide--complete fancybox-slide--current");
1151 // If slides are out of place, then animate them to correct position
1153 // Calculate horizontal swipe distance
1154 diff = slidePos.left - (previous.pos * slidePos.width + previous.pos * previous.opts.gutter);
1156 $.each(self.slides, function (index, slide) {
1157 slide.$slide.removeClass("fancybox-animated").removeClass(function (index, className) {
1158 return (className.match(/(^|\s)fancybox-fx-\S+/g) || []).join(" ");
1161 // Make sure that each slide is in equal distance
1162 // This is mostly needed for freshly added slides, because they are not yet positioned
1163 var leftPos = slide.pos * slidePos.width + slide.pos * slide.opts.gutter;
1165 $.fancybox.setTranslate(slide.$slide, {
1167 left: leftPos - stagePos.left + diff
1170 if (slide.pos !== current.pos) {
1171 slide.$slide.addClass("fancybox-slide--" + (slide.pos > current.pos ? "next" : "previous"));
1174 // Redraw to make sure that transition will start
1175 forceRedraw(slide.$slide);
1177 // Animate the slide
1181 left: (slide.pos - current.pos) * slidePos.width + (slide.pos - current.pos) * slide.opts.gutter
1190 .removeClass("fancybox-slide--next fancybox-slide--previous");
1192 if (slide.pos === self.currPos) {
1198 } else if (duration && current.opts.transitionEffect) {
1199 // Set transition effect for previously active slide
1200 prop = "fancybox-animated fancybox-fx-" + current.opts.transitionEffect;
1202 previous.$slide.addClass("fancybox-slide--" + (previous.pos > current.pos ? "next" : "previous"));
1209 previous.$slide.removeClass(prop).removeClass("fancybox-slide--next fancybox-slide--previous");
1215 if (current.isLoaded) {
1216 self.revealContent(current);
1218 self.loadSlide(current);
1221 self.preload("image");
1224 // Create new "slide" element
1225 // These are gallery items that are actually added to DOM
1226 // =======================================================
1228 createSlide: function (pos) {
1233 index = pos % self.group.length;
1234 index = index < 0 ? self.group.length + index : index;
1236 if (!self.slides[pos] && self.group[index]) {
1237 $slide = $('<div class="fancybox-slide"></div>').appendTo(self.$refs.stage);
1239 self.slides[pos] = $.extend(true, {}, self.group[index], {
1245 self.updateSlide(self.slides[pos]);
1248 return self.slides[pos];
1251 // Scale image to the actual size of the image;
1252 // x and y values should be relative to the slide
1253 // ==============================================
1255 scaleToActual: function (x, y, duration) {
1257 current = self.current,
1258 $content = current.$content,
1259 canvasWidth = $.fancybox.getTranslate(current.$slide).width,
1260 canvasHeight = $.fancybox.getTranslate(current.$slide).height,
1261 newImgWidth = current.width,
1262 newImgHeight = current.height,
1269 if (self.isAnimating || self.isMoved() || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
1273 self.isAnimating = true;
1275 $.fancybox.stop($content);
1277 x = x === undefined ? canvasWidth * 0.5 : x;
1278 y = y === undefined ? canvasHeight * 0.5 : y;
1280 imgPos = $.fancybox.getTranslate($content);
1282 imgPos.top -= $.fancybox.getTranslate(current.$slide).top;
1283 imgPos.left -= $.fancybox.getTranslate(current.$slide).left;
1285 scaleX = newImgWidth / imgPos.width;
1286 scaleY = newImgHeight / imgPos.height;
1288 // Get center position for original image
1289 posX = canvasWidth * 0.5 - newImgWidth * 0.5;
1290 posY = canvasHeight * 0.5 - newImgHeight * 0.5;
1292 // Make sure image does not move away from edges
1293 if (newImgWidth > canvasWidth) {
1294 posX = imgPos.left * scaleX - (x * scaleX - x);
1300 if (posX < canvasWidth - newImgWidth) {
1301 posX = canvasWidth - newImgWidth;
1305 if (newImgHeight > canvasHeight) {
1306 posY = imgPos.top * scaleY - (y * scaleY - y);
1312 if (posY < canvasHeight - newImgHeight) {
1313 posY = canvasHeight - newImgHeight;
1317 self.updateCursor(newImgWidth, newImgHeight);
1328 self.isAnimating = false;
1333 if (self.SlideShow && self.SlideShow.isActive) {
1334 self.SlideShow.stop();
1338 // Scale image to fit inside parent element
1339 // ========================================
1341 scaleToFit: function (duration) {
1343 current = self.current,
1344 $content = current.$content,
1347 if (self.isAnimating || self.isMoved() || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
1351 self.isAnimating = true;
1353 $.fancybox.stop($content);
1355 end = self.getFitPos(current);
1357 self.updateCursor(end.width, end.height);
1363 scaleX: end.width / $content.width(),
1364 scaleY: end.height / $content.height()
1368 self.isAnimating = false;
1373 // Calculate image size to fit inside viewport
1374 // ===========================================
1376 getFitPos: function (slide) {
1378 $content = slide.$content,
1379 $slide = slide.$slide,
1380 width = slide.width || slide.opts.width,
1381 height = slide.height || slide.opts.height,
1388 if (!slide.isLoaded || !$content || !$content.length) {
1392 maxWidth = $.fancybox.getTranslate(self.$refs.stage).width;
1393 maxHeight = $.fancybox.getTranslate(self.$refs.stage).height;
1396 parseFloat($slide.css("paddingLeft")) +
1397 parseFloat($slide.css("paddingRight")) +
1398 parseFloat($content.css("marginLeft")) +
1399 parseFloat($content.css("marginRight"));
1402 parseFloat($slide.css("paddingTop")) +
1403 parseFloat($slide.css("paddingBottom")) +
1404 parseFloat($content.css("marginTop")) +
1405 parseFloat($content.css("marginBottom"));
1407 if (!width || !height) {
1412 minRatio = Math.min(1, maxWidth / width, maxHeight / height);
1414 width = minRatio * width;
1415 height = minRatio * height;
1417 // Adjust width/height to precisely fit into container
1418 if (width > maxWidth - 0.5) {
1422 if (height > maxHeight - 0.5) {
1426 if (slide.type === "image") {
1427 rez.top = Math.floor((maxHeight - height) * 0.5) + parseFloat($slide.css("paddingTop"));
1428 rez.left = Math.floor((maxWidth - width) * 0.5) + parseFloat($slide.css("paddingLeft"));
1429 } else if (slide.contentType === "video") {
1430 // Force aspect ratio for the video
1431 // "I say the whole world must learn of our peaceful ways… by force!"
1432 aspectRatio = slide.opts.width && slide.opts.height ? width / height : slide.opts.ratio || 16 / 9;
1434 if (height > width / aspectRatio) {
1435 height = width / aspectRatio;
1436 } else if (width > height * aspectRatio) {
1437 width = height * aspectRatio;
1442 rez.height = height;
1447 // Update content size and position for all slides
1448 // ==============================================
1450 update: function (e) {
1453 $.each(self.slides, function (key, slide) {
1454 self.updateSlide(slide, e);
1458 // Update slide content position and size
1459 // ======================================
1461 updateSlide: function (slide, e) {
1463 $content = slide && slide.$content,
1464 width = slide.width || slide.opts.width,
1465 height = slide.height || slide.opts.height,
1466 $slide = slide.$slide;
1468 // First, prevent caption overlap, if needed
1469 self.adjustCaption(slide);
1471 // Then resize content to fit inside the slide
1472 if ($content && (width || height || slide.contentType === "video") && !slide.hasError) {
1473 $.fancybox.stop($content);
1475 $.fancybox.setTranslate($content, self.getFitPos(slide));
1477 if (slide.pos === self.currPos) {
1478 self.isAnimating = false;
1480 self.updateCursor();
1484 // Then some adjustments
1485 self.adjustLayout(slide);
1487 if ($slide.length) {
1488 $slide.trigger("refresh");
1490 if (slide.pos === self.currPos) {
1492 .add(self.$refs.navigation.find(".fancybox-button--arrow_right"))
1493 .toggleClass("compensate-for-scrollbar", $slide.get(0).scrollHeight > $slide.get(0).clientHeight);
1497 self.trigger("onUpdate", slide, e);
1500 // Horizontally center slide
1501 // =========================
1503 centerSlide: function (duration) {
1505 current = self.current,
1506 $slide = current.$slide;
1508 if (self.isClosing || !current) {
1512 $slide.siblings().css({
1520 .removeClass("fancybox-slide--previous fancybox-slide--next");
1528 duration === undefined ? 0 : duration,
1536 if (!current.isComplete) {
1544 // Check if current slide is moved (swiped)
1545 // ========================================
1547 isMoved: function (slide) {
1548 var current = slide || this.current,
1556 stagePos = $.fancybox.getTranslate(this.$refs.stage);
1557 slidePos = $.fancybox.getTranslate(current.$slide);
1560 !current.$slide.hasClass("fancybox-animated") &&
1561 (Math.abs(slidePos.top - stagePos.top) > 0.5 || Math.abs(slidePos.left - stagePos.left) > 0.5)
1565 // Update cursor style depending if content can be zoomed
1566 // ======================================================
1568 updateCursor: function (nextWidth, nextHeight) {
1570 current = self.current,
1571 $container = self.$refs.container,
1575 if (!current || self.isClosing || !self.Guestures) {
1579 $container.removeClass("fancybox-is-zoomable fancybox-can-zoomIn fancybox-can-zoomOut fancybox-can-swipe fancybox-can-pan");
1581 canPan = self.canPan(nextWidth, nextHeight);
1583 isZoomable = canPan ? true : self.isZoomable();
1585 $container.toggleClass("fancybox-is-zoomable", isZoomable);
1587 $("[data-fancybox-zoom]").prop("disabled", !isZoomable);
1590 $container.addClass("fancybox-can-pan");
1593 (current.opts.clickContent === "zoom" || ($.isFunction(current.opts.clickContent) && current.opts.clickContent(current) == "zoom"))
1595 $container.addClass("fancybox-can-zoomIn");
1596 } else if (current.opts.touch && (current.opts.touch.vertical || self.group.length > 1) && current.contentType !== "video") {
1597 $container.addClass("fancybox-can-swipe");
1601 // Check if current slide is zoomable
1602 // ==================================
1604 isZoomable: function () {
1606 current = self.current,
1609 // Assume that slide is zoomable if:
1610 // - image is still loading
1611 // - actual size of the image is smaller than available area
1612 if (current && !self.isClosing && current.type === "image" && !current.hasError) {
1613 if (!current.isLoaded) {
1617 fitPos = self.getFitPos(current);
1619 if (fitPos && (current.width > fitPos.width || current.height > fitPos.height)) {
1627 // Check if current image dimensions are smaller than actual
1628 // =========================================================
1630 isScaledDown: function (nextWidth, nextHeight) {
1633 current = self.current,
1634 $content = current.$content;
1636 if (nextWidth !== undefined && nextHeight !== undefined) {
1637 rez = nextWidth < current.width && nextHeight < current.height;
1638 } else if ($content) {
1639 rez = $.fancybox.getTranslate($content);
1640 rez = rez.width < current.width && rez.height < current.height;
1646 // Check if image dimensions exceed parent element
1647 // ===============================================
1649 canPan: function (nextWidth, nextHeight) {
1651 current = self.current,
1655 if (current.type === "image" && (current.isComplete || (nextWidth && nextHeight)) && !current.hasError) {
1656 rez = self.getFitPos(current);
1658 if (nextWidth !== undefined && nextHeight !== undefined) {
1663 } else if (current.isComplete) {
1664 pos = $.fancybox.getTranslate(current.$content);
1668 rez = Math.abs(pos.width - rez.width) > 1.5 || Math.abs(pos.height - rez.height) > 1.5;
1675 // Load content into the slide
1676 // ===========================
1678 loadSlide: function (slide) {
1684 if (slide.isLoading || slide.isLoaded) {
1688 slide.isLoading = true;
1690 if (self.trigger("beforeLoad", slide) === false) {
1691 slide.isLoading = false;
1697 $slide = slide.$slide;
1702 .addClass(slide.opts.slideClass);
1704 // Create content depending on the type
1707 self.setImage(slide);
1712 self.setIframe(slide);
1717 self.setContent(slide, slide.src || slide.content);
1724 slide.opts.video.tpl
1725 .replace(/\{\{src\}\}/gi, slide.src)
1726 .replace("{{format}}", slide.opts.videoFormat || slide.opts.video.format || "")
1727 .replace("{{poster}}", slide.thumb || "")
1733 if ($(slide.src).length) {
1734 self.setContent(slide, $(slide.src));
1736 self.setError(slide);
1742 self.showLoading(slide);
1745 $.extend({}, slide.opts.ajax.settings, {
1747 success: function (data, textStatus) {
1748 if (textStatus === "success") {
1749 self.setContent(slide, data);
1752 error: function (jqXHR, textStatus) {
1753 if (jqXHR && textStatus !== "abort") {
1754 self.setError(slide);
1760 $slide.one("onReset", function () {
1767 self.setError(slide);
1775 // Use thumbnail image, if possible
1776 // ================================
1778 setImage: function (slide) {
1782 // Check if need to show loading icon
1783 setTimeout(function () {
1784 var $img = slide.$image;
1786 if (!self.isClosing && slide.isLoading && (!$img || !$img.length || !$img[0].complete) && !slide.hasError) {
1787 self.showLoading(slide);
1791 //Check if image has srcset
1792 self.checkSrcset(slide);
1794 // This will be wrapper containing both ghost and actual image
1795 slide.$content = $('<div class="fancybox-content"></div>')
1796 .addClass("fancybox-is-hidden")
1797 .appendTo(slide.$slide.addClass("fancybox-slide--image"));
1799 // If we have a thumbnail, we can display it while actual image is loading
1800 // Users will not stare at black screen and actual image will appear gradually
1801 if (slide.opts.preload !== false && slide.opts.width && slide.opts.height && slide.thumb) {
1802 slide.width = slide.opts.width;
1803 slide.height = slide.opts.height;
1805 ghost = document.createElement("img");
1807 ghost.onerror = function () {
1810 slide.$ghost = null;
1813 ghost.onload = function () {
1814 self.afterLoad(slide);
1817 slide.$ghost = $(ghost)
1818 .addClass("fancybox-image")
1819 .appendTo(slide.$content)
1820 .attr("src", slide.thumb);
1823 // Start loading actual image
1824 self.setBigImage(slide);
1827 // Check if image has srcset and get the source
1828 // ============================================
1829 checkSrcset: function (slide) {
1830 var srcset = slide.opts.srcset || slide.opts.image.srcset,
1836 // If we have "srcset", then we need to find first matching "src" value.
1837 // This is necessary, because when you set an src attribute, the browser will preload the image
1838 // before any javascript or even CSS is applied.
1840 pxRatio = window.devicePixelRatio || 1;
1841 windowWidth = window.innerWidth * pxRatio;
1843 temp = srcset.split(",").map(function (el) {
1848 .forEach(function (el, i) {
1849 var value = parseInt(el.substring(0, el.length - 1), 10);
1852 return (ret.url = el);
1857 ret.postfix = el[el.length - 1];
1865 temp.sort(function (a, b) {
1866 return a.value - b.value;
1869 // Ok, now we have an array of all srcset values
1870 for (var j = 0; j < temp.length; j++) {
1873 if ((el.postfix === "w" && el.value >= windowWidth) || (el.postfix === "x" && el.value >= pxRatio)) {
1879 // If not found, take the last one
1880 if (!found && temp.length) {
1881 found = temp[temp.length - 1];
1885 slide.src = found.url;
1887 // If we have default width/height values, we can calculate height for matching source
1888 if (slide.width && slide.height && found.postfix == "w") {
1889 slide.height = (slide.width / slide.height) * found.value;
1890 slide.width = found.value;
1893 slide.opts.srcset = srcset;
1898 // Create full-size image
1899 // ======================
1901 setBigImage: function (slide) {
1903 img = document.createElement("img"),
1907 .one("error", function () {
1908 self.setError(slide);
1910 .one("load", function () {
1913 if (!slide.$ghost) {
1914 self.resolveImageSlideSize(slide, this.naturalWidth, this.naturalHeight);
1916 self.afterLoad(slide);
1919 if (self.isClosing) {
1923 if (slide.opts.srcset) {
1924 sizes = slide.opts.sizes;
1926 if (!sizes || sizes === "auto") {
1928 (slide.width / slide.height > 1 && $W.width() / $W.height() > 1 ? "100" : Math.round((slide.width / slide.height) * 100)) +
1932 $img.attr("sizes", sizes).attr("srcset", slide.opts.srcset);
1935 // Hide temporary image after some delay
1937 setTimeout(function () {
1938 if (slide.$ghost && !self.isClosing) {
1939 slide.$ghost.hide();
1941 }, Math.min(300, Math.max(1000, slide.height / 1600)));
1944 self.hideLoading(slide);
1946 .addClass("fancybox-image")
1947 .attr("src", slide.src)
1948 .appendTo(slide.$content);
1950 if ((img.complete || img.readyState == "complete") && $img.naturalWidth && $img.naturalHeight) {
1951 $img.trigger("load");
1952 } else if (img.error) {
1953 $img.trigger("error");
1957 // Computes the slide size from image size and maxWidth/maxHeight
1958 // ==============================================================
1960 resolveImageSlideSize: function (slide, imgWidth, imgHeight) {
1961 var maxWidth = parseInt(slide.opts.width, 10),
1962 maxHeight = parseInt(slide.opts.height, 10);
1964 // Sets the default values from the image
1965 slide.width = imgWidth;
1966 slide.height = imgHeight;
1969 slide.width = maxWidth;
1970 slide.height = Math.floor((maxWidth * imgHeight) / imgWidth);
1973 if (maxHeight > 0) {
1974 slide.width = Math.floor((maxHeight * imgWidth) / imgHeight);
1975 slide.height = maxHeight;
1979 // Create iframe wrapper, iframe and bindings
1980 // ==========================================
1982 setIframe: function (slide) {
1984 opts = slide.opts.iframe,
1985 $slide = slide.$slide,
1988 slide.$content = $('<div class="fancybox-content' + (opts.preload ? " fancybox-is-hidden" : "") + '"></div>')
1992 $slide.addClass("fancybox-slide--" + slide.contentType);
1994 slide.$iframe = $iframe = $(opts.tpl.replace(/\{rnd\}/g, new Date().getTime()))
1996 .appendTo(slide.$content);
1999 self.showLoading(slide);
2001 // Unfortunately, it is not always possible to determine if iframe is successfully loaded
2002 // (due to browser security policy)
2004 $iframe.on("load.fb error.fb", function (e) {
2007 slide.$slide.trigger("refresh");
2009 self.afterLoad(slide);
2012 // Recalculate iframe content size
2013 // ===============================
2015 $slide.on("refresh.fb", function () {
2016 var $content = slide.$content,
2017 frameWidth = opts.css.width,
2018 frameHeight = opts.css.height,
2022 if ($iframe[0].isReady !== 1) {
2027 $contents = $iframe.contents();
2028 $body = $contents.find("body");
2031 // Calculate content dimensions, if it is accessible
2032 if ($body && $body.length && $body.children().length) {
2033 // Avoid scrolling to top (if multiple instances)
2034 $slide.css("overflow", "visible");
2038 "max-width": "100%",
2042 if (frameWidth === undefined) {
2043 frameWidth = Math.ceil(Math.max($body[0].clientWidth, $body.outerWidth(true)));
2046 $content.css("width", frameWidth ? frameWidth : "").css("max-width", "");
2048 if (frameHeight === undefined) {
2049 frameHeight = Math.ceil(Math.max($body[0].clientHeight, $body.outerHeight(true)));
2052 $content.css("height", frameHeight ? frameHeight : "");
2054 $slide.css("overflow", "auto");
2057 $content.removeClass("fancybox-is-hidden");
2060 self.afterLoad(slide);
2063 $iframe.attr("src", slide.src);
2065 // Remove iframe if closing or changing gallery item
2066 $slide.one("onReset", function () {
2067 // This helps IE not to throw errors when closing
2073 .attr("src", "//about:blank");
2080 slide.isLoaded = false;
2081 slide.isRevealed = false;
2085 // Wrap and append content to the slide
2086 // ======================================
2088 setContent: function (slide, content) {
2091 if (self.isClosing) {
2095 self.hideLoading(slide);
2097 if (slide.$content) {
2098 $.fancybox.stop(slide.$content);
2101 slide.$slide.empty();
2103 // If content is a jQuery object, then it will be moved to the slide.
2104 // The placeholder is created so we will know where to put it back.
2105 if (isQuery(content) && content.parent().length) {
2106 // Make sure content is not already moved to fancyBox
2107 if (content.hasClass("fancybox-content") || content.parent().hasClass("fancybox-content")) {
2108 content.parents(".fancybox-slide").trigger("onReset");
2111 // Create temporary element marking original place of the content
2112 slide.$placeholder = $("<div>")
2114 .insertAfter(content);
2116 // Make sure content is visible
2117 content.css("display", "inline-block");
2118 } else if (!slide.hasError) {
2119 // If content is just a plain text, try to convert it to html
2120 if ($.type(content) === "string") {
2121 content = $("<div>")
2122 .append($.trim(content))
2126 // If "filter" option is provided, then filter content
2127 if (slide.opts.filter) {
2128 content = $("<div>")
2130 .find(slide.opts.filter);
2134 slide.$slide.one("onReset", function () {
2135 // Pause all html5 video/audio
2137 .find("video,audio")
2141 if (slide.$placeholder) {
2142 slide.$placeholder.after(content.removeClass("fancybox-content").hide()).remove();
2144 slide.$placeholder = null;
2147 // Remove custom close button
2148 if (slide.$smallBtn) {
2149 slide.$smallBtn.remove();
2151 slide.$smallBtn = null;
2154 // Remove content and mark slide as not loaded
2155 if (!slide.hasError) {
2158 slide.isLoaded = false;
2159 slide.isRevealed = false;
2163 $(content).appendTo(slide.$slide);
2165 if ($(content).is("video,audio")) {
2166 $(content).addClass("fancybox-video");
2168 $(content).wrap("<div></div>");
2170 slide.contentType = "video";
2172 slide.opts.width = slide.opts.width || $(content).attr("width");
2173 slide.opts.height = slide.opts.height || $(content).attr("height");
2176 slide.$content = slide.$slide
2178 .filter("div,form,main,video,audio,article,.fancybox-content")
2181 slide.$content.siblings().hide();
2183 // Re-check if there is a valid content
2184 // (in some cases, ajax response can contain various elements or plain text)
2185 if (!slide.$content.length) {
2186 slide.$content = slide.$slide
2187 .wrapInner("<div></div>")
2192 slide.$content.addClass("fancybox-content");
2194 slide.$slide.addClass("fancybox-slide--" + slide.contentType);
2196 self.afterLoad(slide);
2199 // Display error message
2200 // =====================
2202 setError: function (slide) {
2203 slide.hasError = true;
2207 .removeClass("fancybox-slide--" + slide.contentType)
2208 .addClass("fancybox-slide--error");
2210 slide.contentType = "html";
2212 this.setContent(slide, this.translate(slide, slide.opts.errorTpl));
2214 if (slide.pos === this.currPos) {
2215 this.isAnimating = false;
2219 // Show loading icon inside the slide
2220 // ==================================
2222 showLoading: function (slide) {
2225 slide = slide || self.current;
2227 if (slide && !slide.$spinner) {
2228 slide.$spinner = $(self.translate(self, self.opts.spinnerTpl))
2229 .appendTo(slide.$slide)
2235 // Remove loading icon from the slide
2236 // ==================================
2238 hideLoading: function (slide) {
2241 slide = slide || self.current;
2243 if (slide && slide.$spinner) {
2244 slide.$spinner.stop().remove();
2246 delete slide.$spinner;
2250 // Adjustments after slide content has been loaded
2251 // ===============================================
2253 afterLoad: function (slide) {
2256 if (self.isClosing) {
2260 slide.isLoading = false;
2261 slide.isLoaded = true;
2263 self.trigger("afterLoad", slide);
2265 self.hideLoading(slide);
2267 // Add small close button
2268 if (slide.opts.smallBtn && (!slide.$smallBtn || !slide.$smallBtn.length)) {
2269 slide.$smallBtn = $(self.translate(slide, slide.opts.btnTpl.smallBtn)).appendTo(slide.$content);
2272 // Disable right click
2273 if (slide.opts.protect && slide.$content && !slide.hasError) {
2274 slide.$content.on("contextmenu.fb", function (e) {
2275 if (e.button == 2) {
2282 // Add fake element on top of the image
2283 // This makes a bit harder for user to select image
2284 if (slide.type === "image") {
2285 $('<div class="fancybox-spaceball"></div>').appendTo(slide.$content);
2289 self.adjustCaption(slide);
2291 self.adjustLayout(slide);
2293 if (slide.pos === self.currPos) {
2294 self.updateCursor();
2297 self.revealContent(slide);
2300 // Prevent caption overlap,
2301 // fix css inconsistency across browsers
2302 // =====================================
2304 adjustCaption: function (slide) {
2306 current = slide || self.current,
2307 caption = current.opts.caption,
2308 preventOverlap = current.opts.preventCaptionOverlap,
2309 $caption = self.$refs.caption,
2313 $caption.toggleClass("fancybox-caption--separate", preventOverlap);
2315 if (preventOverlap && caption && caption.length) {
2316 if (current.pos !== self.currPos) {
2317 $clone = $caption.clone().appendTo($caption.parent());
2325 captionH = $clone.outerHeight(true);
2327 $clone.empty().remove();
2328 } else if (self.$caption) {
2329 captionH = self.$caption.outerHeight(true);
2332 current.$slide.css("padding-bottom", captionH || "");
2336 // Simple hack to fix inconsistency across browsers, described here (affects Edge, too):
2337 // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
2338 // ====================================================================================
2340 adjustLayout: function (slide) {
2342 current = slide || self.current,
2348 if (current.isLoaded && current.opts.disableLayoutFix !== true) {
2349 current.$content.css("margin-bottom", "");
2351 // If we would always set margin-bottom for the content,
2352 // then it would potentially break vertical align
2353 if (current.$content.outerHeight() > current.$slide.height() + 0.5) {
2354 inlinePadding = current.$slide[0].style["padding-bottom"];
2355 actualPadding = current.$slide.css("padding-bottom");
2357 if (parseFloat(actualPadding) > 0) {
2358 scrollHeight = current.$slide[0].scrollHeight;
2360 current.$slide.css("padding-bottom", 0);
2362 if (Math.abs(scrollHeight - current.$slide[0].scrollHeight) < 1) {
2363 marginBottom = actualPadding;
2366 current.$slide.css("padding-bottom", inlinePadding);
2370 current.$content.css("margin-bottom", marginBottom);
2374 // Make content visible
2375 // This method is called right after content has been loaded or
2376 // user navigates gallery and transition should start
2377 // ============================================================
2379 revealContent: function (slide) {
2381 $slide = slide.$slide,
2384 isMoved = self.isMoved(slide),
2385 isRevealed = slide.isRevealed,
2391 slide.isRevealed = true;
2393 effect = slide.opts[self.firstRun ? "animationEffect" : "transitionEffect"];
2394 duration = slide.opts[self.firstRun ? "animationDuration" : "transitionDuration"];
2396 duration = parseInt(slide.forcedDuration === undefined ? duration : slide.forcedDuration, 10);
2398 if (isMoved || slide.pos !== self.currPos || !duration) {
2402 // Check if can zoom
2403 if (effect === "zoom") {
2404 if (slide.pos === self.currPos && duration && slide.type === "image" && !slide.hasError && (start = self.getThumbPos(slide))) {
2405 end = self.getFitPos(slide);
2413 if (effect === "zoom") {
2414 self.isAnimating = true;
2416 end.scaleX = end.width / start.width;
2417 end.scaleY = end.height / start.height;
2419 // Check if we need to animate opacity
2420 opacity = slide.opts.zoomOpacity;
2422 if (opacity == "auto") {
2423 opacity = Math.abs(slide.width / slide.height - start.width / start.height) > 0.1;
2427 start.opacity = 0.1;
2431 // Draw image at start position
2432 $.fancybox.setTranslate(slide.$content.removeClass("fancybox-is-hidden"), start);
2434 forceRedraw(slide.$content);
2437 $.fancybox.animate(slide.$content, end, duration, function () {
2438 self.isAnimating = false;
2446 self.updateSlide(slide);
2448 // Simply show content if no effect
2449 // ================================
2451 slide.$content.removeClass("fancybox-is-hidden");
2453 if (!isRevealed && isMoved && slide.type === "image" && !slide.hasError) {
2454 slide.$content.hide().fadeIn("fast");
2457 if (slide.pos === self.currPos) {
2464 // Prepare for CSS transiton
2465 // =========================
2466 $.fancybox.stop($slide);
2468 //effectClassName = "fancybox-animated fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-fx-" + effect;
2469 effectClassName = "fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-animated fancybox-fx-" + effect;
2471 $slide.addClass(effectClassName).removeClass("fancybox-slide--current"); //.addClass(effectClassName);
2473 slide.$content.removeClass("fancybox-is-hidden");
2476 forceRedraw($slide);
2478 if (slide.type !== "image") {
2479 slide.$content.hide().show(0);
2484 "fancybox-slide--current",
2487 $slide.removeClass(effectClassName).css({
2492 if (slide.pos === self.currPos) {
2500 // Check if we can and have to zoom from thumbnail
2501 //================================================
2503 getThumbPos: function (slide) {
2505 $thumb = slide.$thumb,
2512 if (!$thumb || !inViewport($thumb[0])) {
2516 thumbPos = $.fancybox.getTranslate($thumb);
2518 btw = parseFloat($thumb.css("border-top-width") || 0);
2519 brw = parseFloat($thumb.css("border-right-width") || 0);
2520 bbw = parseFloat($thumb.css("border-bottom-width") || 0);
2521 blw = parseFloat($thumb.css("border-left-width") || 0);
2524 top: thumbPos.top + btw,
2525 left: thumbPos.left + blw,
2526 width: thumbPos.width - brw - blw,
2527 height: thumbPos.height - btw - bbw,
2532 return thumbPos.width > 0 && thumbPos.height > 0 ? rez : false;
2535 // Final adjustments after current gallery item is moved to position
2536 // and it`s content is loaded
2537 // ==================================================================
2539 complete: function () {
2541 current = self.current,
2545 if (self.isMoved() || !current.isLoaded) {
2549 if (!current.isComplete) {
2550 current.isComplete = true;
2552 current.$slide.siblings().trigger("onReset");
2554 self.preload("inline");
2556 // Trigger any CSS transiton inside the slide
2557 forceRedraw(current.$slide);
2559 current.$slide.addClass("fancybox-slide--complete");
2561 // Remove unnecessary slides
2562 $.each(self.slides, function (key, slide) {
2563 if (slide.pos >= self.currPos - 1 && slide.pos <= self.currPos + 1) {
2564 slides[slide.pos] = slide;
2566 $.fancybox.stop(slide.$slide);
2568 slide.$slide.off().remove();
2572 self.slides = slides;
2575 self.isAnimating = false;
2577 self.updateCursor();
2579 self.trigger("afterShow");
2581 // Autoplay first html5 video/audio
2582 if (!!current.opts.video.autoStart) {
2584 .find("video,audio")
2585 .filter(":visible:first")
2587 .one("ended", function () {
2588 if (Document.exitFullscreen) {
2589 Document.exitFullscreen();
2590 } else if (this.webkitExitFullscreen) {
2591 this.webkitExitFullscreen();
2598 // Try to focus on the first focusable element
2599 if (current.opts.autoFocus && current.contentType === "html") {
2600 // Look for the first input with autofocus attribute
2601 $el = current.$content.find("input[autofocus]:enabled:visible:first");
2604 $el.trigger("focus");
2606 self.focus(null, true);
2611 current.$slide.scrollTop(0).scrollLeft(0);
2614 // Preload next and previous slides
2615 // ================================
2617 preload: function (type) {
2622 if (self.group.length < 2) {
2626 next = self.slides[self.currPos + 1];
2627 prev = self.slides[self.currPos - 1];
2629 if (prev && prev.type === type) {
2630 self.loadSlide(prev);
2633 if (next && next.type === type) {
2634 self.loadSlide(next);
2638 // Try to find and focus on the first focusable element
2639 // ====================================================
2641 focus: function (e, firstRun) {
2646 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
2647 "select:not([disabled]):not([aria-hidden])",
2648 "textarea:not([disabled]):not([aria-hidden])",
2649 "button:not([disabled]):not([aria-hidden])",
2655 "[contenteditable]",
2656 '[tabindex]:not([tabindex^="-"])'
2661 if (self.isClosing) {
2665 if (e || !self.current || !self.current.isComplete) {
2666 // Focus on any element inside fancybox
2667 focusableItems = self.$refs.container.find("*:visible");
2669 // Focus inside current slide
2670 focusableItems = self.current.$slide.find("*:visible" + (firstRun ? ":not(.fancybox-close-small)" : ""));
2673 focusableItems = focusableItems.filter(focusableStr).filter(function () {
2674 return $(this).css("visibility") !== "hidden" && !$(this).hasClass("disabled");
2677 if (focusableItems.length) {
2678 focusedItemIndex = focusableItems.index(document.activeElement);
2680 if (e && e.shiftKey) {
2682 if (focusedItemIndex < 0 || focusedItemIndex == 0) {
2685 focusableItems.eq(focusableItems.length - 1).trigger("focus");
2688 // Outside or Forward tab
2689 if (focusedItemIndex < 0 || focusedItemIndex == focusableItems.length - 1) {
2694 focusableItems.eq(0).trigger("focus");
2698 self.$refs.container.trigger("focus");
2702 // Activates current instance - brings container to the front and enables keyboard,
2703 // notifies other instances about deactivating
2704 // =================================================================================
2706 activate: function () {
2709 // Deactivate all instances
2710 $(".fancybox-container").each(function () {
2711 var instance = $(this).data("FancyBox");
2713 // Skip self and closing instances
2714 if (instance && instance.id !== self.id && !instance.isClosing) {
2715 instance.trigger("onDeactivate");
2717 instance.removeEvents();
2719 instance.isVisible = false;
2723 self.isVisible = true;
2725 if (self.current || self.isIdle) {
2728 self.updateControls();
2731 self.trigger("onActivate");
2736 // Start closing procedure
2737 // This will start "zoom-out" animation if needed and clean everything up afterwards
2738 // =================================================================================
2740 close: function (e, d) {
2742 current = self.current,
2751 var done = function () {
2755 if (self.isClosing) {
2759 self.isClosing = true;
2761 // If beforeClose callback prevents closing, make sure content is centered
2762 if (self.trigger("beforeClose", e) === false) {
2763 self.isClosing = false;
2765 requestAFrame(function () {
2772 // Remove all events
2773 // If there are multiple instances, they will be set again by "activate" method
2774 self.removeEvents();
2776 $content = current.$content;
2777 effect = current.opts.animationEffect;
2778 duration = $.isNumeric(d) ? d : effect ? current.opts.animationDuration : 0;
2780 current.$slide.removeClass("fancybox-slide--complete fancybox-slide--next fancybox-slide--previous fancybox-animated");
2783 $.fancybox.stop(current.$slide);
2788 // Remove other slides
2794 // Trigger animations
2796 self.$refs.container
2797 .removeClass("fancybox-is-open")
2798 .addClass("fancybox-is-closing")
2799 .css("transition-duration", duration + "ms");
2803 self.hideLoading(current);
2805 self.hideControls(true);
2807 self.updateCursor();
2809 // Check if possible to zoom-out
2811 effect === "zoom" &&
2812 !($content && duration && current.type === "image" && !self.isMoved() && !current.hasError && (end = self.getThumbPos(current)))
2817 if (effect === "zoom") {
2818 $.fancybox.stop($content);
2820 domRect = $.fancybox.getTranslate($content);
2825 scaleX: domRect.width / end.width,
2826 scaleY: domRect.height / end.height,
2831 // Check if we need to animate opacity
2832 opacity = current.opts.zoomOpacity;
2834 if (opacity == "auto") {
2835 opacity = Math.abs(current.width / current.height - end.width / end.height) > 0.1;
2842 $.fancybox.setTranslate($content, start);
2844 forceRedraw($content);
2846 $.fancybox.animate($content, end, duration, done);
2851 if (effect && duration) {
2853 current.$slide.addClass("fancybox-slide--previous").removeClass("fancybox-slide--current"),
2854 "fancybox-animated fancybox-fx-" + effect,
2859 // If skip animation
2861 setTimeout(done, duration);
2870 // Final adjustments after removing the instance
2871 // =============================================
2873 cleanUp: function (e) {
2876 $focus = self.current.opts.$orig,
2880 self.current.$slide.trigger("onReset");
2882 self.$refs.container.empty().remove();
2884 self.trigger("afterClose", e);
2887 if (!!self.current.opts.backFocus) {
2888 if (!$focus || !$focus.length || !$focus.is(":visible")) {
2889 $focus = self.$trigger;
2892 if ($focus && $focus.length) {
2896 $focus.trigger("focus");
2904 self.current = null;
2906 // Check if there are other instances
2907 instance = $.fancybox.getInstance();
2910 instance.activate();
2912 $("body").removeClass("fancybox-active compensate-for-scrollbar");
2914 $("#fancybox-style-noscroll").remove();
2918 // Call callback and trigger an event
2919 // ==================================
2921 trigger: function (name, slide) {
2922 var args = Array.prototype.slice.call(arguments, 1),
2924 obj = slide && slide.opts ? slide : self.current,
2935 if ($.isFunction(obj.opts[name])) {
2936 rez = obj.opts[name].apply(obj, args);
2939 if (rez === false) {
2943 if (name === "afterClose" || !self.$refs) {
2944 $D.trigger(name + ".fb", args);
2946 self.$refs.container.trigger(name + ".fb", args);
2950 // Update infobar values, navigation button states and reveal caption
2951 // ==================================================================
2953 updateControls: function () {
2955 current = self.current,
2956 index = current.index,
2957 $container = self.$refs.container,
2958 $caption = self.$refs.caption,
2959 caption = current.opts.caption;
2961 // Recalculate content dimensions
2962 current.$slide.trigger("refresh");
2965 if (caption && caption.length) {
2966 self.$caption = $caption;
2973 self.$caption = null;
2976 if (!self.hasHiddenControls && !self.isIdle) {
2977 self.showControls();
2980 // Update info and navigation elements
2981 $container.find("[data-fancybox-count]").html(self.group.length);
2982 $container.find("[data-fancybox-index]").html(index + 1);
2984 $container.find("[data-fancybox-prev]").prop("disabled", !current.opts.loop && index <= 0);
2985 $container.find("[data-fancybox-next]").prop("disabled", !current.opts.loop && index >= self.group.length - 1);
2987 if (current.type === "image") {
2988 // Re-enable buttons; update download button source
2990 .find("[data-fancybox-zoom]")
2993 .find("[data-fancybox-download]")
2994 .attr("href", current.opts.image.src || current.src)
2996 } else if (current.opts.toolbar) {
2997 $container.find("[data-fancybox-download],[data-fancybox-zoom]").hide();
3000 // Make sure focus is not on disabled button/element
3001 if ($(document.activeElement).is(":hidden,[disabled]")) {
3002 self.$refs.container.trigger("focus");
3006 // Hide toolbar and caption
3007 // ========================
3009 hideControls: function (andCaption) {
3011 arr = ["infobar", "toolbar", "nav"];
3013 if (andCaption || !self.current.opts.preventCaptionOverlap) {
3014 arr.push("caption");
3017 this.$refs.container.removeClass(
3020 return "fancybox-show-" + i;
3025 this.hasHiddenControls = true;
3028 showControls: function () {
3030 opts = self.current ? self.current.opts : self.opts,
3031 $container = self.$refs.container;
3033 self.hasHiddenControls = false;
3034 self.idleSecondsCounter = 0;
3037 .toggleClass("fancybox-show-toolbar", !!(opts.toolbar && opts.buttons))
3038 .toggleClass("fancybox-show-infobar", !!(opts.infobar && self.group.length > 1))
3039 .toggleClass("fancybox-show-caption", !!self.$caption)
3040 .toggleClass("fancybox-show-nav", !!(opts.arrows && self.group.length > 1))
3041 .toggleClass("fancybox-is-modal", !!opts.modal);
3044 // Toggle toolbar and caption
3045 // ==========================
3047 toggleControls: function () {
3048 if (this.hasHiddenControls) {
3049 this.showControls();
3051 this.hideControls();
3060 // Get current instance and execute a command.
3062 // Examples of usage:
3064 // $instance = $.fancybox.getInstance();
3065 // $.fancybox.getInstance().jumpTo( 1 );
3066 // $.fancybox.getInstance( 'jumpTo', 1 );
3067 // $.fancybox.getInstance( function() {
3068 // console.info( this.currIndex );
3070 // ======================================================
3072 getInstance: function (command) {
3073 var instance = $('.fancybox-container:not(".fancybox-is-closing"):last').data("FancyBox"),
3074 args = Array.prototype.slice.call(arguments, 1);
3076 if (instance instanceof FancyBox) {
3077 if ($.type(command) === "string") {
3078 instance[command].apply(instance, args);
3079 } else if ($.type(command) === "function") {
3080 command.apply(instance, args);
3089 // Create new instance
3090 // ===================
3092 open: function (items, opts, index) {
3093 return new FancyBox(items, opts, index);
3096 // Close current or all instances
3097 // ==============================
3099 close: function (all) {
3100 var instance = this.getInstance();
3105 // Try to find and close next instance
3112 // Close all instances and unbind all events
3113 // =========================================
3115 destroy: function () {
3118 $D.add("body").off("click.fb-start", "**");
3121 // Try to detect mobile devices
3122 // ============================
3124 isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
3126 // Detect if 'translate3d' support is available
3127 // ============================================
3129 use3d: (function () {
3130 var div = document.createElement("div");
3133 window.getComputedStyle &&
3134 window.getComputedStyle(div) &&
3135 window.getComputedStyle(div).getPropertyValue("transform") &&
3136 !(document.documentMode && document.documentMode < 11)
3140 // Helper function to get current visual state of an element
3141 // returns array[ top, left, horizontal-scale, vertical-scale, opacity ]
3142 // =====================================================================
3144 getTranslate: function ($el) {
3147 if (!$el || !$el.length) {
3151 domRect = $el[0].getBoundingClientRect();
3154 top: domRect.top || 0,
3155 left: domRect.left || 0,
3156 width: domRect.width,
3157 height: domRect.height,
3158 opacity: parseFloat($el.css("opacity"))
3162 // Shortcut for setting "translate3d" properties for element
3163 // Can set be used to set opacity, too
3164 // ========================================================
3166 setTranslate: function ($el, props) {
3170 if (!$el || !props) {
3174 if (props.left !== undefined || props.top !== undefined) {
3176 (props.left === undefined ? $el.position().left : props.left) +
3178 (props.top === undefined ? $el.position().top : props.top) +
3182 str = "translate3d(" + str + ", 0px)";
3184 str = "translate(" + str + ")";
3188 if (props.scaleX !== undefined && props.scaleY !== undefined) {
3189 str += " scale(" + props.scaleX + ", " + props.scaleY + ")";
3190 } else if (props.scaleX !== undefined) {
3191 str += " scaleX(" + props.scaleX + ")";
3195 css.transform = str;
3198 if (props.opacity !== undefined) {
3199 css.opacity = props.opacity;
3202 if (props.width !== undefined) {
3203 css.width = props.width;
3206 if (props.height !== undefined) {
3207 css.height = props.height;
3210 return $el.css(css);
3213 // Simple CSS transition handler
3214 // =============================
3216 animate: function ($el, to, duration, callback, leaveAnimationName) {
3220 if ($.isFunction(duration)) {
3221 callback = duration;
3227 from = self.getTranslate($el);
3229 $el.on(transitionEnd, function (e) {
3230 // Skip events from child elements and z-index change
3231 if (e && e.originalEvent && (!$el.is(e.originalEvent.target) || e.originalEvent.propertyName == "z-index")) {
3237 if ($.isNumeric(duration)) {
3238 $el.css("transition-duration", "");
3241 if ($.isPlainObject(to)) {
3242 if (to.scaleX !== undefined && to.scaleY !== undefined) {
3243 self.setTranslate($el, {
3246 width: from.width * to.scaleX,
3247 height: from.height * to.scaleY,
3252 } else if (leaveAnimationName !== true) {
3253 $el.removeClass(to);
3256 if ($.isFunction(callback)) {
3261 if ($.isNumeric(duration)) {
3262 $el.css("transition-duration", duration + "ms");
3265 // Start animation by changing CSS properties or class name
3266 if ($.isPlainObject(to)) {
3267 if (to.scaleX !== undefined && to.scaleY !== undefined) {
3271 if ($el.parent().hasClass("fancybox-slide--image")) {
3272 $el.parent().addClass("fancybox-is-scaling");
3276 $.fancybox.setTranslate($el, to);
3281 // Make sure that `transitionend` callback gets fired
3284 setTimeout(function () {
3285 $el.trigger(transitionEnd);
3290 stop: function ($el, callCallback) {
3291 if ($el && $el.length) {
3292 clearTimeout($el.data("timer"));
3295 $el.trigger(transitionEnd);
3298 $el.off(transitionEnd).css("transition-duration", "");
3300 $el.parent().removeClass("fancybox-is-scaling");
3305 // Default click handler for "fancyboxed" links
3306 // ============================================
3308 function _run(e, opts) {
3315 // Avoid opening multiple times
3316 if (e && e.isDefaultPrevented()) {
3325 opts = mergeOpts(e.data.options, opts);
3328 $target = opts.$target || $(e.currentTarget).trigger("blur");
3329 instance = $.fancybox.getInstance();
3331 if (instance && instance.$trigger && instance.$trigger.is($target)) {
3335 if (opts.selector) {
3336 items = $(opts.selector);
3338 // Get all related items and find index for clicked one
3339 value = $target.attr("data-fancybox") || "";
3342 items = e.data ? e.data.items : [];
3343 items = items.length ? items.filter('[data-fancybox="' + value + '"]') : $('[data-fancybox="' + value + '"]');
3349 index = $(items).index($target);
3351 // Sometimes current item can not be found
3356 instance = $.fancybox.open(items, opts, index);
3358 // Save last active element
3359 instance.$trigger = $target;
3362 // Create a jQuery plugin
3363 // ======================
3365 $.fn.fancybox = function (options) {
3368 options = options || {};
3369 selector = options.selector || false;
3372 // Use body element instead of document so it executes first
3374 .off("click.fb-start", selector)
3375 .on("click.fb-start", selector, {
3379 this.off("click.fb-start").on(
3391 // Self initializing plugin for all elements having `data-fancybox` attribute
3392 // ==========================================================================
3394 $D.on("click.fb-start", "[data-fancybox]", _run);
3396 // Enable "trigger elements"
3397 // =========================
3399 $D.on("click.fb-start", "[data-fancybox-trigger]", function (e) {
3400 $('[data-fancybox="' + $(this).attr("data-fancybox-trigger") + '"]')
3401 .eq($(this).attr("data-fancybox-index") || 0)
3402 .trigger("click.fb-start", {
3407 // Track focus event for better accessibility styling
3408 // ==================================================
3410 var buttonStr = ".fancybox-button",
3411 focusStr = "fancybox-focus",
3414 $D.on("mousedown mouseup focus blur", buttonStr, function (e) {
3423 $(buttonStr).removeClass(focusStr);
3425 if (!$(this).is($pressed) && !$(this).is("[disabled]")) {
3426 $(this).addClass(focusStr);
3430 $(buttonStr).removeClass(focusStr);
3435 })(window, document, jQuery);
3436 // ==========================================================================
3439 // Adds additional media type support
3441 // ==========================================================================
3445 // Object containing properties for each media type
3448 matcher: /(youtube\.com|youtu\.be|youtube\-nocookie\.com)\/(watch\?(.*&)?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*))(.*)/i,
3455 wmode: "transparent",
3461 url: "https://www.youtube-nocookie.com/embed/$4",
3462 thumb: "https://img.youtube.com/vi/$4/hqdefault.jpg"
3466 matcher: /^.+vimeo.com\/(.*\/)?([\d]+)(.*)?/,
3477 url: "//player.vimeo.com/video/$2"
3481 matcher: /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i,
3483 url: "//$1/p/$2/media/?size=l"
3487 // http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
3488 // https://www.google.com/maps/@37.7852006,-122.4146355,14.65z
3489 // https://www.google.com/maps/@52.2111123,2.9237542,6.61z?hl=en
3490 // https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572
3492 matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(((maps\/(place\/(.*)\/)?\@(.*),(\d+.?\d+?)z))|(\?ll=))(.*)?/i,
3494 url: function (rez) {
3499 (rez[9] ? rez[9] + "&z=" + Math.floor(rez[10]) + (rez[12] ? rez[12].replace(/^\//, "&") : "") : rez[12] + "").replace(/\?/, "&") +
3501 (rez[12] && rez[12].indexOf("layer=c") > 0 ? "svembed" : "embed")
3507 // https://www.google.com/maps/search/Empire+State+Building/
3508 // https://www.google.com/maps/search/?api=1&query=centurylink+field
3509 // https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393
3511 matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(maps\/search\/)(.*)/i,
3513 url: function (rez) {
3514 return "//maps.google." + rez[2] + "/maps?q=" + rez[5].replace("query=", "q=").replace("api=1", "") + "&output=embed";
3519 // Formats matching url to final form
3520 var format = function (url, rez, params) {
3525 params = params || "";
3527 if ($.type(params) === "object") {
3528 params = $.param(params, true);
3531 $.each(rez, function (key, value) {
3532 url = url.replace("$" + key, value || "");
3535 if (params.length) {
3536 url += (url.indexOf("?") > 0 ? "&" : "?") + params;
3542 $(document).on("objectNeedsType.fb", function (e, instance, item) {
3543 var url = item.src || "",
3553 media = $.extend(true, {}, defaults, item.opts.media);
3555 // Look for any matching media type
3556 $.each(media, function (providerName, providerOpts) {
3557 rez = url.match(providerOpts.matcher);
3563 type = providerOpts.type;
3564 provider = providerName;
3567 if (providerOpts.paramPlace && rez[providerOpts.paramPlace]) {
3568 urlParams = rez[providerOpts.paramPlace];
3570 if (urlParams[0] == "?") {
3571 urlParams = urlParams.substring(1);
3574 urlParams = urlParams.split("&");
3576 for (var m = 0; m < urlParams.length; ++m) {
3577 var p = urlParams[m].split("=", 2);
3579 if (p.length == 2) {
3580 paramObj[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
3585 params = $.extend(true, {}, providerOpts.params, item.opts[providerName], paramObj);
3588 $.type(providerOpts.url) === "function" ? providerOpts.url.call(this, rez, params, item) : format(providerOpts.url, rez, params);
3591 $.type(providerOpts.thumb) === "function" ? providerOpts.thumb.call(this, rez, params, item) : format(providerOpts.thumb, rez);
3593 if (providerName === "youtube") {
3594 url = url.replace(/&t=((\d+)m)?(\d+)s/, function (match, p1, m, s) {
3595 return "&start=" + ((m ? parseInt(m, 10) * 60 : 0) + parseInt(s, 10));
3597 } else if (providerName === "vimeo") {
3598 url = url.replace("&%23", "#");
3604 // If it is found, then change content type and update the url
3607 if (!item.opts.thumb && !(item.opts.$thumb && item.opts.$thumb.length)) {
3608 item.opts.thumb = thumb;
3611 if (type === "iframe") {
3612 item.opts = $.extend(true, item.opts, {
3626 contentSource: provider,
3627 contentType: type === "image" ? "image" : provider == "gmap_place" || provider == "gmap_search" ? "map" : "video"
3630 item.type = item.opts.defaultType;
3634 // Load YouTube/Video API on request to detect when video finished playing
3635 var VideoAPILoader = {
3637 src: "https://www.youtube.com/iframe_api",
3644 src: "https://player.vimeo.com/api/player.js",
3650 load: function (vendor) {
3654 if (this[vendor].loaded) {
3655 setTimeout(function () {
3661 if (this[vendor].loading) {
3665 this[vendor].loading = true;
3667 script = document.createElement("script");
3668 script.type = "text/javascript";
3669 script.src = this[vendor].src;
3671 if (vendor === "youtube") {
3672 window.onYouTubeIframeAPIReady = function () {
3673 _this[vendor].loaded = true;
3677 script.onload = function () {
3678 _this[vendor].loaded = true;
3683 document.body.appendChild(script);
3685 done: function (vendor) {
3686 var instance, $el, player;
3688 if (vendor === "youtube") {
3689 delete window.onYouTubeIframeAPIReady;
3692 instance = $.fancybox.getInstance();
3695 $el = instance.current.$content.find("iframe");
3697 if (vendor === "youtube" && YT !== undefined && YT) {
3698 player = new YT.Player($el.attr("id"), {
3700 onStateChange: function (e) {
3707 } else if (vendor === "vimeo" && Vimeo !== undefined && Vimeo) {
3708 player = new Vimeo.Player($el);
3710 player.on("ended", function () {
3719 "afterShow.fb": function (e, instance, current) {
3720 if (instance.group.length > 1 && (current.contentSource === "youtube" || current.contentSource === "vimeo")) {
3721 VideoAPILoader.load(current.contentSource);
3726 // ==========================================================================
3729 // Adds touch guestures, handles click and tap events
3731 // ==========================================================================
3732 (function (window, document, $) {
3735 var requestAFrame = (function () {
3737 window.requestAnimationFrame ||
3738 window.webkitRequestAnimationFrame ||
3739 window.mozRequestAnimationFrame ||
3740 window.oRequestAnimationFrame ||
3741 // if all else fails, use setTimeout
3742 function (callback) {
3743 return window.setTimeout(callback, 1000 / 60);
3748 var cancelAFrame = (function () {
3750 window.cancelAnimationFrame ||
3751 window.webkitCancelAnimationFrame ||
3752 window.mozCancelAnimationFrame ||
3753 window.oCancelAnimationFrame ||
3755 window.clearTimeout(id);
3760 var getPointerXY = function (e) {
3763 e = e.originalEvent || e || window.e;
3764 e = e.touches && e.touches.length ? e.touches : e.changedTouches && e.changedTouches.length ? e.changedTouches : [e];
3766 for (var key in e) {
3772 } else if (e[key].clientX) {
3783 var distance = function (point2, point1, what) {
3784 if (!point1 || !point2) {
3789 return point2.x - point1.x;
3790 } else if (what === "y") {
3791 return point2.y - point1.y;
3794 return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
3797 var isClickable = function ($el) {
3799 $el.is('a,area,button,[role="button"],input,label,select,summary,textarea,video,audio,iframe') ||
3800 $.isFunction($el.get(0).onclick) ||
3801 $el.data("selectable")
3806 // Check for attributes like data-fancybox-next or data-fancybox-close
3807 for (var i = 0, atts = $el[0].attributes, n = atts.length; i < n; i++) {
3808 if (atts[i].nodeName.substr(0, 14) === "data-fancybox-") {
3816 var hasScrollbars = function (el) {
3817 var overflowY = window.getComputedStyle(el)["overflow-y"],
3818 overflowX = window.getComputedStyle(el)["overflow-x"],
3819 vertical = (overflowY === "scroll" || overflowY === "auto") && el.scrollHeight > el.clientHeight,
3820 horizontal = (overflowX === "scroll" || overflowX === "auto") && el.scrollWidth > el.clientWidth;
3822 return vertical || horizontal;
3825 var isScrollable = function ($el) {
3829 rez = hasScrollbars($el.get(0));
3837 if (!$el.length || $el.hasClass("fancybox-stage") || $el.is("body")) {
3845 var Guestures = function (instance) {
3848 self.instance = instance;
3850 self.$bg = instance.$refs.bg;
3851 self.$stage = instance.$refs.stage;
3852 self.$container = instance.$refs.container;
3856 self.$container.on("touchstart.fb.touch mousedown.fb.touch", $.proxy(self, "ontouchstart"));
3859 Guestures.prototype.destroy = function () {
3862 self.$container.off(".fb.touch");
3864 $(document).off(".fb.touch");
3866 if (self.requestId) {
3867 cancelAFrame(self.requestId);
3868 self.requestId = null;
3872 clearTimeout(self.tapped);
3877 Guestures.prototype.ontouchstart = function (e) {
3879 $target = $(e.target),
3880 instance = self.instance,
3881 current = instance.current,
3882 $slide = current.$slide,
3883 $content = current.$content,
3884 isTouchDevice = e.type == "touchstart";
3886 // Do not respond to both (touch and mouse) events
3887 if (isTouchDevice) {
3888 self.$container.off("mousedown.fb.touch");
3891 // Ignore right click
3892 if (e.originalEvent && e.originalEvent.button == 2) {
3896 // Ignore taping on links, buttons, input elements
3897 if (!$slide.length || !$target.length || isClickable($target) || isClickable($target.parent())) {
3900 // Ignore clicks on the scrollbar
3901 if (!$target.is("img") && e.originalEvent.clientX > $target[0].clientWidth + $target.offset().left) {
3905 // Ignore clicks while zooming or closing
3906 if (!current || instance.isAnimating || current.$slide.hasClass("fancybox-animated")) {
3907 e.stopPropagation();
3913 self.realPoints = self.startPoints = getPointerXY(e);
3915 if (!self.startPoints.length) {
3919 // Allow other scripts to catch touch event if "touch" is set to false
3920 if (current.touch) {
3921 e.stopPropagation();
3924 self.startEvent = e;
3927 self.$target = $target;
3928 self.$content = $content;
3929 self.opts = current.opts.touch;
3931 self.isPanning = false;
3932 self.isSwiping = false;
3933 self.isZooming = false;
3934 self.isScrolling = false;
3935 self.canPan = instance.canPan();
3937 self.startTime = new Date().getTime();
3938 self.distanceX = self.distanceY = self.distance = 0;
3940 self.canvasWidth = Math.round($slide[0].clientWidth);
3941 self.canvasHeight = Math.round($slide[0].clientHeight);
3943 self.contentLastPos = null;
3944 self.contentStartPos = $.fancybox.getTranslate(self.$content) || {
3948 self.sliderStartPos = $.fancybox.getTranslate($slide);
3950 // Since position will be absolute, but we need to make it relative to the stage
3951 self.stagePos = $.fancybox.getTranslate(instance.$refs.stage);
3953 self.sliderStartPos.top -= self.stagePos.top;
3954 self.sliderStartPos.left -= self.stagePos.left;
3956 self.contentStartPos.top -= self.stagePos.top;
3957 self.contentStartPos.left -= self.stagePos.left;
3961 .on(isTouchDevice ? "touchend.fb.touch touchcancel.fb.touch" : "mouseup.fb.touch mouseleave.fb.touch", $.proxy(self, "ontouchend"))
3962 .on(isTouchDevice ? "touchmove.fb.touch" : "mousemove.fb.touch", $.proxy(self, "ontouchmove"));
3964 if ($.fancybox.isMobile) {
3965 document.addEventListener("scroll", self.onscroll, true);
3968 // Skip if clicked outside the sliding area
3969 if (!(self.opts || self.canPan) || !($target.is(self.$stage) || self.$stage.find($target).length)) {
3970 if ($target.is(".fancybox-image")) {
3974 if (!($.fancybox.isMobile && $target.parents(".fancybox-caption").length)) {
3979 self.isScrollable = isScrollable($target) || isScrollable($target.parent());
3981 // Check if element is scrollable and try to prevent default behavior (scrolling)
3982 if (!($.fancybox.isMobile && self.isScrollable)) {
3986 // One finger or mouse click - swipe or pan an image
3987 if (self.startPoints.length === 1 || current.hasError) {
3989 $.fancybox.stop(self.$content);
3991 self.isPanning = true;
3993 self.isSwiping = true;
3996 self.$container.addClass("fancybox-is-grabbing");
3999 // Two fingers - zoom image
4000 if (self.startPoints.length === 2 && current.type === "image" && (current.isLoaded || current.$ghost)) {
4001 self.canTap = false;
4002 self.isSwiping = false;
4003 self.isPanning = false;
4005 self.isZooming = true;
4007 $.fancybox.stop(self.$content);
4009 self.centerPointStartX = (self.startPoints[0].x + self.startPoints[1].x) * 0.5 - $(window).scrollLeft();
4010 self.centerPointStartY = (self.startPoints[0].y + self.startPoints[1].y) * 0.5 - $(window).scrollTop();
4012 self.percentageOfImageAtPinchPointX = (self.centerPointStartX - self.contentStartPos.left) / self.contentStartPos.width;
4013 self.percentageOfImageAtPinchPointY = (self.centerPointStartY - self.contentStartPos.top) / self.contentStartPos.height;
4015 self.startDistanceBetweenFingers = distance(self.startPoints[0], self.startPoints[1]);
4019 Guestures.prototype.onscroll = function (e) {
4022 self.isScrolling = true;
4024 document.removeEventListener("scroll", self.onscroll, true);
4027 Guestures.prototype.ontouchmove = function (e) {
4030 // Make sure user has not released over iframe or disabled element
4031 if (e.originalEvent.buttons !== undefined && e.originalEvent.buttons === 0) {
4036 if (self.isScrolling) {
4037 self.canTap = false;
4041 self.newPoints = getPointerXY(e);
4043 if (!(self.opts || self.canPan) || !self.newPoints.length || !self.newPoints.length) {
4047 if (!(self.isSwiping && self.isSwiping === true)) {
4051 self.distanceX = distance(self.newPoints[0], self.startPoints[0], "x");
4052 self.distanceY = distance(self.newPoints[0], self.startPoints[0], "y");
4054 self.distance = distance(self.newPoints[0], self.startPoints[0]);
4056 // Skip false ontouchmove events (Chrome)
4057 if (self.distance > 0) {
4058 if (self.isSwiping) {
4060 } else if (self.isPanning) {
4062 } else if (self.isZooming) {
4068 Guestures.prototype.onSwipe = function (e) {
4070 instance = self.instance,
4071 swiping = self.isSwiping,
4072 left = self.sliderStartPos.left || 0,
4075 // If direction is not yet determined
4076 if (swiping === true) {
4077 // We need at least 10px distance to correctly calculate an angle
4078 if (Math.abs(self.distance) > 10) {
4079 self.canTap = false;
4081 if (instance.group.length < 2 && self.opts.vertical) {
4082 self.isSwiping = "y";
4083 } else if (instance.isDragging || self.opts.vertical === false || (self.opts.vertical === "auto" && $(window).width() > 800)) {
4084 self.isSwiping = "x";
4086 angle = Math.abs((Math.atan2(self.distanceY, self.distanceX) * 180) / Math.PI);
4088 self.isSwiping = angle > 45 && angle < 135 ? "y" : "x";
4091 if (self.isSwiping === "y" && $.fancybox.isMobile && self.isScrollable) {
4092 self.isScrolling = true;
4097 instance.isDragging = self.isSwiping;
4099 // Reset points to avoid jumping, because we dropped first swipes to calculate the angle
4100 self.startPoints = self.newPoints;
4102 $.each(instance.slides, function (index, slide) {
4103 var slidePos, stagePos;
4105 $.fancybox.stop(slide.$slide);
4107 slidePos = $.fancybox.getTranslate(slide.$slide);
4108 stagePos = $.fancybox.getTranslate(instance.$refs.stage);
4114 "transition-duration": ""
4116 .removeClass("fancybox-animated")
4117 .removeClass(function (index, className) {
4118 return (className.match(/(^|\s)fancybox-fx-\S+/g) || []).join(" ");
4121 if (slide.pos === instance.current.pos) {
4122 self.sliderStartPos.top = slidePos.top - stagePos.top;
4123 self.sliderStartPos.left = slidePos.left - stagePos.left;
4126 $.fancybox.setTranslate(slide.$slide, {
4127 top: slidePos.top - stagePos.top,
4128 left: slidePos.left - stagePos.left
4133 if (instance.SlideShow && instance.SlideShow.isActive) {
4134 instance.SlideShow.stop();
4142 if (swiping == "x") {
4144 self.distanceX > 0 &&
4145 (self.instance.group.length < 2 || (self.instance.current.index === 0 && !self.instance.current.opts.loop))
4147 left = left + Math.pow(self.distanceX, 0.8);
4149 self.distanceX < 0 &&
4150 (self.instance.group.length < 2 ||
4151 (self.instance.current.index === self.instance.group.length - 1 && !self.instance.current.opts.loop))
4153 left = left - Math.pow(-self.distanceX, 0.8);
4155 left = left + self.distanceX;
4159 self.sliderLastPos = {
4160 top: swiping == "x" ? 0 : self.sliderStartPos.top + self.distanceY,
4164 if (self.requestId) {
4165 cancelAFrame(self.requestId);
4167 self.requestId = null;
4170 self.requestId = requestAFrame(function () {
4171 if (self.sliderLastPos) {
4172 $.each(self.instance.slides, function (index, slide) {
4173 var pos = slide.pos - self.instance.currPos;
4175 $.fancybox.setTranslate(slide.$slide, {
4176 top: self.sliderLastPos.top,
4177 left: self.sliderLastPos.left + pos * self.canvasWidth + pos * slide.opts.gutter
4181 self.$container.addClass("fancybox-is-sliding");
4186 Guestures.prototype.onPan = function () {
4189 // Prevent accidental movement (sometimes, when tapping casually, finger can move a bit)
4190 if (distance(self.newPoints[0], self.realPoints[0]) < ($.fancybox.isMobile ? 10 : 5)) {
4191 self.startPoints = self.newPoints;
4195 self.canTap = false;
4197 self.contentLastPos = self.limitMovement();
4199 if (self.requestId) {
4200 cancelAFrame(self.requestId);
4203 self.requestId = requestAFrame(function () {
4204 $.fancybox.setTranslate(self.$content, self.contentLastPos);
4208 // Make panning sticky to the edges
4209 Guestures.prototype.limitMovement = function () {
4212 var canvasWidth = self.canvasWidth;
4213 var canvasHeight = self.canvasHeight;
4215 var distanceX = self.distanceX;
4216 var distanceY = self.distanceY;
4218 var contentStartPos = self.contentStartPos;
4220 var currentOffsetX = contentStartPos.left;
4221 var currentOffsetY = contentStartPos.top;
4223 var currentWidth = contentStartPos.width;
4224 var currentHeight = contentStartPos.height;
4226 var minTranslateX, minTranslateY, maxTranslateX, maxTranslateY, newOffsetX, newOffsetY;
4228 if (currentWidth > canvasWidth) {
4229 newOffsetX = currentOffsetX + distanceX;
4231 newOffsetX = currentOffsetX;
4234 newOffsetY = currentOffsetY + distanceY;
4236 // Slow down proportionally to traveled distance
4237 minTranslateX = Math.max(0, canvasWidth * 0.5 - currentWidth * 0.5);
4238 minTranslateY = Math.max(0, canvasHeight * 0.5 - currentHeight * 0.5);
4240 maxTranslateX = Math.min(canvasWidth - currentWidth, canvasWidth * 0.5 - currentWidth * 0.5);
4241 maxTranslateY = Math.min(canvasHeight - currentHeight, canvasHeight * 0.5 - currentHeight * 0.5);
4244 if (distanceX > 0 && newOffsetX > minTranslateX) {
4245 newOffsetX = minTranslateX - 1 + Math.pow(-minTranslateX + currentOffsetX + distanceX, 0.8) || 0;
4249 if (distanceX < 0 && newOffsetX < maxTranslateX) {
4250 newOffsetX = maxTranslateX + 1 - Math.pow(maxTranslateX - currentOffsetX - distanceX, 0.8) || 0;
4254 if (distanceY > 0 && newOffsetY > minTranslateY) {
4255 newOffsetY = minTranslateY - 1 + Math.pow(-minTranslateY + currentOffsetY + distanceY, 0.8) || 0;
4259 if (distanceY < 0 && newOffsetY < maxTranslateY) {
4260 newOffsetY = maxTranslateY + 1 - Math.pow(maxTranslateY - currentOffsetY - distanceY, 0.8) || 0;
4269 Guestures.prototype.limitPosition = function (newOffsetX, newOffsetY, newWidth, newHeight) {
4272 var canvasWidth = self.canvasWidth;
4273 var canvasHeight = self.canvasHeight;
4275 if (newWidth > canvasWidth) {
4276 newOffsetX = newOffsetX > 0 ? 0 : newOffsetX;
4277 newOffsetX = newOffsetX < canvasWidth - newWidth ? canvasWidth - newWidth : newOffsetX;
4279 // Center horizontally
4280 newOffsetX = Math.max(0, canvasWidth / 2 - newWidth / 2);
4283 if (newHeight > canvasHeight) {
4284 newOffsetY = newOffsetY > 0 ? 0 : newOffsetY;
4285 newOffsetY = newOffsetY < canvasHeight - newHeight ? canvasHeight - newHeight : newOffsetY;
4287 // Center vertically
4288 newOffsetY = Math.max(0, canvasHeight / 2 - newHeight / 2);
4297 Guestures.prototype.onZoom = function () {
4300 // Calculate current distance between points to get pinch ratio and new width and height
4301 var contentStartPos = self.contentStartPos;
4303 var currentWidth = contentStartPos.width;
4304 var currentHeight = contentStartPos.height;
4306 var currentOffsetX = contentStartPos.left;
4307 var currentOffsetY = contentStartPos.top;
4309 var endDistanceBetweenFingers = distance(self.newPoints[0], self.newPoints[1]);
4311 var pinchRatio = endDistanceBetweenFingers / self.startDistanceBetweenFingers;
4313 var newWidth = Math.floor(currentWidth * pinchRatio);
4314 var newHeight = Math.floor(currentHeight * pinchRatio);
4316 // This is the translation due to pinch-zooming
4317 var translateFromZoomingX = (currentWidth - newWidth) * self.percentageOfImageAtPinchPointX;
4318 var translateFromZoomingY = (currentHeight - newHeight) * self.percentageOfImageAtPinchPointY;
4320 // Point between the two touches
4321 var centerPointEndX = (self.newPoints[0].x + self.newPoints[1].x) / 2 - $(window).scrollLeft();
4322 var centerPointEndY = (self.newPoints[0].y + self.newPoints[1].y) / 2 - $(window).scrollTop();
4324 // And this is the translation due to translation of the centerpoint
4325 // between the two fingers
4326 var translateFromTranslatingX = centerPointEndX - self.centerPointStartX;
4327 var translateFromTranslatingY = centerPointEndY - self.centerPointStartY;
4329 // The new offset is the old/current one plus the total translation
4330 var newOffsetX = currentOffsetX + (translateFromZoomingX + translateFromTranslatingX);
4331 var newOffsetY = currentOffsetY + (translateFromZoomingY + translateFromTranslatingY);
4340 self.canTap = false;
4342 self.newWidth = newWidth;
4343 self.newHeight = newHeight;
4345 self.contentLastPos = newPos;
4347 if (self.requestId) {
4348 cancelAFrame(self.requestId);
4351 self.requestId = requestAFrame(function () {
4352 $.fancybox.setTranslate(self.$content, self.contentLastPos);
4356 Guestures.prototype.ontouchend = function (e) {
4359 var swiping = self.isSwiping;
4360 var panning = self.isPanning;
4361 var zooming = self.isZooming;
4362 var scrolling = self.isScrolling;
4364 self.endPoints = getPointerXY(e);
4365 self.dMs = Math.max(new Date().getTime() - self.startTime, 1);
4367 self.$container.removeClass("fancybox-is-grabbing");
4369 $(document).off(".fb.touch");
4371 document.removeEventListener("scroll", self.onscroll, true);
4373 if (self.requestId) {
4374 cancelAFrame(self.requestId);
4376 self.requestId = null;
4379 self.isSwiping = false;
4380 self.isPanning = false;
4381 self.isZooming = false;
4382 self.isScrolling = false;
4384 self.instance.isDragging = false;
4387 return self.onTap(e);
4393 self.velocityX = (self.distanceX / self.dMs) * 0.5;
4394 self.velocityY = (self.distanceY / self.dMs) * 0.5;
4398 } else if (zooming) {
4401 self.endSwiping(swiping, scrolling);
4407 Guestures.prototype.endSwiping = function (swiping, scrolling) {
4410 len = self.instance.group.length,
4411 distanceX = Math.abs(self.distanceX),
4412 canAdvance = swiping == "x" && len > 1 && ((self.dMs > 130 && distanceX > 10) || distanceX > 50),
4415 self.sliderLastPos = null;
4417 // Close if swiped vertically / navigate if horizontally
4418 if (swiping == "y" && !scrolling && Math.abs(self.distanceY) > 50) {
4419 // Continue vertical movement
4421 self.instance.current.$slide, {
4422 top: self.sliderStartPos.top + self.distanceY + self.velocityY * 150,
4427 ret = self.instance.close(true, 250);
4428 } else if (canAdvance && self.distanceX > 0) {
4429 ret = self.instance.previous(speedX);
4430 } else if (canAdvance && self.distanceX < 0) {
4431 ret = self.instance.next(speedX);
4434 if (ret === false && (swiping == "x" || swiping == "y")) {
4435 self.instance.centerSlide(200);
4438 self.$container.removeClass("fancybox-is-sliding");
4441 // Limit panning from edges
4442 // ========================
4443 Guestures.prototype.endPanning = function () {
4449 if (!self.contentLastPos) {
4453 if (self.opts.momentum === false || self.dMs > 350) {
4454 newOffsetX = self.contentLastPos.left;
4455 newOffsetY = self.contentLastPos.top;
4457 // Continue movement
4458 newOffsetX = self.contentLastPos.left + self.velocityX * 500;
4459 newOffsetY = self.contentLastPos.top + self.velocityY * 500;
4462 newPos = self.limitPosition(newOffsetX, newOffsetY, self.contentStartPos.width, self.contentStartPos.height);
4464 newPos.width = self.contentStartPos.width;
4465 newPos.height = self.contentStartPos.height;
4467 $.fancybox.animate(self.$content, newPos, 366);
4470 Guestures.prototype.endZooming = function () {
4473 var current = self.instance.current;
4475 var newOffsetX, newOffsetY, newPos, reset;
4477 var newWidth = self.newWidth;
4478 var newHeight = self.newHeight;
4480 if (!self.contentLastPos) {
4484 newOffsetX = self.contentLastPos.left;
4485 newOffsetY = self.contentLastPos.top;
4496 // Reset scalex/scaleY values; this helps for perfomance and does not break animation
4497 $.fancybox.setTranslate(self.$content, reset);
4499 if (newWidth < self.canvasWidth && newHeight < self.canvasHeight) {
4500 self.instance.scaleToFit(150);
4501 } else if (newWidth > current.width || newHeight > current.height) {
4502 self.instance.scaleToActual(self.centerPointStartX, self.centerPointStartY, 150);
4504 newPos = self.limitPosition(newOffsetX, newOffsetY, newWidth, newHeight);
4506 $.fancybox.animate(self.$content, newPos, 150);
4510 Guestures.prototype.onTap = function (e) {
4512 var $target = $(e.target);
4514 var instance = self.instance;
4515 var current = instance.current;
4517 var endPoints = (e && getPointerXY(e)) || self.startPoints;
4519 var tapX = endPoints[0] ? endPoints[0].x - $(window).scrollLeft() - self.stagePos.left : 0;
4520 var tapY = endPoints[0] ? endPoints[0].y - $(window).scrollTop() - self.stagePos.top : 0;
4524 var process = function (prefix) {
4525 var action = current.opts[prefix];
4527 if ($.isFunction(action)) {
4528 action = action.apply(instance, [current, e]);
4537 instance.close(self.startEvent);
4541 case "toggleControls":
4542 instance.toggleControls();
4552 if (instance.group.length > 1) {
4555 instance.close(self.startEvent);
4561 if (current.type == "image" && (current.isLoaded || current.$ghost)) {
4562 if (instance.canPan()) {
4563 instance.scaleToFit();
4564 } else if (instance.isScaledDown()) {
4565 instance.scaleToActual(tapX, tapY);
4566 } else if (instance.group.length < 2) {
4567 instance.close(self.startEvent);
4575 // Ignore right click
4576 if (e.originalEvent && e.originalEvent.button == 2) {
4580 // Skip if clicked on the scrollbar
4581 if (!$target.is("img") && tapX > $target[0].clientWidth + $target.offset().left) {
4585 // Check where is clicked
4586 if ($target.is(".fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-container")) {
4588 } else if ($target.is(".fancybox-slide")) {
4591 instance.current.$content &&
4592 instance.current.$content
4595 .filter($target).length
4602 // Check if this is a double tap
4604 // Stop previously created single tap
4605 clearTimeout(self.tapped);
4608 // Skip if distance between taps is too big
4609 if (Math.abs(tapX - self.tapX) > 50 || Math.abs(tapY - self.tapY) > 50) {
4613 // OK, now we assume that this is a double-tap
4614 process("dblclick" + where);
4616 // Single tap will be processed if user has not clicked second time within 300ms
4617 // or there is no need to wait for double-tap
4621 if (current.opts["dblclick" + where] && current.opts["dblclick" + where] !== current.opts["click" + where]) {
4622 self.tapped = setTimeout(function () {
4625 if (!instance.isAnimating) {
4626 process("click" + where);
4630 process("click" + where);
4638 .on("onActivate.fb", function (e, instance) {
4639 if (instance && !instance.Guestures) {
4640 instance.Guestures = new Guestures(instance);
4643 .on("beforeClose.fb", function (e, instance) {
4644 if (instance && instance.Guestures) {
4645 instance.Guestures.destroy();
4648 })(window, document, jQuery);
4649 // ==========================================================================
4652 // Enables slideshow functionality
4654 // Example of usage:
4655 // $.fancybox.getInstance().SlideShow.start()
4657 // ==========================================================================
4658 (function (document, $) {
4661 $.extend(true, $.fancybox.defaults, {
4663 slideShow: '<button data-fancybox-play class="fancybox-button fancybox-button--play" title="{{PLAY_START}}">' +
4664 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 5.4v13.2l11-6.6z"/></svg>' +
4665 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.33 5.75h2.2v12.5h-2.2V5.75zm5.15 0h2.2v12.5h-2.2V5.75z"/></svg>' +
4675 var SlideShow = function (instance) {
4676 this.instance = instance;
4680 $.extend(SlideShow.prototype, {
4687 instance = self.instance,
4688 opts = instance.group[instance.currIndex].opts.slideShow;
4690 self.$button = instance.$refs.toolbar.find("[data-fancybox-play]").on("click", function () {
4694 if (instance.group.length < 2 || !opts) {
4695 self.$button.hide();
4696 } else if (opts.progress) {
4697 self.$progress = $('<div class="fancybox-progress"></div>').appendTo(instance.$refs.inner);
4701 set: function (force) {
4703 instance = self.instance,
4704 current = instance.current;
4706 // Check if reached last element
4707 if (current && (force === true || current.opts.loop || instance.currIndex < instance.group.length - 1)) {
4708 if (self.isActive && current.contentType !== "video") {
4709 if (self.$progress) {
4710 $.fancybox.animate(self.$progress.show(), {
4712 }, current.opts.slideShow.speed);
4715 self.timer = setTimeout(function () {
4716 if (!instance.current.opts.loop && instance.current.index == instance.group.length - 1) {
4721 }, current.opts.slideShow.speed);
4725 instance.idleSecondsCounter = 0;
4726 instance.showControls();
4730 clear: function () {
4733 clearTimeout(self.timer);
4737 if (self.$progress) {
4738 self.$progress.removeAttr("style").hide();
4742 start: function () {
4744 current = self.instance.current;
4748 .attr("title", (current.opts.i18n[current.opts.lang] || current.opts.i18n.en).PLAY_STOP)
4749 .removeClass("fancybox-button--play")
4750 .addClass("fancybox-button--pause");
4752 self.isActive = true;
4754 if (current.isComplete) {
4758 self.instance.trigger("onSlideShowChange", true);
4764 current = self.instance.current;
4769 .attr("title", (current.opts.i18n[current.opts.lang] || current.opts.i18n.en).PLAY_START)
4770 .removeClass("fancybox-button--pause")
4771 .addClass("fancybox-button--play");
4773 self.isActive = false;
4775 self.instance.trigger("onSlideShowChange", false);
4777 if (self.$progress) {
4778 self.$progress.removeAttr("style").hide();
4782 toggle: function () {
4785 if (self.isActive) {
4794 "onInit.fb": function (e, instance) {
4795 if (instance && !instance.SlideShow) {
4796 instance.SlideShow = new SlideShow(instance);
4800 "beforeShow.fb": function (e, instance, current, firstRun) {
4801 var SlideShow = instance && instance.SlideShow;
4804 if (SlideShow && current.opts.slideShow.autoStart) {
4807 } else if (SlideShow && SlideShow.isActive) {
4812 "afterShow.fb": function (e, instance, current) {
4813 var SlideShow = instance && instance.SlideShow;
4815 if (SlideShow && SlideShow.isActive) {
4820 "afterKeydown.fb": function (e, instance, current, keypress, keycode) {
4821 var SlideShow = instance && instance.SlideShow;
4824 if (SlideShow && current.opts.slideShow && (keycode === 80 || keycode === 32) && !$(document.activeElement).is("button,a,input")) {
4825 keypress.preventDefault();
4831 "beforeClose.fb onDeactivate.fb": function (e, instance) {
4832 var SlideShow = instance && instance.SlideShow;
4840 // Page Visibility API to pause slideshow when window is not active
4841 $(document).on("visibilitychange", function () {
4842 var instance = $.fancybox.getInstance(),
4843 SlideShow = instance && instance.SlideShow;
4845 if (SlideShow && SlideShow.isActive) {
4846 if (document.hidden) {
4853 })(document, jQuery);
4854 // ==========================================================================
4857 // Adds fullscreen functionality
4859 // ==========================================================================
4860 (function (document, $) {
4863 // Collection of methods supported by user browser
4864 var fn = (function () {
4866 ["requestFullscreen", "exitFullscreen", "fullscreenElement", "fullscreenEnabled", "fullscreenchange", "fullscreenerror"],
4869 "webkitRequestFullscreen",
4870 "webkitExitFullscreen",
4871 "webkitFullscreenElement",
4872 "webkitFullscreenEnabled",
4873 "webkitfullscreenchange",
4874 "webkitfullscreenerror"
4876 // old WebKit (Safari 5.1)
4878 "webkitRequestFullScreen",
4879 "webkitCancelFullScreen",
4880 "webkitCurrentFullScreenElement",
4881 "webkitCancelFullScreen",
4882 "webkitfullscreenchange",
4883 "webkitfullscreenerror"
4886 "mozRequestFullScreen",
4887 "mozCancelFullScreen",
4888 "mozFullScreenElement",
4889 "mozFullScreenEnabled",
4890 "mozfullscreenchange",
4891 "mozfullscreenerror"
4893 ["msRequestFullscreen", "msExitFullscreen", "msFullscreenElement", "msFullscreenEnabled", "MSFullscreenChange", "MSFullscreenError"]
4898 for (var i = 0; i < fnMap.length; i++) {
4901 if (val && val[1] in document) {
4902 for (var j = 0; j < val.length; j++) {
4903 ret[fnMap[0][j]] = val[j];
4915 request: function (elem) {
4916 elem = elem || document.documentElement;
4918 elem[fn.requestFullscreen](elem.ALLOW_KEYBOARD_INPUT);
4921 document[fn.exitFullscreen]();
4923 toggle: function (elem) {
4924 elem = elem || document.documentElement;
4926 if (this.isFullscreen()) {
4932 isFullscreen: function () {
4933 return Boolean(document[fn.fullscreenElement]);
4935 enabled: function () {
4936 return Boolean(document[fn.fullscreenEnabled]);
4940 $.extend(true, $.fancybox.defaults, {
4942 fullScreen: '<button data-fancybox-fullscreen class="fancybox-button fancybox-button--fsenter" title="{{FULL_SCREEN}}">' +
4943 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>' +
4944 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5zm3-8H5v2h5V5H8zm6 11h2v-3h3v-2h-5zm2-11V5h-2v5h5V8z"/></svg>' +
4952 $(document).on(fn.fullscreenchange, function () {
4953 var isFullscreen = FullScreen.isFullscreen(),
4954 instance = $.fancybox.getInstance();
4957 // If image is zooming, then force to stop and reposition properly
4958 if (instance.current && instance.current.type === "image" && instance.isAnimating) {
4959 instance.isAnimating = false;
4961 instance.update(true, true, 0);
4963 if (!instance.isComplete) {
4964 instance.complete();
4968 instance.trigger("onFullscreenChange", isFullscreen);
4970 instance.$refs.container.toggleClass("fancybox-is-fullscreen", isFullscreen);
4972 instance.$refs.toolbar
4973 .find("[data-fancybox-fullscreen]")
4974 .toggleClass("fancybox-button--fsenter", !isFullscreen)
4975 .toggleClass("fancybox-button--fsexit", isFullscreen);
4981 "onInit.fb": function (e, instance) {
4985 instance.$refs.toolbar.find("[data-fancybox-fullscreen]").remove();
4990 if (instance && instance.group[instance.currIndex].opts.fullScreen) {
4991 $container = instance.$refs.container;
4993 $container.on("click.fb-fullscreen", "[data-fancybox-fullscreen]", function (e) {
4994 e.stopPropagation();
4997 FullScreen.toggle();
5000 if (instance.opts.fullScreen && instance.opts.fullScreen.autoStart === true) {
5001 FullScreen.request();
5005 instance.FullScreen = FullScreen;
5006 } else if (instance) {
5007 instance.$refs.toolbar.find("[data-fancybox-fullscreen]").hide();
5011 "afterKeydown.fb": function (e, instance, current, keypress, keycode) {
5013 if (instance && instance.FullScreen && keycode === 70) {
5014 keypress.preventDefault();
5016 instance.FullScreen.toggle();
5020 "beforeClose.fb": function (e, instance) {
5021 if (instance && instance.FullScreen && instance.$refs.container.hasClass("fancybox-is-fullscreen")) {
5026 })(document, jQuery);
5027 // ==========================================================================
5030 // Displays thumbnails in a grid
5032 // ==========================================================================
5033 (function (document, $) {
5036 var CLASS = "fancybox-thumbs",
5037 CLASS_ACTIVE = CLASS + "-active";
5039 // Make sure there are default values
5040 $.fancybox.defaults = $.extend(
5043 thumbs: '<button data-fancybox-thumbs class="fancybox-button fancybox-button--thumbs" title="{{THUMBS}}">' +
5044 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.59 14.59h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76H5.65v-3.76zm8.94-4.47h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76h-3.76v-3.76zm-4.47 0h3.76v3.76H5.65v-3.76zm8.94-4.47h3.76v3.76h-3.76V5.65zm-4.47 0h3.76v3.76h-3.76V5.65zm-4.47 0h3.76v3.76H5.65V5.65z"/></svg>' +
5048 autoStart: false, // Display thumbnails on opening
5049 hideOnClose: true, // Hide thumbnail grid when closing animation starts
5050 parentEl: ".fancybox-container", // Container is injected into this element
5051 axis: "y" // Vertical (y) or horizontal (x) scrolling
5057 var FancyThumbs = function (instance) {
5058 this.init(instance);
5061 $.extend(FancyThumbs.prototype, {
5068 init: function (instance) {
5070 group = instance.group,
5073 self.instance = instance;
5074 self.opts = group[instance.currIndex].opts.thumbs;
5076 instance.Thumbs = self;
5078 self.$button = instance.$refs.toolbar.find("[data-fancybox-thumbs]");
5080 // Enable thumbs if at least two group items have thumbnails
5081 for (var i = 0, len = group.length; i < len; i++) {
5082 if (group[i].thumb) {
5091 if (enabled > 1 && !!self.opts) {
5092 self.$button.removeAttr("style").on("click", function () {
5096 self.isActive = true;
5098 self.$button.hide();
5102 create: function () {
5104 instance = self.instance,
5105 parentEl = self.opts.parentEl,
5110 // Create main element
5111 self.$grid = $('<div class="' + CLASS + " " + CLASS + "-" + self.opts.axis + '"></div>').appendTo(
5112 instance.$refs.container
5118 // Add "click" event that performs gallery navigation
5119 self.$grid.on("click", "a", function () {
5120 instance.jumpTo($(this).attr("data-index"));
5126 self.$list = $('<div class="' + CLASS + '__list">').appendTo(self.$grid);
5129 $.each(instance.group, function (i, item) {
5132 if (!src && item.type === "image") {
5137 '<a href="javascript:;" tabindex="0" data-index="' +
5140 (src && src.length ? ' style="background-image:url(' + src + ')"' : 'class="fancybox-thumbs-missing"') +
5145 self.$list[0].innerHTML = list.join("");
5147 if (self.opts.axis === "x") {
5148 // Set fixed width for list element to enable horizontal scrolling
5150 parseInt(self.$grid.css("padding-right"), 10) +
5151 instance.group.length *
5160 focus: function (duration) {
5167 if (!self.instance.current) {
5173 .removeClass(CLASS_ACTIVE)
5174 .filter('[data-index="' + self.instance.current.index + '"]')
5175 .addClass(CLASS_ACTIVE);
5177 thumbPos = thumb.position();
5179 // Check if need to scroll to make current thumb visible
5180 if (self.opts.axis === "y" && (thumbPos.top < 0 || thumbPos.top > $list.height() - thumb.outerHeight())) {
5181 $list.stop().animate({
5182 scrollTop: $list.scrollTop() + thumbPos.top
5187 self.opts.axis === "x" &&
5188 (thumbPos.left < $grid.scrollLeft() || thumbPos.left > $grid.scrollLeft() + ($grid.width() - thumb.outerWidth()))
5194 scrollLeft: thumbPos.left
5201 update: function () {
5203 that.instance.$refs.container.toggleClass("fancybox-show-thumbs", this.isVisible);
5205 if (that.isVisible) {
5210 that.instance.trigger("onThumbsShow");
5213 } else if (that.$grid) {
5214 that.instance.trigger("onThumbsHide");
5217 // Update content position
5218 that.instance.update();
5222 this.isVisible = false;
5227 this.isVisible = true;
5231 toggle: function () {
5232 this.isVisible = !this.isVisible;
5238 "onInit.fb": function (e, instance) {
5241 if (instance && !instance.Thumbs) {
5242 Thumbs = new FancyThumbs(instance);
5244 if (Thumbs.isActive && Thumbs.opts.autoStart === true) {
5250 "beforeShow.fb": function (e, instance, item, firstRun) {
5251 var Thumbs = instance && instance.Thumbs;
5253 if (Thumbs && Thumbs.isVisible) {
5254 Thumbs.focus(firstRun ? 0 : 250);
5258 "afterKeydown.fb": function (e, instance, current, keypress, keycode) {
5259 var Thumbs = instance && instance.Thumbs;
5262 if (Thumbs && Thumbs.isActive && keycode === 71) {
5263 keypress.preventDefault();
5269 "beforeClose.fb": function (e, instance) {
5270 var Thumbs = instance && instance.Thumbs;
5272 if (Thumbs && Thumbs.isVisible && Thumbs.opts.hideOnClose !== false) {
5273 Thumbs.$grid.hide();
5277 })(document, jQuery);
5278 //// ==========================================================================
5281 // Displays simple form for sharing current url
5283 // ==========================================================================
5284 (function (document, $) {
5287 $.extend(true, $.fancybox.defaults, {
5289 share: '<button data-fancybox-share class="fancybox-button fancybox-button--share" title="{{SHARE}}">' +
5290 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.55 19c1.4-8.4 9.1-9.8 11.9-9.8V5l7 7-7 6.3v-3.5c-2.8 0-10.5 2.1-11.9 4.2z"/></svg>' +
5294 url: function (instance, item) {
5296 (!instance.currentHash && !(item.type === "inline" || item.type === "html") ? item.origSrc || item.src : false) || window.location
5299 tpl: '<div class="fancybox-share">' +
5300 "<h1>{{SHARE}}</h1>" +
5302 '<a class="fancybox-share__button fancybox-share__button--fb" href="https://www.facebook.com/sharer/sharer.php?u={{url}}">' +
5303 '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m287 456v-299c0-21 6-35 35-35h38v-63c-7-1-29-3-55-3-54 0-91 33-91 94v306m143-254h-205v72h196" /></svg>' +
5304 "<span>Facebook</span>" +
5306 '<a class="fancybox-share__button fancybox-share__button--tw" href="https://twitter.com/intent/tweet?url={{url}}&text={{descr}}">' +
5307 '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m456 133c-14 7-31 11-47 13 17-10 30-27 37-46-15 10-34 16-52 20-61-62-157-7-141 75-68-3-129-35-169-85-22 37-11 86 26 109-13 0-26-4-37-9 0 39 28 72 65 80-12 3-25 4-37 2 10 33 41 57 77 57-42 30-77 38-122 34 170 111 378-32 359-208 16-11 30-25 41-42z" /></svg>' +
5308 "<span>Twitter</span>" +
5310 '<a class="fancybox-share__button fancybox-share__button--pt" href="https://www.pinterest.com/pin/create/button/?url={{url}}&description={{descr}}&media={{media}}">' +
5311 '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m265 56c-109 0-164 78-164 144 0 39 15 74 47 87 5 2 10 0 12-5l4-19c2-6 1-8-3-13-9-11-15-25-15-45 0-58 43-110 113-110 62 0 96 38 96 88 0 67-30 122-73 122-24 0-42-19-36-44 6-29 20-60 20-81 0-19-10-35-31-35-25 0-44 26-44 60 0 21 7 36 7 36l-30 125c-8 37-1 83 0 87 0 3 4 4 5 2 2-3 32-39 42-75l16-64c8 16 31 29 56 29 74 0 124-67 124-157 0-69-58-132-146-132z" fill="#fff"/></svg>' +
5312 "<span>Pinterest</span>" +
5315 '<p><input class="fancybox-share__input" type="text" value="{{url_raw}}" onclick="select()" /></p>' +
5320 function escapeHtml(string) {
5332 return String(string).replace(/[&<>"'`=\/]/g, function (s) {
5333 return entityMap[s];
5337 $(document).on("click", "[data-fancybox-share]", function () {
5338 var instance = $.fancybox.getInstance(),
5339 current = instance.current || null,
5347 if ($.type(current.opts.share.url) === "function") {
5348 url = current.opts.share.url.apply(current, [instance, current]);
5351 tpl = current.opts.share.tpl
5352 .replace(/\{\{media\}\}/g, current.type === "image" ? encodeURIComponent(current.src) : "")
5353 .replace(/\{\{url\}\}/g, encodeURIComponent(url))
5354 .replace(/\{\{url_raw\}\}/g, escapeHtml(url))
5355 .replace(/\{\{descr\}\}/g, instance.$caption ? encodeURIComponent(instance.$caption.text()) : "");
5358 src: instance.translate(instance, tpl),
5362 animationEffect: false,
5363 afterLoad: function (shareInstance, shareCurrent) {
5364 // Close self if parent instance is closing
5365 instance.$refs.container.one("beforeClose.fb", function () {
5366 shareInstance.close(null, 0);
5369 // Opening links in a popup window
5370 shareCurrent.$content.find(".fancybox-share__button").click(function () {
5371 window.open(this.href, "Share", "width=550, height=450");
5381 })(document, jQuery);
5382 // ==========================================================================
5385 // Enables linking to each modal
5387 // ==========================================================================
5388 (function (window, document, $) {
5391 // Simple $.escapeSelector polyfill (for jQuery prior v3)
5392 if (!$.escapeSelector) {
5393 $.escapeSelector = function (sel) {
5394 var rcssescape = /([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;
5395 var fcssescape = function (ch, asCodePoint) {
5397 // U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
5402 // Control characters and (dependent upon position) numbers get escaped as code points
5403 return ch.slice(0, -1) + "\\" + ch.charCodeAt(ch.length - 1).toString(16) + " ";
5406 // Other potentially-special ASCII characters get backslash-escaped
5410 return (sel + "").replace(rcssescape, fcssescape);
5414 // Get info about gallery name and current index from url
5415 function parseUrl() {
5416 var hash = window.location.hash.substr(1),
5417 rez = hash.split("-"),
5418 index = rez.length > 1 && /^\+?\d+$/.test(rez[rez.length - 1]) ? parseInt(rez.pop(-1), 10) || 1 : 1,
5419 gallery = rez.join("-");
5423 /* Index is starting from 1 */
5424 index: index < 1 ? 1 : index,
5429 // Trigger click evnt on links to open new fancyBox instance
5430 function triggerFromUrl(url) {
5431 if (url.gallery !== "") {
5432 // If we can find element matching 'data-fancybox' atribute,
5433 // then triggering click event should start fancyBox
5434 $("[data-fancybox='" + $.escapeSelector(url.gallery) + "']")
5437 .trigger("click.fb-start");
5441 // Get gallery name from current instance
5442 function getGalleryID(instance) {
5449 opts = instance.current ? instance.current.opts : instance.opts;
5450 ret = opts.hash || (opts.$orig ? opts.$orig.data("fancybox") || opts.$orig.data("fancybox-trigger") : "");
5452 return ret === "" ? false : ret;
5455 // Start when DOM becomes ready
5457 // Check if user has disabled this module
5458 if ($.fancybox.defaults.hash === false) {
5462 // Update hash when opening/closing fancyBox
5464 "onInit.fb": function (e, instance) {
5467 if (instance.group[instance.currIndex].opts.hash === false) {
5472 gallery = getGalleryID(instance);
5474 // Make sure gallery start index matches index from hash
5475 if (gallery && url.gallery && gallery == url.gallery) {
5476 instance.currIndex = url.index - 1;
5480 "beforeShow.fb": function (e, instance, current, firstRun) {
5483 if (!current || current.opts.hash === false) {
5487 // Check if need to update window hash
5488 gallery = getGalleryID(instance);
5494 // Variable containing last hash value set by fancyBox
5495 // It will be used to determine if fancyBox needs to close after hash change is detected
5496 instance.currentHash = gallery + (instance.group.length > 1 ? "-" + (current.index + 1) : "");
5498 // If current hash is the same (this instance most likely is opened by hashchange), then do nothing
5499 if (window.location.hash === "#" + instance.currentHash) {
5503 if (firstRun && !instance.origHash) {
5504 instance.origHash = window.location.hash;
5507 if (instance.hashTimer) {
5508 clearTimeout(instance.hashTimer);
5512 instance.hashTimer = setTimeout(function () {
5513 if ("replaceState" in window.history) {
5514 window.history[firstRun ? "pushState" : "replaceState"]({},
5516 window.location.pathname + window.location.search + "#" + instance.currentHash
5520 instance.hasCreatedHistory = true;
5523 window.location.hash = instance.currentHash;
5526 instance.hashTimer = null;
5530 "beforeClose.fb": function (e, instance, current) {
5531 if (!current || current.opts.hash === false) {
5535 clearTimeout(instance.hashTimer);
5537 // Goto previous history entry
5538 if (instance.currentHash && instance.hasCreatedHistory) {
5539 window.history.back();
5540 } else if (instance.currentHash) {
5541 if ("replaceState" in window.history) {
5542 window.history.replaceState({}, document.title, window.location.pathname + window.location.search + (instance.origHash || ""));
5544 window.location.hash = instance.origHash;
5548 instance.currentHash = null;
5552 // Check if need to start/close after url has changed
5553 $(window).on("hashchange.fb", function () {
5554 var url = parseUrl(),
5557 // Find last fancyBox instance that has "hash"
5559 $(".fancybox-container")
5562 function (index, value) {
5563 var tmp = $(value).data("FancyBox");
5565 if (tmp && tmp.currentHash) {
5573 // Now, compare hash values
5574 if (fb.currentHash !== url.gallery + "-" + url.index && !(url.index === 1 && fb.currentHash == url.gallery)) {
5575 fb.currentHash = null;
5579 } else if (url.gallery !== "") {
5580 triggerFromUrl(url);
5584 // Check current hash and trigger click event on matching element to start fancyBox, if needed
5585 setTimeout(function () {
5586 if (!$.fancybox.getInstance()) {
5587 triggerFromUrl(parseUrl());
5591 })(window, document, jQuery);
5592 // ==========================================================================
5595 // Basic mouse weheel support for gallery navigation
5597 // ==========================================================================
5598 (function (document, $) {
5601 var prevTime = new Date().getTime();
5604 "onInit.fb": function (e, instance, current) {
5605 instance.$refs.stage.on("mousewheel DOMMouseScroll wheel MozMousePixelScroll", function (e) {
5606 var current = instance.current,
5607 currTime = new Date().getTime();
5609 if (instance.group.length < 2 || current.opts.wheel === false || (current.opts.wheel === "auto" && current.type !== "image")) {
5614 e.stopPropagation();
5616 if (current.$slide.hasClass("fancybox-animated")) {
5620 e = e.originalEvent || e;
5622 if (currTime - prevTime < 250) {
5626 prevTime = currTime;
5628 instance[(-e.deltaY || -e.deltaX || e.wheelDelta || -e.detail) < 0 ? "next" : "previous"]();
5632 })(document, jQuery);