· 6 years ago · Nov 22, 2019, 09:30 PM
1// ==================================================
2// fancyBox v3.5.4
3//
4// Licensed GPLv3 for open source use
5// or fancyBox Commercial License for commercial use
6//
7// http://fancyapps.com/fancybox/
8// Copyright 2018 fancyApps
9//
10// ==================================================
11(function(window, document, $, undefined) {
12 "use strict";
13
14 window.console = window.console || {
15 info: function(stuff) {}
16 };
17
18 // If there's no jQuery, fancyBox can't work
19 // =========================================
20
21 if (!$) {
22 return;
23 }
24
25 // Check if fancyBox is already initialized
26 // ========================================
27
28 if ($.fn.fancybox) {
29 console.info("fancyBox already initialized");
30
31 return;
32 }
33
34 // Private default settings
35 // ========================
36
37 var defaults = {
38 autoSize : true,
39 scrolling : 'auto',
40 fitToView : false,
41 width : 'auto',
42 maxWidth : '90%',
43
44 // Default content type if cannot be detected automatically
45 defaultType: "image",
46
47 // Open/close animation type
48 // Possible values:
49 // false - disable
50 // "zoom" - zoom images from/to thumbnail
51 // "fade"
52 // "zoom-in-out"
53 //
54 animationEffect: "zoom",
55
56 // Duration in ms for open/close animation
57 animationDuration: 366,
58
59 // Should image change opacity while zooming
60 // If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios
61 zoomOpacity: "auto",
62
63 // Transition effect between slides
64 //
65 // Possible values:
66 // false - disable
67 // "fade'
68 // "slide'
69 // "circular'
70 // "tube'
71 // "zoom-in-out'
72 // "rotate'
73 //
74 transitionEffect: "fade",
75
76 // Duration in ms for transition animation
77 transitionDuration: 366,
78
79 // Custom CSS class for slide element
80 slideClass: "",
81
82 // Custom CSS class for layout
83 baseClass: "",
84
85 // Base template for layout
86 baseTpl:
87 '<div class="fancybox-container" role="dialog" tabindex="-1">' +
88 '<div class="fancybox-bg"></div>' +
89 '<div class="fancybox-inner">' +
90 '<div class="fancybox-infobar"><span data-fancybox-index></span> / <span data-fancybox-count></span></div>' +
91 '<div class="fancybox-toolbar">{{buttons}}</div>' +
92 '<div class="fancybox-navigation">{{arrows}}</div>' +
93 '<div class="fancybox-stage"></div>' +
94 '<div class="fancybox-caption"><div class="fancybox-caption__body"></div></div>' +
95 "</div>" +
96 "</div>",
97
98 // Loading indicator template
99 spinnerTpl: '<div class="fancybox-loading"></div>',
100
101 // Error message template
102 errorTpl: '<div class="fancybox-error"><p>{{ERROR}}</p></div>',
103
104 btnTpl: {
105 download:
106 '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
107 '<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>' +
108 "</a>",
109
110 zoom:
111 '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
112 '<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>' +
113 "</button>",
114
115 close:
116 '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
117 '<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>' +
118 "</button>",
119
120 // Arrows
121 arrowLeft:
122 '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
123 '<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>' +
124 "</button>",
125
126 arrowRight:
127 '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
128 '<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>' +
129 "</button>",
130
131 // This small close button will be appended to your html/inline/ajax content by default,
132 // if "smallBtn" option is not set to false
133 smallBtn:
134 '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
135 '<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>' +
136 "</button>"
137 },
138
139 // Container is injected into this element
140 parentEl: "body",
141
142 // Focus handling
143 // ==============
144
145 // Try to focus on the first focusable element after opening
146 autoFocus: true,
147
148 // Put focus back to active element after closing
149 backFocus: true,
150
151 // Do not let user to focus on element outside modal content
152 trapFocus: true,
153
154 // Module specific options
155 // =======================
156
157
158
159 // Set `touch: false` to disable panning/swiping
160 touch: {
161 vertical: true, // Allow to drag content vertically
162 momentum: true // Continue movement after releasing mouse/touch when panning
163 },
164
165 // Hash value when initializing manually,
166 // set `false` to disable hash change
167 hash: null,
168
169 // Customize or add new media types
170 // Example:
171 /*
172 media : {
173 youtube : {
174 params : {
175 autoplay : 0
176 }
177 }
178 }
179 */
180 media: {},
181
182 slideShow: {
183 autoStart: false,
184 speed: 3000
185 },
186
187 thumbs: {
188 autoStart: false, // Display thumbnails on opening
189 hideOnClose: true, // Hide thumbnail grid when closing animation starts
190 parentEl: ".fancybox-container", // Container is injected into this element
191 axis: "y" // Vertical (y) or horizontal (x) scrolling
192 },
193
194 // Use mousewheel to navigate gallery
195 // If 'auto' - enabled for images only
196 wheel: "auto",
197
198 // Callbacks
199 //==========
200
201 // See Documentation/API/Events for more information
202 // Example:
203 /*
204 afterShow: function( instance, current ) {
205 console.info( 'Clicked element:' );
206 console.info( current.opts.$orig );
207 }
208 */
209
210 onInit: $.noop, // When instance has been initialized
211
212 beforeLoad: $.noop, // Before the content of a slide is being loaded
213 afterLoad: $.noop, // When the content of a slide is done loading
214
215 beforeShow: $.noop, // Before open animation starts
216 afterShow: $.noop, // When content is done loading and animating
217
218 beforeClose: $.noop, // Before the instance attempts to close. Return false to cancel the close.
219 afterClose: $.noop, // After instance has been closed
220
221 onActivate: $.noop, // When instance is brought to front
222 onDeactivate: $.noop, // When other instance has been activated
223
224 // Interaction
225 // ===========
226
227 // Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
228 // each option can be string or method that returns value.
229 //
230 // Possible values:
231 // "close" - close instance
232 // "next" - move to next gallery item
233 // "nextOrClose" - move to next gallery item or close if gallery has only one item
234 // "toggleControls" - show/hide controls
235 // "zoom" - zoom image (if loaded)
236 // false - do nothing
237
238 // Clicked on the content
239 clickContent: function(current, event) {
240 return current.type === "image" ? "zoom" : false;
241 },
242
243 // Clicked on the slide
244 clickSlide: "close",
245
246 // Clicked on the background (backdrop) element;
247 // if you have not changed the layout, then most likely you need to use `clickSlide` option
248 clickOutside: "close",
249
250 // Same as previous two, but for double click
251 dblclickContent: false,
252 dblclickSlide: false,
253 dblclickOutside: false,
254
255 // Custom options when mobile device is detected
256 // =============================================
257
258 mobile: {
259 preventCaptionOverlap: false,
260 idleTime: false,
261 clickContent: function(current, event) {
262 return current.type === "image" ? "toggleControls" : false;
263 },
264 clickSlide: function(current, event) {
265 return current.type === "image" ? "toggleControls" : "close";
266 },
267 dblclickContent: function(current, event) {
268 return current.type === "image" ? "zoom" : false;
269 },
270 dblclickSlide: function(current, event) {
271 return current.type === "image" ? "zoom" : false;
272 }
273 },
274
275 // Internationalization
276 // ====================
277
278 lang: "en",
279 i18n: {
280 en: {
281 CLOSE: "Close",
282 NEXT: "Next",
283 PREV: "Previous",
284 ERROR: "The requested content cannot be loaded. <br/> Please try again later.",
285 PLAY_START: "Start slideshow",
286 PLAY_STOP: "Pause slideshow",
287 FULL_SCREEN: "Full screen",
288 THUMBS: "Thumbnails",
289 DOWNLOAD: "Download",
290 SHARE: "Share",
291 ZOOM: "Zoom"
292 },
293 de: {
294 CLOSE: "Schließen",
295 NEXT: "Weiter",
296 PREV: "Zurück",
297 ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.",
298 PLAY_START: "Diaschau starten",
299 PLAY_STOP: "Diaschau beenden",
300 FULL_SCREEN: "Vollbild",
301 THUMBS: "Vorschaubilder",
302 DOWNLOAD: "Herunterladen",
303 SHARE: "Teilen",
304 ZOOM: "Vergrößern"
305 }
306 }
307 };
308
309 // Few useful variables and methods
310 // ================================
311
312 var $W = $(window);
313 var $D = $(document);
314
315 var called = 0;
316
317 // Check if an object is a jQuery object and not a native JavaScript object
318 // ========================================================================
319 var isQuery = function(obj) {
320 return obj && obj.hasOwnProperty && obj instanceof $;
321 };
322
323 // Handle multiple browsers for "requestAnimationFrame" and "cancelAnimationFrame"
324 // ===============================================================================
325 var requestAFrame = (function() {
326 return (
327 window.requestAnimationFrame ||
328 window.webkitRequestAnimationFrame ||
329 window.mozRequestAnimationFrame ||
330 window.oRequestAnimationFrame ||
331 // if all else fails, use setTimeout
332 function(callback) {
333 return window.setTimeout(callback, 1000 / 60);
334 }
335 );
336 })();
337
338 var cancelAFrame = (function() {
339 return (
340 window.cancelAnimationFrame ||
341 window.webkitCancelAnimationFrame ||
342 window.mozCancelAnimationFrame ||
343 window.oCancelAnimationFrame ||
344 function(id) {
345 window.clearTimeout(id);
346 }
347 );
348 })();
349
350 // Detect the supported transition-end event property name
351 // =======================================================
352 var transitionEnd = (function() {
353 var el = document.createElement("fakeelement"),
354 t;
355
356 var transitions = {
357 transition: "transitionend",
358 OTransition: "oTransitionEnd",
359 MozTransition: "transitionend",
360 WebkitTransition: "webkitTransitionEnd"
361 };
362
363 for (t in transitions) {
364 if (el.style[t] !== undefined) {
365 return transitions[t];
366 }
367 }
368
369 return "transitionend";
370 })();
371
372 // Force redraw on an element.
373 // This helps in cases where the browser doesn't redraw an updated element properly
374 // ================================================================================
375 var forceRedraw = function($el) {
376 return $el && $el.length && $el[0].offsetHeight;
377 };
378
379 // Exclude array (`buttons`) options from deep merging
380 // ===================================================
381 var mergeOpts = function(opts1, opts2) {
382 var rez = $.extend(true, {}, opts1, opts2);
383
384 $.each(opts2, function(key, value) {
385 if ($.isArray(value)) {
386 rez[key] = value;
387 }
388 });
389
390 return rez;
391 };
392
393 // How much of an element is visible in viewport
394 // =============================================
395
396 var inViewport = function(elem) {
397 var elemCenter, rez;
398
399 if (!elem || elem.ownerDocument !== document) {
400 return false;
401 }
402
403 $(".fancybox-container").css("pointer-events", "none");
404
405 elemCenter = {
406 x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
407 y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
408 };
409
410 rez = document.elementFromPoint(elemCenter.x, elemCenter.y) === elem;
411
412 $(".fancybox-container").css("pointer-events", "");
413
414 return rez;
415 };
416
417 // Class definition
418 // ================
419
420 var FancyBox = function(content, opts, index) {
421 var self = this;
422
423 self.opts = mergeOpts({index: index}, $.fancybox.defaults);
424
425 if ($.isPlainObject(opts)) {
426 self.opts = mergeOpts(self.opts, opts);
427 }
428
429 if ($.fancybox.isMobile) {
430 self.opts = mergeOpts(self.opts, self.opts.mobile);
431 }
432
433 self.id = self.opts.id || ++called;
434
435 self.currIndex = parseInt(self.opts.index, 10) || 0;
436 self.prevIndex = null;
437
438 self.prevPos = null;
439 self.currPos = 0;
440
441 self.firstRun = true;
442
443 // All group items
444 self.group = [];
445
446 // Existing slides (for current, next and previous gallery items)
447 self.slides = {};
448
449 // Create group elements
450 self.addContent(content);
451
452 if (!self.group.length) {
453 return;
454 }
455
456 self.init();
457 };
458
459 $.extend(FancyBox.prototype, {
460 // Create DOM structure
461 // ====================
462
463 init: function() {
464 var self = this,
465 firstItem = self.group[self.currIndex],
466 firstItemOpts = firstItem.opts,
467 $container,
468 buttonStr;
469
470 if (firstItemOpts.closeExisting) {
471 $.fancybox.close(true);
472 }
473
474 // Hide scrollbars
475 // ===============
476
477 $("body").addClass("fancybox-active");
478
479 if (
480 !$.fancybox.getInstance() &&
481 firstItemOpts.hideScrollbar !== false &&
482 !$.fancybox.isMobile &&
483 document.body.scrollHeight > window.innerHeight
484 ) {
485 $("head").append(
486 '<style id="fancybox-style-noscroll" type="text/css">.compensate-for-scrollbar{margin-right:' +
487 (window.innerWidth - document.documentElement.clientWidth) +
488 "px;}</style>"
489 );
490
491 $("body").addClass("compensate-for-scrollbar");
492 }
493
494 // Build html markup and set references
495 // ====================================
496
497 // Build html code for buttons and insert into main template
498 buttonStr = "";
499
500 $.each(firstItemOpts.buttons, function(index, value) {
501 buttonStr += firstItemOpts.btnTpl[value] || "";
502 });
503
504 // Create markup from base template, it will be initially hidden to
505 // avoid unnecessary work like painting while initializing is not complete
506 $container = $(
507 self.translate(
508 self,
509 firstItemOpts.baseTpl
510 .replace("{{buttons}}", buttonStr)
511 .replace("{{arrows}}", firstItemOpts.btnTpl.arrowLeft + firstItemOpts.btnTpl.arrowRight)
512 )
513 )
514 .attr("id", "fancybox-container-" + self.id)
515 .addClass(firstItemOpts.baseClass)
516 .data("FancyBox", self)
517 .appendTo(firstItemOpts.parentEl);
518
519 // Create object holding references to jQuery wrapped nodes
520 self.$refs = {
521 container: $container
522 };
523
524 ["bg", "inner", "infobar", "toolbar", "stage", "caption", "navigation"].forEach(function(item) {
525 self.$refs[item] = $container.find(".fancybox-" + item);
526 });
527
528 self.trigger("onInit");
529
530 // Enable events, deactive previous instances
531 self.activate();
532
533 // Build slides, load and reveal content
534 self.jumpTo(self.currIndex);
535 },
536
537 // Simple i18n support - replaces object keys found in template
538 // with corresponding values
539 // ============================================================
540
541 translate: function(obj, str) {
542 var arr = obj.opts.i18n[obj.opts.lang] || obj.opts.i18n.en;
543
544 return str.replace(/\{\{(\w+)\}\}/g, function(match, n) {
545 return arr[n] === undefined ? match : arr[n];
546 });
547 },
548
549 // Populate current group with fresh content
550 // Check if each object has valid type and content
551 // ===============================================
552
553 addContent: function(content) {
554 var self = this,
555 items = $.makeArray(content),
556 thumbs;
557
558 $.each(items, function(i, item) {
559 var obj = {},
560 opts = {},
561 $item,
562 type,
563 found,
564 src,
565 srcParts;
566
567 // Step 1 - Make sure we have an object
568 // ====================================
569
570 if ($.isPlainObject(item)) {
571 // We probably have manual usage here, something like
572 // $.fancybox.open( [ { src : "image.jpg", type : "image" } ] )
573
574 obj = item;
575 opts = item.opts || item;
576 } else if ($.type(item) === "object" && $(item).length) {
577 // Here we probably have jQuery collection returned by some selector
578 $item = $(item);
579
580 // Support attributes like `data-options='{"touch" : false}'` and `data-touch='false'`
581 opts = $item.data() || {};
582 opts = $.extend(true, {}, opts, opts.options);
583
584 // Here we store clicked element
585 opts.$orig = $item;
586
587 obj.src = self.opts.src || opts.src || $item.attr("href");
588
589 // Assume that simple syntax is used, for example:
590 // `$.fancybox.open( $("#test"), {} );`
591 if (!obj.type && !obj.src) {
592 obj.type = "inline";
593 obj.src = item;
594 }
595 } else {
596 // Assume we have a simple html code, for example:
597 // $.fancybox.open( '<div><h1>Hi!</h1></div>' );
598 obj = {
599 type: "html",
600 src: item + ""
601 };
602 }
603
604 // Each gallery object has full collection of options
605 obj.opts = $.extend(true, {}, self.opts, opts);
606
607 // Do not merge buttons array
608 if ($.isArray(opts.buttons)) {
609 obj.opts.buttons = opts.buttons;
610 }
611
612 if ($.fancybox.isMobile && obj.opts.mobile) {
613 obj.opts = mergeOpts(obj.opts, obj.opts.mobile);
614 }
615
616 // Step 2 - Make sure we have content type, if not - try to guess
617 // ==============================================================
618
619 type = obj.type || obj.opts.type;
620 src = obj.src || "";
621
622 if (!type && src) {
623 if ((found = src.match(/\.(mp4|mov|ogv|webm)((\?|#).*)?$/i))) {
624 type = "video";
625
626 if (!obj.opts.video.format) {
627 obj.opts.video.format = "video/" + (found[1] === "ogv" ? "ogg" : found[1]);
628 }
629 } else if (src.match(/(^data:image\/[a-z0-9+\/=]*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg|ico)((\?|#).*)?$)/i)) {
630 type = "image";
631 } else if (src.match(/\.(pdf)((\?|#).*)?$/i)) {
632 type = "iframe";
633 obj = $.extend(true, obj, {contentType: "pdf", opts: {iframe: {preload: false}}});
634 } else if (src.charAt(0) === "#") {
635 type = "inline";
636 }
637 }
638
639 if (type) {
640 obj.type = type;
641 } else {
642 self.trigger("objectNeedsType", obj);
643 }
644
645 if (!obj.contentType) {
646 obj.contentType = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1 ? "html" : obj.type;
647 }
648
649 // Step 3 - Some adjustments
650 // =========================
651
652 obj.index = self.group.length;
653
654 if (obj.opts.smallBtn == "auto") {
655 obj.opts.smallBtn = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1;
656 }
657
658 if (obj.opts.toolbar === "auto") {
659 obj.opts.toolbar = !obj.opts.smallBtn;
660 }
661
662 // Find thumbnail image, check if exists and if is in the viewport
663 obj.$thumb = obj.opts.$thumb || null;
664
665 if (obj.opts.$trigger && obj.index === self.opts.index) {
666 obj.$thumb = obj.opts.$trigger.find("img:first");
667
668 if (obj.$thumb.length) {
669 obj.opts.$orig = obj.opts.$trigger;
670 }
671 }
672
673 if (!(obj.$thumb && obj.$thumb.length) && obj.opts.$orig) {
674 obj.$thumb = obj.opts.$orig.find("img:first");
675 }
676
677 if (obj.$thumb && !obj.$thumb.length) {
678 obj.$thumb = null;
679 }
680
681 obj.thumb = obj.opts.thumb || (obj.$thumb ? obj.$thumb[0].src : null);
682
683 // "caption" is a "special" option, it can be used to customize caption per gallery item
684 if ($.type(obj.opts.caption) === "function") {
685 obj.opts.caption = obj.opts.caption.apply(item, [self, obj]);
686 }
687
688 if ($.type(self.opts.caption) === "function") {
689 obj.opts.caption = self.opts.caption.apply(item, [self, obj]);
690 }
691
692 // Make sure we have caption as a string or jQuery object
693 if (!(obj.opts.caption instanceof $)) {
694 obj.opts.caption = obj.opts.caption === undefined ? "" : obj.opts.caption + "";
695 }
696
697 // Check if url contains "filter" used to filter the content
698 // Example: "ajax.html #something"
699 if (obj.type === "ajax") {
700 srcParts = src.split(/\s+/, 2);
701
702 if (srcParts.length > 1) {
703 obj.src = srcParts.shift();
704
705 obj.opts.filter = srcParts.shift();
706 }
707 }
708
709 // Hide all buttons and disable interactivity for modal items
710 if (obj.opts.modal) {
711 obj.opts = $.extend(true, obj.opts, {
712 trapFocus: true,
713 // Remove buttons
714 infobar: 0,
715 toolbar: 0,
716
717 smallBtn: 0,
718
719 // Disable keyboard navigation
720 keyboard: 0,
721
722 // Disable some modules
723 slideShow: 0,
724 fullScreen: 0,
725 thumbs: 0,
726 touch: 0,
727
728 // Disable click event handlers
729 clickContent: false,
730 clickSlide: false,
731 clickOutside: false,
732 dblclickContent: false,
733 dblclickSlide: false,
734 dblclickOutside: false
735 });
736 }
737
738 // Step 4 - Add processed object to group
739 // ======================================
740
741 self.group.push(obj);
742 });
743
744 // Update controls if gallery is already opened
745 if (Object.keys(self.slides).length) {
746 self.updateControls();
747
748 // Update thumbnails, if needed
749 thumbs = self.Thumbs;
750
751 if (thumbs && thumbs.isActive) {
752 thumbs.create();
753
754 thumbs.focus();
755 }
756 }
757 },
758
759 // Attach an event handler functions for:
760 // - navigation buttons
761 // - browser scrolling, resizing;
762 // - focusing
763 // - keyboard
764 // - detecting inactivity
765 // ======================================
766
767 addEvents: function() {
768 var self = this;
769
770 self.removeEvents();
771
772 // Make navigation elements clickable
773 // ==================================
774
775 self.$refs.container
776 .on("click.fb-close", "[data-fancybox-close]", function(e) {
777 e.stopPropagation();
778 e.preventDefault();
779
780 self.close(e);
781 })
782 .on("touchstart.fb-prev click.fb-prev", "[data-fancybox-prev]", function(e) {
783 e.stopPropagation();
784 e.preventDefault();
785
786 self.previous();
787 })
788 .on("touchstart.fb-next click.fb-next", "[data-fancybox-next]", function(e) {
789 e.stopPropagation();
790 e.preventDefault();
791
792 self.next();
793 })
794 .on("click.fb", "[data-fancybox-zoom]", function(e) {
795 // Click handler for zoom button
796 self[self.isScaledDown() ? "scaleToActual" : "scaleToFit"]();
797 });
798
799 // Handle page scrolling and browser resizing
800 // ==========================================
801
802 $W.on("orientationchange.fb resize.fb", function(e) {
803 if (e && e.originalEvent && e.originalEvent.type === "resize") {
804 if (self.requestId) {
805 cancelAFrame(self.requestId);
806 }
807
808 self.requestId = requestAFrame(function() {
809 self.update(e);
810 });
811 } else {
812 if (self.current && self.current.type === "iframe") {
813 self.$refs.stage.hide();
814 }
815
816 setTimeout(
817 function() {
818 self.$refs.stage.show();
819
820 self.update(e);
821 },
822 $.fancybox.isMobile ? 600 : 250
823 );
824 }
825 });
826
827 $D.on("keydown.fb", function(e) {
828 var instance = $.fancybox ? $.fancybox.getInstance() : null,
829 current = instance.current,
830 keycode = e.keyCode || e.which;
831
832 // Trap keyboard focus inside of the modal
833 // =======================================
834
835 if (keycode == 9) {
836 if (current.opts.trapFocus) {
837 self.focus(e);
838 }
839
840 return;
841 }
842
843 // Enable keyboard navigation
844 // ==========================
845
846 if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input,textarea,video,audio")) {
847 return;
848 }
849
850 // Backspace and Esc keys
851 if (keycode === 8 || keycode === 27) {
852 e.preventDefault();
853
854 self.close(e);
855
856 return;
857 }
858
859 // Left arrow and Up arrow
860 if (keycode === 37 || keycode === 38) {
861 e.preventDefault();
862
863 self.previous();
864
865 return;
866 }
867
868 // Righ arrow and Down arrow
869 if (keycode === 39 || keycode === 40) {
870 e.preventDefault();
871
872 self.next();
873
874 return;
875 }
876
877 self.trigger("afterKeydown", e, keycode);
878 });
879
880 // Hide controls after some inactivity period
881 if (self.group[self.currIndex].opts.idleTime) {
882 self.idleSecondsCounter = 0;
883
884 $D.on(
885 "mousemove.fb-idle mouseleave.fb-idle mousedown.fb-idle touchstart.fb-idle touchmove.fb-idle scroll.fb-idle keydown.fb-idle",
886 function(e) {
887 self.idleSecondsCounter = 0;
888
889 if (self.isIdle) {
890 self.showControls();
891 }
892
893 self.isIdle = false;
894 }
895 );
896
897 self.idleInterval = window.setInterval(function() {
898 self.idleSecondsCounter++;
899
900 if (self.idleSecondsCounter >= self.group[self.currIndex].opts.idleTime && !self.isDragging) {
901 self.isIdle = true;
902 self.idleSecondsCounter = 0;
903
904 self.hideControls();
905 }
906 }, 1000);
907 }
908 },
909
910 // Remove events added by the core
911 // ===============================
912
913 removeEvents: function() {
914 var self = this;
915
916 $W.off("orientationchange.fb resize.fb");
917 $D.off("keydown.fb .fb-idle");
918
919 this.$refs.container.off(".fb-close .fb-prev .fb-next");
920
921 if (self.idleInterval) {
922 window.clearInterval(self.idleInterval);
923
924 self.idleInterval = null;
925 }
926 },
927
928 // Change to previous gallery item
929 // ===============================
930
931 previous: function(duration) {
932 return this.jumpTo(this.currPos - 1, duration);
933 },
934
935 // Change to next gallery item
936 // ===========================
937
938 next: function(duration) {
939 return this.jumpTo(this.currPos + 1, duration);
940 },
941
942 // Switch to selected gallery item
943 // ===============================
944
945 jumpTo: function(pos, duration) {
946 var self = this,
947 groupLen = self.group.length,
948 firstRun,
949 isMoved,
950 loop,
951 current,
952 previous,
953 slidePos,
954 stagePos,
955 prop,
956 diff;
957
958 if (self.isDragging || self.isClosing || (self.isAnimating && self.firstRun)) {
959 return;
960 }
961
962 // Should loop?
963 pos = parseInt(pos, 10);
964 loop = self.current ? self.current.opts.loop : self.opts.loop;
965
966 if (!loop && (pos < 0 || pos >= groupLen)) {
967 return false;
968 }
969
970 // Check if opening for the first time; this helps to speed things up
971 firstRun = self.firstRun = !Object.keys(self.slides).length;
972
973 // Create slides
974 previous = self.current;
975
976 self.prevIndex = self.currIndex;
977 self.prevPos = self.currPos;
978
979 current = self.createSlide(pos);
980
981 if (groupLen > 1) {
982 if (loop || current.index < groupLen - 1) {
983 self.createSlide(pos + 1);
984 }
985
986 if (loop || current.index > 0) {
987 self.createSlide(pos - 1);
988 }
989 }
990
991 self.current = current;
992 self.currIndex = current.index;
993 self.currPos = current.pos;
994
995 self.trigger("beforeShow", firstRun);
996
997 self.updateControls();
998
999 // Validate duration length
1000 current.forcedDuration = undefined;
1001
1002 if ($.isNumeric(duration)) {
1003 current.forcedDuration = duration;
1004 } else {
1005 duration = current.opts[firstRun ? "animationDuration" : "transitionDuration"];
1006 }
1007
1008 duration = parseInt(duration, 10);
1009
1010 // Check if user has swiped the slides or if still animating
1011 isMoved = self.isMoved(current);
1012
1013 // Make sure current slide is visible
1014 current.$slide.addClass("fancybox-slide--current");
1015
1016 // Fresh start - reveal container, current slide and start loading content
1017 if (firstRun) {
1018 if (current.opts.animationEffect && duration) {
1019 self.$refs.container.css("transition-duration", duration + "ms");
1020 }
1021
1022 self.$refs.container.addClass("fancybox-is-open").trigger("focus");
1023
1024 // Attempt to load content into slide
1025 // This will later call `afterLoad` -> `revealContent`
1026 self.loadSlide(current);
1027
1028 self.preload("image");
1029
1030 return;
1031 }
1032
1033 // Get actual slide/stage positions (before cleaning up)
1034 slidePos = $.fancybox.getTranslate(previous.$slide);
1035 stagePos = $.fancybox.getTranslate(self.$refs.stage);
1036
1037 // Clean up all slides
1038 $.each(self.slides, function(index, slide) {
1039 $.fancybox.stop(slide.$slide, true);
1040 });
1041
1042 if (previous.pos !== current.pos) {
1043 previous.isComplete = false;
1044 }
1045
1046 previous.$slide.removeClass("fancybox-slide--complete fancybox-slide--current");
1047
1048 // If slides are out of place, then animate them to correct position
1049 if (isMoved) {
1050 // Calculate horizontal swipe distance
1051 diff = slidePos.left - (previous.pos * slidePos.width + previous.pos * previous.opts.gutter);
1052
1053 $.each(self.slides, function(index, slide) {
1054 slide.$slide.removeClass("fancybox-animated").removeClass(function(index, className) {
1055 return (className.match(/(^|\s)fancybox-fx-\S+/g) || []).join(" ");
1056 });
1057
1058 // Make sure that each slide is in equal distance
1059 // This is mostly needed for freshly added slides, because they are not yet positioned
1060 var leftPos = slide.pos * slidePos.width + slide.pos * slide.opts.gutter;
1061
1062 $.fancybox.setTranslate(slide.$slide, {top: 0, left: leftPos - stagePos.left + diff});
1063
1064 if (slide.pos !== current.pos) {
1065 slide.$slide.addClass("fancybox-slide--" + (slide.pos > current.pos ? "next" : "previous"));
1066 }
1067
1068 // Redraw to make sure that transition will start
1069 forceRedraw(slide.$slide);
1070
1071 // Animate the slide
1072 $.fancybox.animate(
1073 slide.$slide,
1074 {
1075 top: 0,
1076 left: (slide.pos - current.pos) * slidePos.width + (slide.pos - current.pos) * slide.opts.gutter
1077 },
1078 duration,
1079 function() {
1080 slide.$slide
1081 .css({
1082 transform: "",
1083 opacity: ""
1084 })
1085 .removeClass("fancybox-slide--next fancybox-slide--previous");
1086
1087 if (slide.pos === self.currPos) {
1088 self.complete();
1089 }
1090 }
1091 );
1092 });
1093 } else if (duration && current.opts.transitionEffect) {
1094 // Set transition effect for previously active slide
1095 prop = "fancybox-animated fancybox-fx-" + current.opts.transitionEffect;
1096
1097 previous.$slide.addClass("fancybox-slide--" + (previous.pos > current.pos ? "next" : "previous"));
1098
1099 $.fancybox.animate(
1100 previous.$slide,
1101 prop,
1102 duration,
1103 function() {
1104 previous.$slide.removeClass(prop).removeClass("fancybox-slide--next fancybox-slide--previous");
1105 },
1106 false
1107 );
1108 }
1109
1110 if (current.isLoaded) {
1111 self.revealContent(current);
1112 } else {
1113 self.loadSlide(current);
1114 }
1115
1116 self.preload("image");
1117 },
1118
1119 // Create new "slide" element
1120 // These are gallery items that are actually added to DOM
1121 // =======================================================
1122
1123 createSlide: function(pos) {
1124 var self = this,
1125 $slide,
1126 index;
1127
1128 index = pos % self.group.length;
1129 index = index < 0 ? self.group.length + index : index;
1130
1131 if (!self.slides[pos] && self.group[index]) {
1132 $slide = $('<div class="fancybox-slide"></div>').appendTo(self.$refs.stage);
1133
1134 self.slides[pos] = $.extend(true, {}, self.group[index], {
1135 pos: pos,
1136 $slide: $slide,
1137 isLoaded: false
1138 });
1139
1140 self.updateSlide(self.slides[pos]);
1141 }
1142
1143 return self.slides[pos];
1144 },
1145
1146 // Scale image to the actual size of the image;
1147 // x and y values should be relative to the slide
1148 // ==============================================
1149
1150 scaleToActual: function(x, y, duration) {
1151 var self = this,
1152 current = self.current,
1153 $content = current.$content,
1154 canvasWidth = $.fancybox.getTranslate(current.$slide).width,
1155 canvasHeight = $.fancybox.getTranslate(current.$slide).height,
1156 newImgWidth = current.width,
1157 newImgHeight = current.height,
1158 imgPos,
1159 posX,
1160 posY,
1161 scaleX,
1162 scaleY;
1163
1164 if (self.isAnimating || self.isMoved() || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
1165 return;
1166 }
1167
1168 self.isAnimating = true;
1169
1170 $.fancybox.stop($content);
1171
1172 x = x === undefined ? canvasWidth * 0.5 : x;
1173 y = y === undefined ? canvasHeight * 0.5 : y;
1174
1175 imgPos = $.fancybox.getTranslate($content);
1176
1177 imgPos.top -= $.fancybox.getTranslate(current.$slide).top;
1178 imgPos.left -= $.fancybox.getTranslate(current.$slide).left;
1179
1180 scaleX = newImgWidth / imgPos.width;
1181 scaleY = newImgHeight / imgPos.height;
1182
1183 // Get center position for original image
1184 posX = canvasWidth * 0.5 - newImgWidth * 0.5;
1185 posY = canvasHeight * 0.5 - newImgHeight * 0.5;
1186
1187 // Make sure image does not move away from edges
1188 if (newImgWidth > canvasWidth) {
1189 posX = imgPos.left * scaleX - (x * scaleX - x);
1190
1191 if (posX > 0) {
1192 posX = 0;
1193 }
1194
1195 if (posX < canvasWidth - newImgWidth) {
1196 posX = canvasWidth - newImgWidth;
1197 }
1198 }
1199
1200 if (newImgHeight > canvasHeight) {
1201 posY = imgPos.top * scaleY - (y * scaleY - y);
1202
1203 if (posY > 0) {
1204 posY = 0;
1205 }
1206
1207 if (posY < canvasHeight - newImgHeight) {
1208 posY = canvasHeight - newImgHeight;
1209 }
1210 }
1211
1212 self.updateCursor(newImgWidth, newImgHeight);
1213
1214 $.fancybox.animate(
1215 $content,
1216 {
1217 top: posY,
1218 left: posX,
1219 scaleX: scaleX,
1220 scaleY: scaleY
1221 },
1222 duration || 366,
1223 function() {
1224 self.isAnimating = false;
1225 }
1226 );
1227
1228 // Stop slideshow
1229 if (self.SlideShow && self.SlideShow.isActive) {
1230 self.SlideShow.stop();
1231 }
1232 },
1233
1234 // Scale image to fit inside parent element
1235 // ========================================
1236
1237 scaleToFit: function(duration) {
1238 var self = this,
1239 current = self.current,
1240 $content = current.$content,
1241 end;
1242
1243 if (self.isAnimating || self.isMoved() || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
1244 return;
1245 }
1246
1247 self.isAnimating = true;
1248
1249 $.fancybox.stop($content);
1250
1251 end = self.getFitPos(current);
1252
1253 self.updateCursor(end.width, end.height);
1254
1255 $.fancybox.animate(
1256 $content,
1257 {
1258 top: end.top,
1259 left: end.left,
1260 scaleX: end.width / $content.width(),
1261 scaleY: end.height / $content.height()
1262 },
1263 duration || 366,
1264 function() {
1265 self.isAnimating = false;
1266 }
1267 );
1268 },
1269
1270 // Calculate image size to fit inside viewport
1271 // ===========================================
1272
1273 getFitPos: function(slide) {
1274 var self = this,
1275 $content = slide.$content,
1276 $slide = slide.$slide,
1277 width = slide.width || slide.opts.width,
1278 height = slide.height || slide.opts.height,
1279 maxWidth,
1280 maxHeight,
1281 minRatio,
1282 aspectRatio,
1283 rez = {};
1284
1285 if (!slide.isLoaded || !$content || !$content.length) {
1286 return false;
1287 }
1288
1289 maxWidth = $.fancybox.getTranslate(self.$refs.stage).width;
1290 maxHeight = $.fancybox.getTranslate(self.$refs.stage).height;
1291
1292 maxWidth -=
1293 parseFloat($slide.css("paddingLeft")) +
1294 parseFloat($slide.css("paddingRight")) +
1295 parseFloat($content.css("marginLeft")) +
1296 parseFloat($content.css("marginRight"));
1297
1298 maxHeight -=
1299 parseFloat($slide.css("paddingTop")) +
1300 parseFloat($slide.css("paddingBottom")) +
1301 parseFloat($content.css("marginTop")) +
1302 parseFloat($content.css("marginBottom"));
1303
1304 if (!width || !height) {
1305 width = maxWidth;
1306 height = maxHeight;
1307 }
1308
1309 minRatio = Math.min(1, maxWidth / width, maxHeight / height);
1310
1311 width = minRatio * width;
1312 height = minRatio * height;
1313
1314 // Adjust width/height to precisely fit into container
1315 if (width > maxWidth - 0.5) {
1316 width = maxWidth;
1317 }
1318
1319 if (height > maxHeight - 0.5) {
1320 height = maxHeight;
1321 }
1322
1323 if (slide.type === "image") {
1324 rez.top = Math.floor((maxHeight - height) * 0.5) + parseFloat($slide.css("paddingTop"));
1325 rez.left = Math.floor((maxWidth - width) * 0.5) + parseFloat($slide.css("paddingLeft"));
1326 } else if (slide.contentType === "video") {
1327 // Force aspect ratio for the video
1328 // "I say the whole world must learn of our peaceful ways⌠by force!"
1329 aspectRatio = slide.opts.width && slide.opts.height ? width / height : slide.opts.ratio || 16 / 9;
1330
1331 if (height > width / aspectRatio) {
1332 height = width / aspectRatio;
1333 } else if (width > height * aspectRatio) {
1334 width = height * aspectRatio;
1335 }
1336 }
1337
1338 rez.width = width;
1339 rez.height = height;
1340
1341 return rez;
1342 },
1343
1344 // Update content size and position for all slides
1345 // ==============================================
1346
1347 update: function(e) {
1348 var self = this;
1349
1350 $.each(self.slides, function(key, slide) {
1351 self.updateSlide(slide, e);
1352 });
1353 },
1354
1355 // Update slide content position and size
1356 // ======================================
1357
1358 updateSlide: function(slide, e) {
1359 var self = this,
1360 $content = slide && slide.$content,
1361 width = slide.width || slide.opts.width,
1362 height = slide.height || slide.opts.height,
1363 $slide = slide.$slide;
1364
1365 // First, prevent caption overlap, if needed
1366 self.adjustCaption(slide);
1367
1368 // Then resize content to fit inside the slide
1369 if ($content && (width || height || slide.contentType === "video") && !slide.hasError) {
1370 $.fancybox.stop($content);
1371
1372 $.fancybox.setTranslate($content, self.getFitPos(slide));
1373
1374 if (slide.pos === self.currPos) {
1375 self.isAnimating = false;
1376
1377 self.updateCursor();
1378 }
1379 }
1380
1381 // Then some adjustments
1382 self.adjustLayout(slide);
1383
1384 if ($slide.length) {
1385 $slide.trigger("refresh");
1386
1387 if (slide.pos === self.currPos) {
1388 self.$refs.toolbar
1389 .add(self.$refs.navigation.find(".fancybox-button--arrow_right"))
1390 .toggleClass("compensate-for-scrollbar", $slide.get(0).scrollHeight > $slide.get(0).clientHeight);
1391 }
1392 }
1393
1394 self.trigger("onUpdate", slide, e);
1395 },
1396
1397 // Horizontally center slide
1398 // =========================
1399
1400 centerSlide: function(duration) {
1401 var self = this,
1402 current = self.current,
1403 $slide = current.$slide;
1404
1405 if (self.isClosing || !current) {
1406 return;
1407 }
1408
1409 $slide.siblings().css({
1410 transform: "",
1411 opacity: ""
1412 });
1413
1414 $slide
1415 .parent()
1416 .children()
1417 .removeClass("fancybox-slide--previous fancybox-slide--next");
1418
1419 $.fancybox.animate(
1420 $slide,
1421 {
1422 top: 0,
1423 left: 0,
1424 opacity: 1
1425 },
1426 duration === undefined ? 0 : duration,
1427 function() {
1428 // Clean up
1429 $slide.css({
1430 transform: "",
1431 opacity: ""
1432 });
1433
1434 if (!current.isComplete) {
1435 self.complete();
1436 }
1437 },
1438 false
1439 );
1440 },
1441
1442 // Check if current slide is moved (swiped)
1443 // ========================================
1444
1445 isMoved: function(slide) {
1446 var current = slide || this.current,
1447 slidePos,
1448 stagePos;
1449
1450 if (!current) {
1451 return false;
1452 }
1453
1454 stagePos = $.fancybox.getTranslate(this.$refs.stage);
1455 slidePos = $.fancybox.getTranslate(current.$slide);
1456
1457 return (
1458 !current.$slide.hasClass("fancybox-animated") &&
1459 (Math.abs(slidePos.top - stagePos.top) > 0.5 || Math.abs(slidePos.left - stagePos.left) > 0.5)
1460 );
1461 },
1462
1463 // Update cursor style depending if content can be zoomed
1464 // ======================================================
1465
1466 updateCursor: function(nextWidth, nextHeight) {
1467 var self = this,
1468 current = self.current,
1469 $container = self.$refs.container,
1470 canPan,
1471 isZoomable;
1472
1473 if (!current || self.isClosing || !self.Guestures) {
1474 return;
1475 }
1476
1477 $container.removeClass("fancybox-is-zoomable fancybox-can-zoomIn fancybox-can-zoomOut fancybox-can-swipe fancybox-can-pan");
1478
1479 canPan = self.canPan(nextWidth, nextHeight);
1480
1481 isZoomable = canPan ? true : self.isZoomable();
1482
1483 $container.toggleClass("fancybox-is-zoomable", isZoomable);
1484
1485 $("[data-fancybox-zoom]").prop("disabled", !isZoomable);
1486
1487 if (canPan) {
1488 $container.addClass("fancybox-can-pan");
1489 } else if (
1490 isZoomable &&
1491 (current.opts.clickContent === "zoom" || ($.isFunction(current.opts.clickContent) && current.opts.clickContent(current) == "zoom"))
1492 ) {
1493 $container.addClass("fancybox-can-zoomIn");
1494 } else if (current.opts.touch && (current.opts.touch.vertical || self.group.length > 1) && current.contentType !== "video") {
1495 $container.addClass("fancybox-can-swipe");
1496 }
1497 },
1498
1499 // Check if current slide is zoomable
1500 // ==================================
1501
1502 isZoomable: function() {
1503 var self = this,
1504 current = self.current,
1505 fitPos;
1506
1507 // Assume that slide is zoomable if:
1508 // - image is still loading
1509 // - actual size of the image is smaller than available area
1510 if (current && !self.isClosing && current.type === "image" && !current.hasError) {
1511 if (!current.isLoaded) {
1512 return true;
1513 }
1514
1515 fitPos = self.getFitPos(current);
1516
1517 if (fitPos && (current.width > fitPos.width || current.height > fitPos.height)) {
1518 return true;
1519 }
1520 }
1521
1522 return false;
1523 },
1524
1525 // Check if current image dimensions are smaller than actual
1526 // =========================================================
1527
1528 isScaledDown: function(nextWidth, nextHeight) {
1529 var self = this,
1530 rez = false,
1531 current = self.current,
1532 $content = current.$content;
1533
1534 if (nextWidth !== undefined && nextHeight !== undefined) {
1535 rez = nextWidth < current.width && nextHeight < current.height;
1536 } else if ($content) {
1537 rez = $.fancybox.getTranslate($content);
1538 rez = rez.width < current.width && rez.height < current.height;
1539 }
1540
1541 return rez;
1542 },
1543
1544 // Check if image dimensions exceed parent element
1545 // ===============================================
1546
1547 canPan: function(nextWidth, nextHeight) {
1548 var self = this,
1549 current = self.current,
1550 pos = null,
1551 rez = false;
1552
1553 if (current.type === "image" && (current.isComplete || (nextWidth && nextHeight)) && !current.hasError) {
1554 rez = self.getFitPos(current);
1555
1556 if (nextWidth !== undefined && nextHeight !== undefined) {
1557 pos = {width: nextWidth, height: nextHeight};
1558 } else if (current.isComplete) {
1559 pos = $.fancybox.getTranslate(current.$content);
1560 }
1561
1562 if (pos && rez) {
1563 rez = Math.abs(pos.width - rez.width) > 1.5 || Math.abs(pos.height - rez.height) > 1.5;
1564 }
1565 }
1566
1567 return rez;
1568 },
1569
1570 // Load content into the slide
1571 // ===========================
1572
1573 loadSlide: function(slide) {
1574 var self = this,
1575 type,
1576 $slide,
1577 ajaxLoad;
1578
1579 if (slide.isLoading || slide.isLoaded) {
1580 return;
1581 }
1582
1583 slide.isLoading = true;
1584
1585 if (self.trigger("beforeLoad", slide) === false) {
1586 slide.isLoading = false;
1587
1588 return false;
1589 }
1590
1591 type = slide.type;
1592 $slide = slide.$slide;
1593
1594 $slide
1595 .off("refresh")
1596 .trigger("onReset")
1597 .addClass(slide.opts.slideClass);
1598
1599 // Create content depending on the type
1600 switch (type) {
1601 case "image":
1602 self.setImage(slide);
1603
1604 break;
1605
1606 case "iframe":
1607 self.setIframe(slide);
1608
1609 break;
1610
1611 case "html":
1612 self.setContent(slide, slide.src || slide.content);
1613
1614 break;
1615
1616 case "video":
1617 self.setContent(
1618 slide,
1619 slide.opts.video.tpl
1620 .replace(/\{\{src\}\}/gi, slide.src)
1621 .replace("{{format}}", slide.opts.videoFormat || slide.opts.video.format || "")
1622 .replace("{{poster}}", slide.thumb || "")
1623 );
1624
1625 break;
1626
1627 case "inline":
1628 if ($(slide.src).length) {
1629 self.setContent(slide, $(slide.src));
1630 } else {
1631 self.setError(slide);
1632 }
1633
1634 break;
1635
1636 case "ajax":
1637 self.showLoading(slide);
1638
1639 ajaxLoad = $.ajax(
1640 $.extend({}, slide.opts.ajax.settings, {
1641 url: slide.src,
1642 success: function(data, textStatus) {
1643 if (textStatus === "success") {
1644 self.setContent(slide, data);
1645 }
1646 },
1647 error: function(jqXHR, textStatus) {
1648 if (jqXHR && textStatus !== "abort") {
1649 self.setError(slide);
1650 }
1651 }
1652 })
1653 );
1654
1655 $slide.one("onReset", function() {
1656 ajaxLoad.abort();
1657 });
1658
1659 break;
1660
1661 default:
1662 self.setError(slide);
1663
1664 break;
1665 }
1666
1667 return true;
1668 },
1669
1670 // Use thumbnail image, if possible
1671 // ================================
1672
1673 setImage: function(slide) {
1674 var self = this,
1675 ghost;
1676
1677 // Check if need to show loading icon
1678 setTimeout(function() {
1679 var $img = slide.$image;
1680
1681 if (!self.isClosing && slide.isLoading && (!$img || !$img.length || !$img[0].complete) && !slide.hasError) {
1682 self.showLoading(slide);
1683 }
1684 }, 50);
1685
1686 //Check if image has srcset
1687 self.checkSrcset(slide);
1688
1689 // This will be wrapper containing both ghost and actual image
1690 slide.$content = $('<div class="fancybox-content"></div>')
1691 .addClass("fancybox-is-hidden")
1692 .appendTo(slide.$slide.addClass("fancybox-slide--image"));
1693
1694 // If we have a thumbnail, we can display it while actual image is loading
1695 // Users will not stare at black screen and actual image will appear gradually
1696 if (slide.opts.preload !== false && slide.opts.width && slide.opts.height && slide.thumb) {
1697 slide.width = slide.opts.width;
1698 slide.height = slide.opts.height;
1699
1700 ghost = document.createElement("img");
1701
1702 ghost.onerror = function() {
1703 $(this).remove();
1704
1705 slide.$ghost = null;
1706 };
1707
1708 ghost.onload = function() {
1709 self.afterLoad(slide);
1710 };
1711
1712 slide.$ghost = $(ghost)
1713 .addClass("fancybox-image")
1714 .appendTo(slide.$content)
1715 .attr("src", slide.thumb);
1716 }
1717
1718 // Start loading actual image
1719 self.setBigImage(slide);
1720 },
1721
1722 // Check if image has srcset and get the source
1723 // ============================================
1724 checkSrcset: function(slide) {
1725 var srcset = slide.opts.srcset || slide.opts.image.srcset,
1726 found,
1727 temp,
1728 pxRatio,
1729 windowWidth;
1730
1731 // If we have "srcset", then we need to find first matching "src" value.
1732 // This is necessary, because when you set an src attribute, the browser will preload the image
1733 // before any javascript or even CSS is applied.
1734 if (srcset) {
1735 pxRatio = window.devicePixelRatio || 1;
1736 windowWidth = window.innerWidth * pxRatio;
1737
1738 temp = srcset.split(",").map(function(el) {
1739 var ret = {};
1740
1741 el.trim()
1742 .split(/\s+/)
1743 .forEach(function(el, i) {
1744 var value = parseInt(el.substring(0, el.length - 1), 10);
1745
1746 if (i === 0) {
1747 return (ret.url = el);
1748 }
1749
1750 if (value) {
1751 ret.value = value;
1752 ret.postfix = el[el.length - 1];
1753 }
1754 });
1755
1756 return ret;
1757 });
1758
1759 // Sort by value
1760 temp.sort(function(a, b) {
1761 return a.value - b.value;
1762 });
1763
1764 // Ok, now we have an array of all srcset values
1765 for (var j = 0; j < temp.length; j++) {
1766 var el = temp[j];
1767
1768 if ((el.postfix === "w" && el.value >= windowWidth) || (el.postfix === "x" && el.value >= pxRatio)) {
1769 found = el;
1770 break;
1771 }
1772 }
1773
1774 // If not found, take the last one
1775 if (!found && temp.length) {
1776 found = temp[temp.length - 1];
1777 }
1778
1779 if (found) {
1780 slide.src = found.url;
1781
1782 // If we have default width/height values, we can calculate height for matching source
1783 if (slide.width && slide.height && found.postfix == "w") {
1784 slide.height = (slide.width / slide.height) * found.value;
1785 slide.width = found.value;
1786 }
1787
1788 slide.opts.srcset = srcset;
1789 }
1790 }
1791 },
1792
1793 // Create full-size image
1794 // ======================
1795
1796 setBigImage: function(slide) {
1797 var self = this,
1798 img = document.createElement("img"),
1799 $img = $(img);
1800
1801 slide.$image = $img
1802 .one("error", function() {
1803 self.setError(slide);
1804 })
1805 .one("load", function() {
1806 var sizes;
1807
1808 if (!slide.$ghost) {
1809 self.resolveImageSlideSize(slide, this.naturalWidth, this.naturalHeight);
1810
1811 self.afterLoad(slide);
1812 }
1813
1814 if (self.isClosing) {
1815 return;
1816 }
1817
1818 if (slide.opts.srcset) {
1819 sizes = slide.opts.sizes;
1820
1821 if (!sizes || sizes === "auto") {
1822 sizes =
1823 (slide.width / slide.height > 1 && $W.width() / $W.height() > 1 ? "100" : Math.round((slide.width / slide.height) * 100)) +
1824 "vw";
1825 }
1826
1827 $img.attr("sizes", sizes).attr("srcset", slide.opts.srcset);
1828 }
1829
1830 // Hide temporary image after some delay
1831 if (slide.$ghost) {
1832 setTimeout(function() {
1833 if (slide.$ghost && !self.isClosing) {
1834 slide.$ghost.hide();
1835 }
1836 }, Math.min(300, Math.max(1000, slide.height / 1600)));
1837 }
1838
1839 self.hideLoading(slide);
1840 })
1841 .addClass("fancybox-image")
1842 .attr("src", slide.src)
1843 .appendTo(slide.$content);
1844
1845 if ((img.complete || img.readyState == "complete") && $img.naturalWidth && $img.naturalHeight) {
1846 $img.trigger("load");
1847 } else if (img.error) {
1848 $img.trigger("error");
1849 }
1850 },
1851
1852 // Computes the slide size from image size and maxWidth/maxHeight
1853 // ==============================================================
1854
1855 resolveImageSlideSize: function(slide, imgWidth, imgHeight) {
1856 var maxWidth = parseInt(slide.opts.width, 10),
1857 maxHeight = parseInt(slide.opts.height, 10);
1858
1859 // Sets the default values from the image
1860 slide.width = imgWidth;
1861 slide.height = imgHeight;
1862
1863 if (maxWidth > 0) {
1864 slide.width = maxWidth;
1865 slide.height = Math.floor((maxWidth * imgHeight) / imgWidth);
1866 }
1867
1868 if (maxHeight > 0) {
1869 slide.width = Math.floor((maxHeight * imgWidth) / imgHeight);
1870 slide.height = maxHeight;
1871 }
1872 },
1873
1874 // Create iframe wrapper, iframe and bindings
1875 // ==========================================
1876
1877 setIframe: function(slide) {
1878 var self = this,
1879 opts = slide.opts.iframe,
1880 $slide = slide.$slide,
1881 $iframe;
1882
1883 slide.$content = $('<div class="fancybox-content' + (opts.preload ? " fancybox-is-hidden" : "") + '"></div>')
1884 .css(opts.css)
1885 .appendTo($slide);
1886
1887 $slide.addClass("fancybox-slide--" + slide.contentType);
1888
1889 slide.$iframe = $iframe = $(opts.tpl.replace(/\{rnd\}/g, new Date().getTime()))
1890 .attr(opts.attr)
1891 .appendTo(slide.$content);
1892
1893 if (opts.preload) {
1894 self.showLoading(slide);
1895
1896 // Unfortunately, it is not always possible to determine if iframe is successfully loaded
1897 // (due to browser security policy)
1898
1899 $iframe.on("load.fb error.fb", function(e) {
1900 this.isReady = 1;
1901
1902 slide.$slide.trigger("refresh");
1903
1904 self.afterLoad(slide);
1905 });
1906
1907 // Recalculate iframe content size
1908 // ===============================
1909
1910 $slide.on("refresh.fb", function() {
1911 var $content = slide.$content,
1912 frameWidth = opts.css.width,
1913 frameHeight = opts.css.height,
1914 $contents,
1915 $body;
1916
1917 if ($iframe[0].isReady !== 1) {
1918 return;
1919 }
1920
1921 try {
1922 $contents = $iframe.contents();
1923 $body = $contents.find("body");
1924 } catch (ignore) {}
1925
1926 // Calculate content dimensions, if it is accessible
1927 if ($body && $body.length && $body.children().length) {
1928 // Avoid scrolling to top (if multiple instances)
1929 $slide.css("overflow", "visible");
1930
1931 $content.css({
1932 width: "100%",
1933 "max-width": "100%",
1934 height: "9999px"
1935 });
1936
1937 if (frameWidth === undefined) {
1938 frameWidth = Math.ceil(Math.max($body[0].clientWidth, $body.outerWidth(true)));
1939 }
1940
1941 $content.css("width", frameWidth ? frameWidth : "").css("max-width", "");
1942
1943 if (frameHeight === undefined) {
1944 frameHeight = Math.ceil(Math.max($body[0].clientHeight, $body.outerHeight(true)));
1945 }
1946
1947 $content.css("height", frameHeight ? frameHeight : "");
1948
1949 $slide.css("overflow", "auto");
1950 }
1951
1952 $content.removeClass("fancybox-is-hidden");
1953 });
1954 } else {
1955 self.afterLoad(slide);
1956 }
1957
1958 $iframe.attr("src", slide.src);
1959
1960 // Remove iframe if closing or changing gallery item
1961 $slide.one("onReset", function() {
1962 // This helps IE not to throw errors when closing
1963 try {
1964 $(this)
1965 .find("iframe")
1966 .hide()
1967 .unbind()
1968 .attr("src", "//about:blank");
1969 } catch (ignore) {}
1970
1971 $(this)
1972 .off("refresh.fb")
1973 .empty();
1974
1975 slide.isLoaded = false;
1976 slide.isRevealed = false;
1977 });
1978 },
1979
1980 // Wrap and append content to the slide
1981 // ======================================
1982
1983 setContent: function(slide, content) {
1984 var self = this;
1985
1986 if (self.isClosing) {
1987 return;
1988 }
1989
1990 self.hideLoading(slide);
1991
1992 if (slide.$content) {
1993 $.fancybox.stop(slide.$content);
1994 }
1995
1996 slide.$slide.empty();
1997
1998 // If content is a jQuery object, then it will be moved to the slide.
1999 // The placeholder is created so we will know where to put it back.
2000 if (isQuery(content) && content.parent().length) {
2001 // Make sure content is not already moved to fancyBox
2002 if (content.hasClass("fancybox-content") || content.parent().hasClass("fancybox-content")) {
2003 content.parents(".fancybox-slide").trigger("onReset");
2004 }
2005
2006 // Create temporary element marking original place of the content
2007 slide.$placeholder = $("<div>")
2008 .hide()
2009 .insertAfter(content);
2010
2011 // Make sure content is visible
2012 content.css("display", "inline-block");
2013 } else if (!slide.hasError) {
2014 // If content is just a plain text, try to convert it to html
2015 if ($.type(content) === "string") {
2016 content = $("<div>")
2017 .append($.trim(content))
2018 .contents();
2019 }
2020
2021 // If "filter" option is provided, then filter content
2022 if (slide.opts.filter) {
2023 content = $("<div>")
2024 .html(content)
2025 .find(slide.opts.filter);
2026 }
2027 }
2028
2029 slide.$slide.one("onReset", function() {
2030 // Pause all html5 video/audio
2031 $(this)
2032 .find("video,audio")
2033 .trigger("pause");
2034
2035 // Put content back
2036 if (slide.$placeholder) {
2037 slide.$placeholder.after(content.removeClass("fancybox-content").hide()).remove();
2038
2039 slide.$placeholder = null;
2040 }
2041
2042 // Remove custom close button
2043 if (slide.$smallBtn) {
2044 slide.$smallBtn.remove();
2045
2046 slide.$smallBtn = null;
2047 }
2048
2049 // Remove content and mark slide as not loaded
2050 if (!slide.hasError) {
2051 $(this).empty();
2052
2053 slide.isLoaded = false;
2054 slide.isRevealed = false;
2055 }
2056 });
2057
2058 $(content).appendTo(slide.$slide);
2059
2060 if ($(content).is("video,audio")) {
2061 $(content).addClass("fancybox-video");
2062
2063 $(content).wrap("<div></div>");
2064
2065 slide.contentType = "video";
2066
2067 slide.opts.width = slide.opts.width || $(content).attr("width");
2068 slide.opts.height = slide.opts.height || $(content).attr("height");
2069 }
2070
2071 slide.$content = slide.$slide
2072 .children()
2073 .filter("div,form,main,video,audio,article,.fancybox-content")
2074 .first();
2075
2076 slide.$content.siblings().hide();
2077
2078 // Re-check if there is a valid content
2079 // (in some cases, ajax response can contain various elements or plain text)
2080 if (!slide.$content.length) {
2081 slide.$content = slide.$slide
2082 .wrapInner("<div></div>")
2083 .children()
2084 .first();
2085 }
2086
2087 slide.$content.addClass("fancybox-content");
2088
2089 slide.$slide.addClass("fancybox-slide--" + slide.contentType);
2090
2091 self.afterLoad(slide);
2092 },
2093
2094 // Display error message
2095 // =====================
2096
2097 setError: function(slide) {
2098 slide.hasError = true;
2099
2100 slide.$slide
2101 .trigger("onReset")
2102 .removeClass("fancybox-slide--" + slide.contentType)
2103 .addClass("fancybox-slide--error");
2104
2105 slide.contentType = "html";
2106
2107 this.setContent(slide, this.translate(slide, slide.opts.errorTpl));
2108
2109 if (slide.pos === this.currPos) {
2110 this.isAnimating = false;
2111 }
2112 },
2113
2114 // Show loading icon inside the slide
2115 // ==================================
2116
2117 showLoading: function(slide) {
2118 var self = this;
2119
2120 slide = slide || self.current;
2121
2122 if (slide && !slide.$spinner) {
2123 slide.$spinner = $(self.translate(self, self.opts.spinnerTpl))
2124 .appendTo(slide.$slide)
2125 .hide()
2126 .fadeIn("fast");
2127 }
2128 },
2129
2130 // Remove loading icon from the slide
2131 // ==================================
2132
2133 hideLoading: function(slide) {
2134 var self = this;
2135
2136 slide = slide || self.current;
2137
2138 if (slide && slide.$spinner) {
2139 slide.$spinner.stop().remove();
2140
2141 delete slide.$spinner;
2142 }
2143 },
2144
2145 // Adjustments after slide content has been loaded
2146 // ===============================================
2147
2148 afterLoad: function(slide) {
2149 var self = this;
2150
2151 if (self.isClosing) {
2152 return;
2153 }
2154
2155 slide.isLoading = false;
2156 slide.isLoaded = true;
2157
2158 self.trigger("afterLoad", slide);
2159
2160 self.hideLoading(slide);
2161
2162 // Add small close button
2163 if (slide.opts.smallBtn && (!slide.$smallBtn || !slide.$smallBtn.length)) {
2164 slide.$smallBtn = $(self.translate(slide, slide.opts.btnTpl.smallBtn)).appendTo(slide.$content);
2165 }
2166
2167 // Disable right click
2168 if (slide.opts.protect && slide.$content && !slide.hasError) {
2169 slide.$content.on("contextmenu.fb", function(e) {
2170 if (e.button == 2) {
2171 e.preventDefault();
2172 }
2173
2174 return true;
2175 });
2176
2177 // Add fake element on top of the image
2178 // This makes a bit harder for user to select image
2179 if (slide.type === "image") {
2180 $('<div class="fancybox-spaceball"></div>').appendTo(slide.$content);
2181 }
2182 }
2183
2184 self.adjustCaption(slide);
2185
2186 self.adjustLayout(slide);
2187
2188 if (slide.pos === self.currPos) {
2189 self.updateCursor();
2190 }
2191
2192 self.revealContent(slide);
2193 },
2194
2195 // Prevent caption overlap,
2196 // fix css inconsistency across browsers
2197 // =====================================
2198
2199 adjustCaption: function(slide) {
2200 var self = this,
2201 current = slide || self.current,
2202 caption = current.opts.caption,
2203 $caption = self.$refs.caption,
2204 captionH = false,
2205 preventOverlap = current.opts.preventCaptionOverlap;
2206
2207 $caption.toggleClass("fancybox-caption--separate", preventOverlap);
2208
2209 if (preventOverlap && caption && caption.length) {
2210 if (current.pos !== self.currPos) {
2211 $caption = $caption
2212 .clone()
2213 .empty()
2214 .appendTo($caption.parent());
2215
2216 $caption.html(caption);
2217
2218 captionH = $caption.outerHeight(true);
2219
2220 $caption.empty().remove();
2221 } else if (self.$caption) {
2222 captionH = self.$caption.outerHeight(true);
2223 }
2224
2225 current.$slide.css("padding-bottom", captionH || "");
2226 }
2227 },
2228
2229 // Simple hack to fix inconsistency across browsers, described here (affects Edge, too):
2230 // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
2231 // ====================================================================================
2232
2233 adjustLayout: function(slide) {
2234 var self = this,
2235 current = slide || self.current,
2236 scrollHeight,
2237 marginBottom,
2238 inlinePadding,
2239 actualPadding;
2240
2241 if (current.isLoaded && current.opts.disableLayoutFix !== true) {
2242 current.$content.css("margin-bottom", "");
2243
2244 // If we would always set margin-bottom for the content,
2245 // then it would potentially break vertical align
2246 if (current.$content.outerHeight() > current.$slide.height() + 0.5) {
2247 inlinePadding = current.$slide[0].style["padding-bottom"];
2248 actualPadding = current.$slide.css("padding-bottom");
2249
2250 if (parseFloat(actualPadding) > 0) {
2251 scrollHeight = current.$slide[0].scrollHeight;
2252
2253 current.$slide.css("padding-bottom", 0);
2254
2255 if (Math.abs(scrollHeight - current.$slide[0].scrollHeight) < 1) {
2256 marginBottom = actualPadding;
2257 }
2258
2259 current.$slide.css("padding-bottom", inlinePadding);
2260 }
2261 }
2262
2263 current.$content.css("margin-bottom", marginBottom);
2264 }
2265 },
2266
2267 // Make content visible
2268 // This method is called right after content has been loaded or
2269 // user navigates gallery and transition should start
2270 // ============================================================
2271
2272 revealContent: function(slide) {
2273 var self = this,
2274 $slide = slide.$slide,
2275 end = false,
2276 start = false,
2277 isMoved = self.isMoved(slide),
2278 isRevealed = slide.isRevealed,
2279 effect,
2280 effectClassName,
2281 duration,
2282 opacity;
2283
2284 slide.isRevealed = true;
2285
2286 effect = slide.opts[self.firstRun ? "animationEffect" : "transitionEffect"];
2287 duration = slide.opts[self.firstRun ? "animationDuration" : "transitionDuration"];
2288
2289 duration = parseInt(slide.forcedDuration === undefined ? duration : slide.forcedDuration, 10);
2290
2291 if (isMoved || slide.pos !== self.currPos || !duration) {
2292 effect = false;
2293 }
2294
2295 // Check if can zoom
2296 if (effect === "zoom") {
2297 if (slide.pos === self.currPos && duration && slide.type === "image" && !slide.hasError && (start = self.getThumbPos(slide))) {
2298 end = self.getFitPos(slide);
2299 } else {
2300 effect = "fade";
2301 }
2302 }
2303
2304 // Zoom animation
2305 // ==============
2306 if (effect === "zoom") {
2307 self.isAnimating = true;
2308
2309 end.scaleX = end.width / start.width;
2310 end.scaleY = end.height / start.height;
2311
2312 // Check if we need to animate opacity
2313 opacity = slide.opts.zoomOpacity;
2314
2315 if (opacity == "auto") {
2316 opacity = Math.abs(slide.width / slide.height - start.width / start.height) > 0.1;
2317 }
2318
2319 if (opacity) {
2320 start.opacity = 0.1;
2321 end.opacity = 1;
2322 }
2323
2324 // Draw image at start position
2325 $.fancybox.setTranslate(slide.$content.removeClass("fancybox-is-hidden"), start);
2326
2327 forceRedraw(slide.$content);
2328
2329 // Start animation
2330 $.fancybox.animate(slide.$content, end, duration, function() {
2331 self.isAnimating = false;
2332
2333 self.complete();
2334 });
2335
2336 return;
2337 }
2338
2339 self.updateSlide(slide);
2340
2341 // Simply show content if no effect
2342 // ================================
2343 if (!effect) {
2344 slide.$content.removeClass("fancybox-is-hidden");
2345
2346 if (!isRevealed && isMoved && slide.type === "image" && !slide.hasError) {
2347 slide.$content.hide().fadeIn("fast");
2348 }
2349
2350 if (slide.pos === self.currPos) {
2351 self.complete();
2352 }
2353
2354 return;
2355 }
2356
2357 // Prepare for CSS transiton
2358 // =========================
2359 $.fancybox.stop($slide);
2360
2361 //effectClassName = "fancybox-animated fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-fx-" + effect;
2362 effectClassName = "fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-animated fancybox-fx-" + effect;
2363
2364 $slide.addClass(effectClassName).removeClass("fancybox-slide--current"); //.addClass(effectClassName);
2365
2366 slide.$content.removeClass("fancybox-is-hidden");
2367
2368 // Force reflow
2369 forceRedraw($slide);
2370
2371 if (slide.type !== "image") {
2372 slide.$content.hide().show(0);
2373 }
2374
2375 $.fancybox.animate(
2376 $slide,
2377 "fancybox-slide--current",
2378 duration,
2379 function() {
2380 $slide.removeClass(effectClassName).css({
2381 transform: "",
2382 opacity: ""
2383 });
2384
2385 if (slide.pos === self.currPos) {
2386 self.complete();
2387 }
2388 },
2389 true
2390 );
2391 },
2392
2393 // Check if we can and have to zoom from thumbnail
2394 //================================================
2395
2396 getThumbPos: function(slide) {
2397 var rez = false,
2398 $thumb = slide.$thumb,
2399 thumbPos,
2400 btw,
2401 brw,
2402 bbw,
2403 blw;
2404
2405 if (!$thumb || !inViewport($thumb[0])) {
2406 return false;
2407 }
2408
2409 thumbPos = $.fancybox.getTranslate($thumb);
2410
2411 btw = parseFloat($thumb.css("border-top-width") || 0);
2412 brw = parseFloat($thumb.css("border-right-width") || 0);
2413 bbw = parseFloat($thumb.css("border-bottom-width") || 0);
2414 blw = parseFloat($thumb.css("border-left-width") || 0);
2415
2416 rez = {
2417 top: thumbPos.top + btw,
2418 left: thumbPos.left + blw,
2419 width: thumbPos.width - brw - blw,
2420 height: thumbPos.height - btw - bbw,
2421 scaleX: 1,
2422 scaleY: 1
2423 };
2424
2425 return thumbPos.width > 0 && thumbPos.height > 0 ? rez : false;
2426 },
2427
2428 // Final adjustments after current gallery item is moved to position
2429 // and it`s content is loaded
2430 // ==================================================================
2431
2432 complete: function() {
2433 var self = this,
2434 current = self.current,
2435 slides = {},
2436 $el;
2437
2438 if (self.isMoved() || !current.isLoaded) {
2439 return;
2440 }
2441
2442 if (!current.isComplete) {
2443 current.isComplete = true;
2444
2445 current.$slide.siblings().trigger("onReset");
2446
2447 self.preload("inline");
2448
2449 // Trigger any CSS transiton inside the slide
2450 forceRedraw(current.$slide);
2451
2452 current.$slide.addClass("fancybox-slide--complete");
2453
2454 // Remove unnecessary slides
2455 $.each(self.slides, function(key, slide) {
2456 if (slide.pos >= self.currPos - 1 && slide.pos <= self.currPos + 1) {
2457 slides[slide.pos] = slide;
2458 } else if (slide) {
2459 $.fancybox.stop(slide.$slide);
2460
2461 slide.$slide.off().remove();
2462 }
2463 });
2464
2465 self.slides = slides;
2466 }
2467
2468 self.isAnimating = false;
2469
2470 self.updateCursor();
2471
2472 self.trigger("afterShow");
2473
2474 // Autoplay first html5 video/audio
2475 if (!!current.opts.video.autoStart) {
2476 current.$slide
2477 .find("video,audio")
2478 .filter(":visible:first")
2479 .trigger("play")
2480 .one("ended", function() {
2481 if (this.webkitExitFullscreen) {
2482 this.webkitExitFullscreen();
2483 }
2484
2485 self.next();
2486 });
2487 }
2488
2489 // Try to focus on the first focusable element
2490 if (current.opts.autoFocus && current.contentType === "html") {
2491 // Look for the first input with autofocus attribute
2492 $el = current.$content.find("input[autofocus]:enabled:visible:first");
2493
2494 if ($el.length) {
2495 $el.trigger("focus");
2496 } else {
2497 self.focus(null, true);
2498 }
2499 }
2500
2501 // Avoid jumping
2502 current.$slide.scrollTop(0).scrollLeft(0);
2503 },
2504
2505 // Preload next and previous slides
2506 // ================================
2507
2508 preload: function(type) {
2509 var self = this,
2510 prev,
2511 next;
2512
2513 if (self.group.length < 2) {
2514 return;
2515 }
2516
2517 next = self.slides[self.currPos + 1];
2518 prev = self.slides[self.currPos - 1];
2519
2520 if (prev && prev.type === type) {
2521 self.loadSlide(prev);
2522 }
2523
2524 if (next && next.type === type) {
2525 self.loadSlide(next);
2526 }
2527 },
2528
2529 // Try to find and focus on the first focusable element
2530 // ====================================================
2531
2532 focus: function(e, firstRun) {
2533 var self = this,
2534 focusableStr = [
2535 "a[href]",
2536 "area[href]",
2537 'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
2538 "select:not([disabled]):not([aria-hidden])",
2539 "textarea:not([disabled]):not([aria-hidden])",
2540 "button:not([disabled]):not([aria-hidden])",
2541 "iframe",
2542 "object",
2543 "embed",
2544 "video",
2545 "audio",
2546 "[contenteditable]",
2547 '[tabindex]:not([tabindex^="-"])'
2548 ].join(","),
2549 focusableItems,
2550 focusedItemIndex;
2551
2552 if (self.isClosing) {
2553 return;
2554 }
2555
2556 if (e || !self.current || !self.current.isComplete) {
2557 // Focus on any element inside fancybox
2558 focusableItems = self.$refs.container.find("*:visible");
2559 } else {
2560 // Focus inside current slide
2561 focusableItems = self.current.$slide.find("*:visible" + (firstRun ? ":not(.fancybox-close-small)" : ""));
2562 }
2563
2564 focusableItems = focusableItems.filter(focusableStr).filter(function() {
2565 return $(this).css("visibility") !== "hidden" && !$(this).hasClass("disabled");
2566 });
2567
2568 if (focusableItems.length) {
2569 focusedItemIndex = focusableItems.index(document.activeElement);
2570
2571 if (e && e.shiftKey) {
2572 // Back tab
2573 if (focusedItemIndex < 0 || focusedItemIndex == 0) {
2574 e.preventDefault();
2575
2576 focusableItems.eq(focusableItems.length - 1).trigger("focus");
2577 }
2578 } else {
2579 // Outside or Forward tab
2580 if (focusedItemIndex < 0 || focusedItemIndex == focusableItems.length - 1) {
2581 if (e) {
2582 e.preventDefault();
2583 }
2584
2585 focusableItems.eq(0).trigger("focus");
2586 }
2587 }
2588 } else {
2589 self.$refs.container.trigger("focus");
2590 }
2591 },
2592
2593 // Activates current instance - brings container to the front and enables keyboard,
2594 // notifies other instances about deactivating
2595 // =================================================================================
2596
2597 activate: function() {
2598 var self = this;
2599
2600 // Deactivate all instances
2601 $(".fancybox-container").each(function() {
2602 var instance = $(this).data("FancyBox");
2603
2604 // Skip self and closing instances
2605 if (instance && instance.id !== self.id && !instance.isClosing) {
2606 instance.trigger("onDeactivate");
2607
2608 instance.removeEvents();
2609
2610 instance.isVisible = false;
2611 }
2612 });
2613
2614 self.isVisible = true;
2615
2616 if (self.current || self.isIdle) {
2617 self.update();
2618
2619 self.updateControls();
2620 }
2621
2622 self.trigger("onActivate");
2623
2624 self.addEvents();
2625 },
2626
2627 // Start closing procedure
2628 // This will start "zoom-out" animation if needed and clean everything up afterwards
2629 // =================================================================================
2630
2631 close: function(e, d) {
2632 var self = this,
2633 current = self.current,
2634 effect,
2635 duration,
2636 $content,
2637 domRect,
2638 opacity,
2639 start,
2640 end;
2641
2642 var done = function() {
2643 self.cleanUp(e);
2644 };
2645
2646 if (self.isClosing) {
2647 return false;
2648 }
2649
2650 self.isClosing = true;
2651
2652 // If beforeClose callback prevents closing, make sure content is centered
2653 if (self.trigger("beforeClose", e) === false) {
2654 self.isClosing = false;
2655
2656 requestAFrame(function() {
2657 self.update();
2658 });
2659
2660 return false;
2661 }
2662
2663 // Remove all events
2664 // If there are multiple instances, they will be set again by "activate" method
2665 self.removeEvents();
2666
2667 $content = current.$content;
2668 effect = current.opts.animationEffect;
2669 duration = $.isNumeric(d) ? d : effect ? current.opts.animationDuration : 0;
2670
2671 current.$slide.removeClass("fancybox-slide--complete fancybox-slide--next fancybox-slide--previous fancybox-animated");
2672
2673 if (e !== true) {
2674 $.fancybox.stop(current.$slide);
2675 } else {
2676 effect = false;
2677 }
2678
2679 // Remove other slides
2680 current.$slide
2681 .siblings()
2682 .trigger("onReset")
2683 .remove();
2684
2685 // Trigger animations
2686 if (duration) {
2687 self.$refs.container
2688 .removeClass("fancybox-is-open")
2689 .addClass("fancybox-is-closing")
2690 .css("transition-duration", duration + "ms");
2691 }
2692
2693 // Clean up
2694 self.hideLoading(current);
2695
2696 self.hideControls(true);
2697
2698 self.updateCursor();
2699
2700 // Check if possible to zoom-out
2701 if (
2702 effect === "zoom" &&
2703 !($content && duration && current.type === "image" && !self.isMoved() && !current.hasError && (end = self.getThumbPos(current)))
2704 ) {
2705 effect = "fade";
2706 }
2707
2708 if (effect === "zoom") {
2709 $.fancybox.stop($content);
2710
2711 domRect = $.fancybox.getTranslate($content);
2712
2713 start = {
2714 top: domRect.top,
2715 left: domRect.left,
2716 scaleX: domRect.width / end.width,
2717 scaleY: domRect.height / end.height,
2718 width: end.width,
2719 height: end.height
2720 };
2721
2722 // Check if we need to animate opacity
2723 opacity = current.opts.zoomOpacity;
2724
2725 if (opacity == "auto") {
2726 opacity = Math.abs(current.width / current.height - end.width / end.height) > 0.1;
2727 }
2728
2729 if (opacity) {
2730 end.opacity = 0;
2731 }
2732
2733 $.fancybox.setTranslate($content, start);
2734
2735 forceRedraw($content);
2736
2737 $.fancybox.animate($content, end, duration, done);
2738
2739 return true;
2740 }
2741
2742 if (effect && duration) {
2743 $.fancybox.animate(
2744 current.$slide.addClass("fancybox-slide--previous").removeClass("fancybox-slide--current"),
2745 "fancybox-animated fancybox-fx-" + effect,
2746 duration,
2747 done
2748 );
2749 } else {
2750 // If skip animation
2751 if (e === true) {
2752 setTimeout(done, duration);
2753 } else {
2754 done();
2755 }
2756 }
2757
2758 return true;
2759 },
2760
2761 // Final adjustments after removing the instance
2762 // =============================================
2763
2764 cleanUp: function(e) {
2765 var self = this,
2766 instance,
2767 $focus = self.current.opts.$orig,
2768 x,
2769 y;
2770
2771 self.current.$slide.trigger("onReset");
2772
2773 self.$refs.container.empty().remove();
2774
2775 self.trigger("afterClose", e);
2776
2777 // Place back focus
2778 if (!!self.current.opts.backFocus) {
2779 if (!$focus || !$focus.length || !$focus.is(":visible")) {
2780 $focus = self.$trigger;
2781 }
2782
2783 if ($focus && $focus.length) {
2784 x = window.scrollX;
2785 y = window.scrollY;
2786
2787 $focus.trigger("focus");
2788
2789 $("html, body")
2790 .scrollTop(y)
2791 .scrollLeft(x);
2792 }
2793 }
2794
2795 self.current = null;
2796
2797 // Check if there are other instances
2798 instance = $.fancybox.getInstance();
2799
2800 if (instance) {
2801 instance.activate();
2802 } else {
2803 $("body").removeClass("fancybox-active compensate-for-scrollbar");
2804
2805 $("#fancybox-style-noscroll").remove();
2806 }
2807 },
2808
2809 // Call callback and trigger an event
2810 // ==================================
2811
2812 trigger: function(name, slide) {
2813 var args = Array.prototype.slice.call(arguments, 1),
2814 self = this,
2815 obj = slide && slide.opts ? slide : self.current,
2816 rez;
2817
2818 if (obj) {
2819 args.unshift(obj);
2820 } else {
2821 obj = self;
2822 }
2823
2824 args.unshift(self);
2825
2826 if ($.isFunction(obj.opts[name])) {
2827 rez = obj.opts[name].apply(obj, args);
2828 }
2829
2830 if (rez === false) {
2831 return rez;
2832 }
2833
2834 if (name === "afterClose" || !self.$refs) {
2835 $D.trigger(name + ".fb", args);
2836 } else {
2837 self.$refs.container.trigger(name + ".fb", args);
2838 }
2839 },
2840
2841 // Update infobar values, navigation button states and reveal caption
2842 // ==================================================================
2843
2844 updateControls: function() {
2845 var self = this,
2846 current = self.current,
2847 index = current.index,
2848 $container = self.$refs.container,
2849 $caption = self.$refs.caption,
2850 caption = current.opts.caption;
2851
2852 // Recalculate content dimensions
2853 current.$slide.trigger("refresh");
2854
2855 // Set caption
2856 if (caption && caption.length) {
2857 self.$caption = $caption;
2858
2859 $caption
2860 .children()
2861 .eq(0)
2862 .html(caption);
2863 }
2864
2865 if (!self.hasHiddenControls && !self.isIdle) {
2866 self.showControls();
2867 }
2868
2869 // Update info and navigation elements
2870 $container.find("[data-fancybox-count]").html(self.group.length);
2871 $container.find("[data-fancybox-index]").html(index + 1);
2872
2873 $container.find("[data-fancybox-prev]").prop("disabled", !current.opts.loop && index <= 0);
2874 $container.find("[data-fancybox-next]").prop("disabled", !current.opts.loop && index >= self.group.length - 1);
2875
2876 if (current.type === "image") {
2877 // Re-enable buttons; update download button source
2878 $container
2879 .find("[data-fancybox-zoom]")
2880 .show()
2881 .end()
2882 .find("[data-fancybox-download]")
2883 .attr("href", current.opts.image.src || current.src)
2884 .show();
2885 } else if (current.opts.toolbar) {
2886 $container.find("[data-fancybox-download],[data-fancybox-zoom]").hide();
2887 }
2888
2889 // Make sure focus is not on disabled button/element
2890 if ($(document.activeElement).is(":hidden,[disabled]")) {
2891 self.$refs.container.trigger("focus");
2892 }
2893 },
2894
2895 // Hide toolbar and caption
2896 // ========================
2897
2898 hideControls: function(andCaption) {
2899 var self = this,
2900 arr = ["infobar", "toolbar", "nav"];
2901
2902 if (andCaption || !self.current.opts.preventCaptionOverlap) {
2903 arr.push("caption");
2904 }
2905
2906 this.$refs.container.removeClass(
2907 arr
2908 .map(function(i) {
2909 return "fancybox-show-" + i;
2910 })
2911 .join(" ")
2912 );
2913
2914 this.hasHiddenControls = true;
2915 },
2916
2917 showControls: function() {
2918 var self = this,
2919 opts = self.current ? self.current.opts : self.opts,
2920 $container = self.$refs.container;
2921
2922 self.hasHiddenControls = false;
2923 self.idleSecondsCounter = 0;
2924
2925 $container
2926 .toggleClass("fancybox-show-toolbar", !!(opts.toolbar && opts.buttons))
2927 .toggleClass("fancybox-show-infobar", !!(opts.infobar && self.group.length > 1))
2928 .toggleClass("fancybox-show-caption", !!self.$caption)
2929 .toggleClass("fancybox-show-nav", !!(opts.arrows && self.group.length > 1))
2930 .toggleClass("fancybox-is-modal", !!opts.modal);
2931 },
2932
2933 // Toggle toolbar and caption
2934 // ==========================
2935
2936 toggleControls: function() {
2937 if (this.hasHiddenControls) {
2938 this.showControls();
2939 } else {
2940 this.hideControls();
2941 }
2942 }
2943 });
2944
2945 $.fancybox = {
2946 version: "3.5.4",
2947 defaults: defaults,
2948
2949 // Get current instance and execute a command.
2950 //
2951 // Examples of usage:
2952 //
2953 // $instance = $.fancybox.getInstance();
2954 // $.fancybox.getInstance().jumpTo( 1 );
2955 // $.fancybox.getInstance( 'jumpTo', 1 );
2956 // $.fancybox.getInstance( function() {
2957 // console.info( this.currIndex );
2958 // });
2959 // ======================================================
2960
2961 getInstance: function(command) {
2962 var instance = $('.fancybox-container:not(".fancybox-is-closing"):last').data("FancyBox"),
2963 args = Array.prototype.slice.call(arguments, 1);
2964
2965 if (instance instanceof FancyBox) {
2966 if ($.type(command) === "string") {
2967 instance[command].apply(instance, args);
2968 } else if ($.type(command) === "function") {
2969 command.apply(instance, args);
2970 }
2971
2972 return instance;
2973 }
2974
2975 return false;
2976 },
2977
2978 // Create new instance
2979 // ===================
2980
2981 open: function(items, opts, index) {
2982 return new FancyBox(items, opts, index);
2983 },
2984
2985 // Close current or all instances
2986 // ==============================
2987
2988 close: function(all) {
2989 var instance = this.getInstance();
2990
2991 if (instance) {
2992 instance.close();
2993
2994 // Try to find and close next instance
2995 if (all === true) {
2996 this.close(all);
2997 }
2998 }
2999 },
3000
3001 // Close all instances and unbind all events
3002 // =========================================
3003
3004 destroy: function() {
3005 this.close(true);
3006
3007 $D.add("body").off("click.fb-start", "**");
3008 },
3009
3010 // Try to detect mobile devices
3011 // ============================
3012
3013 isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
3014
3015 // Detect if 'translate3d' support is available
3016 // ============================================
3017
3018 use3d: (function() {
3019 var div = document.createElement("div");
3020
3021 return (
3022 window.getComputedStyle &&
3023 window.getComputedStyle(div) &&
3024 window.getComputedStyle(div).getPropertyValue("transform") &&
3025 !(document.documentMode && document.documentMode < 11)
3026 );
3027 })(),
3028
3029 // Helper function to get current visual state of an element
3030 // returns array[ top, left, horizontal-scale, vertical-scale, opacity ]
3031 // =====================================================================
3032
3033 getTranslate: function($el) {
3034 var domRect;
3035
3036 if (!$el || !$el.length) {
3037 return false;
3038 }
3039
3040 domRect = $el[0].getBoundingClientRect();
3041
3042 return {
3043 top: domRect.top || 0,
3044 left: domRect.left || 0,
3045 width: domRect.width,
3046 height: domRect.height,
3047 opacity: parseFloat($el.css("opacity"))
3048 };
3049 },
3050
3051 // Shortcut for setting "translate3d" properties for element
3052 // Can set be used to set opacity, too
3053 // ========================================================
3054
3055 setTranslate: function($el, props) {
3056 var str = "",
3057 css = {};
3058
3059 if (!$el || !props) {
3060 return;
3061 }
3062
3063 if (props.left !== undefined || props.top !== undefined) {
3064 str =
3065 (props.left === undefined ? $el.position().left : props.left) +
3066 "px, " +
3067 (props.top === undefined ? $el.position().top : props.top) +
3068 "px";
3069
3070 if (this.use3d) {
3071 str = "translate3d(" + str + ", 0px)";
3072 } else {
3073 str = "translate(" + str + ")";
3074 }
3075 }
3076
3077 if (props.scaleX !== undefined && props.scaleY !== undefined) {
3078 str += " scale(" + props.scaleX + ", " + props.scaleY + ")";
3079 } else if (props.scaleX !== undefined) {
3080 str += " scaleX(" + props.scaleX + ")";
3081 }
3082
3083 if (str.length) {
3084 css.transform = str;
3085 }
3086
3087 if (props.opacity !== undefined) {
3088 css.opacity = props.opacity;
3089 }
3090
3091 if (props.width !== undefined) {
3092 css.width = props.width;
3093 }
3094
3095 if (props.height !== undefined) {
3096 css.height = props.height;
3097 }
3098
3099 return $el.css(css);
3100 },
3101
3102 // Simple CSS transition handler
3103 // =============================
3104
3105 animate: function($el, to, duration, callback, leaveAnimationName) {
3106 var self = this,
3107 from;
3108
3109 if ($.isFunction(duration)) {
3110 callback = duration;
3111 duration = null;
3112 }
3113
3114 self.stop($el);
3115
3116 from = self.getTranslate($el);
3117
3118 $el.on(transitionEnd, function(e) {
3119 // Skip events from child elements and z-index change
3120 if (e && e.originalEvent && (!$el.is(e.originalEvent.target) || e.originalEvent.propertyName == "z-index")) {
3121 return;
3122 }
3123
3124 self.stop($el);
3125
3126 if ($.isNumeric(duration)) {
3127 $el.css("transition-duration", "");
3128 }
3129
3130 if ($.isPlainObject(to)) {
3131 if (to.scaleX !== undefined && to.scaleY !== undefined) {
3132 self.setTranslate($el, {
3133 top: to.top,
3134 left: to.left,
3135 width: from.width * to.scaleX,
3136 height: from.height * to.scaleY,
3137 scaleX: 1,
3138 scaleY: 1
3139 });
3140 }
3141 } else if (leaveAnimationName !== true) {
3142 $el.removeClass(to);
3143 }
3144
3145 if ($.isFunction(callback)) {
3146 callback(e);
3147 }
3148 });
3149
3150 if ($.isNumeric(duration)) {
3151 $el.css("transition-duration", duration + "ms");
3152 }
3153
3154 // Start animation by changing CSS properties or class name
3155 if ($.isPlainObject(to)) {
3156 if (to.scaleX !== undefined && to.scaleY !== undefined) {
3157 delete to.width;
3158 delete to.height;
3159
3160 if ($el.parent().hasClass("fancybox-slide--image")) {
3161 $el.parent().addClass("fancybox-is-scaling");
3162 }
3163 }
3164
3165 $.fancybox.setTranslate($el, to);
3166 } else {
3167 $el.addClass(to);
3168 }
3169
3170 // Make sure that `transitionend` callback gets fired
3171 $el.data(
3172 "timer",
3173 setTimeout(function() {
3174 $el.trigger(transitionEnd);
3175 }, duration + 33)
3176 );
3177 },
3178
3179 stop: function($el, callCallback) {
3180 if ($el && $el.length) {
3181 clearTimeout($el.data("timer"));
3182
3183 if (callCallback) {
3184 $el.trigger(transitionEnd);
3185 }
3186
3187 $el.off(transitionEnd).css("transition-duration", "");
3188
3189 $el.parent().removeClass("fancybox-is-scaling");
3190 }
3191 }
3192 };
3193
3194 // Default click handler for "fancyboxed" links
3195 // ============================================
3196
3197 function _run(e, opts) {
3198 var items = [],
3199 index = 0,
3200 $target,
3201 value,
3202 instance;
3203
3204 // Avoid opening multiple times
3205 if (e && e.isDefaultPrevented()) {
3206 return;
3207 }
3208
3209 e.preventDefault();
3210
3211 opts = opts || {};
3212
3213 if (e && e.data) {
3214 opts = mergeOpts(e.data.options, opts);
3215 }
3216
3217 $target = opts.$target || $(e.currentTarget).trigger("blur");
3218 instance = $.fancybox.getInstance();
3219
3220 if (instance && instance.$trigger && instance.$trigger.is($target)) {
3221 return;
3222 }
3223
3224 if (opts.selector) {
3225 items = $(opts.selector);
3226 } else {
3227 // Get all related items and find index for clicked one
3228 value = $target.attr("data-fancybox") || "";
3229
3230 if (value) {
3231 items = e.data ? e.data.items : [];
3232 items = items.length ? items.filter('[data-fancybox="' + value + '"]') : $('[data-fancybox="' + value + '"]');
3233 } else {
3234 items = [$target];
3235 }
3236 }
3237
3238 index = $(items).index($target);
3239
3240 // Sometimes current item can not be found
3241 if (index < 0) {
3242 index = 0;
3243 }
3244
3245 instance = $.fancybox.open(items, opts, index);
3246
3247 // Save last active element
3248 instance.$trigger = $target;
3249 }
3250
3251 // Create a jQuery plugin
3252 // ======================
3253
3254 $.fn.fancybox = function(options) {
3255 var selector;
3256
3257 options = options || {};
3258 selector = options.selector || false;
3259
3260 if (selector) {
3261 // Use body element instead of document so it executes first
3262 $("body")
3263 .off("click.fb-start", selector)
3264 .on("click.fb-start", selector, {options: options}, _run);
3265 } else {
3266 this.off("click.fb-start").on(
3267 "click.fb-start",
3268 {
3269 items: this,
3270 options: options
3271 },
3272 _run
3273 );
3274 }
3275
3276 return this;
3277 };
3278
3279 // Self initializing plugin for all elements having `data-fancybox` attribute
3280 // ==========================================================================
3281
3282 $D.on("click.fb-start", "[data-fancybox]", _run);
3283
3284 // Enable "trigger elements"
3285 // =========================
3286
3287 $D.on("click.fb-start", "[data-fancybox-trigger]", function(e) {
3288 $('[data-fancybox="' + $(this).attr("data-fancybox-trigger") + '"]')
3289 .eq($(this).attr("data-fancybox-index") || 0)
3290 .trigger("click.fb-start", {
3291 $trigger: $(this)
3292 });
3293 });
3294
3295 // Track focus event for better accessibility styling
3296 // ==================================================
3297 (function() {
3298 var buttonStr = ".fancybox-button",
3299 focusStr = "fancybox-focus",
3300 $pressed = null;
3301
3302 $D.on("mousedown mouseup focus blur", buttonStr, function(e) {
3303 switch (e.type) {
3304 case "mousedown":
3305 $pressed = $(this);
3306 break;
3307 case "mouseup":
3308 $pressed = null;
3309 break;
3310 case "focusin":
3311 $(buttonStr).removeClass(focusStr);
3312
3313 if (!$(this).is($pressed) && !$(this).is("[disabled]")) {
3314 $(this).addClass(focusStr);
3315 }
3316 break;
3317 case "focusout":
3318 $(buttonStr).removeClass(focusStr);
3319 break;
3320 }
3321 });
3322 })();
3323})(window, document, jQuery);
3324
3325// ==========================================================================
3326//
3327// Media
3328// Adds additional media type support
3329//
3330// ==========================================================================
3331(function($) {
3332 "use strict";
3333
3334 // Object containing properties for each media type
3335 var defaults = {
3336 youtube: {
3337 matcher: /(youtube\.com|youtu\.be|youtube\-nocookie\.com)\/(watch\?(.*&)?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*))(.*)/i,
3338 params: {
3339 autoplay: 1,
3340 autohide: 1,
3341 fs: 1,
3342 rel: 0,
3343 hd: 1,
3344 wmode: "transparent",
3345 enablejsapi: 1,
3346 html5: 1
3347 },
3348 paramPlace: 8,
3349 type: "iframe",
3350 url: "https://www.youtube-nocookie.com/embed/$4",
3351 thumb: "https://img.youtube.com/vi/$4/hqdefault.jpg"
3352 },
3353
3354 vimeo: {
3355 matcher: /^.+vimeo.com\/(.*\/)?([\d]+)(.*)?/,
3356 params: {
3357 autoplay: 1,
3358 hd: 1,
3359 show_title: 1,
3360 show_byline: 1,
3361 show_portrait: 0,
3362 fullscreen: 1
3363 },
3364 paramPlace: 3,
3365 type: "iframe",
3366 url: "//player.vimeo.com/video/$2"
3367 },
3368
3369 instagram: {
3370 matcher: /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i,
3371 type: "image",
3372 url: "//$1/p/$2/media/?size=l"
3373 },
3374
3375 // Examples:
3376 // http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
3377 // https://www.google.com/maps/@37.7852006,-122.4146355,14.65z
3378 // https://www.google.com/maps/@52.2111123,2.9237542,6.61z?hl=en
3379 // https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572
3380 gmap_place: {
3381 matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(((maps\/(place\/(.*)\/)?\@(.*),(\d+.?\d+?)z))|(\?ll=))(.*)?/i,
3382 type: "iframe",
3383 url: function(rez) {
3384 return (
3385 "//maps.google." +
3386 rez[2] +
3387 "/?ll=" +
3388 (rez[9] ? rez[9] + "&z=" + Math.floor(rez[10]) + (rez[12] ? rez[12].replace(/^\//, "&") : "") : rez[12] + "").replace(/\?/, "&") +
3389 "&output=" +
3390 (rez[12] && rez[12].indexOf("layer=c") > 0 ? "svembed" : "embed")
3391 );
3392 }
3393 },
3394
3395 // Examples:
3396 // https://www.google.com/maps/search/Empire+State+Building/
3397 // https://www.google.com/maps/search/?api=1&query=centurylink+field
3398 // https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393
3399 gmap_search: {
3400 matcher: /(maps\.)?google\.([a-z]{2,3}(\.[a-z]{2})?)\/(maps\/search\/)(.*)/i,
3401 type: "iframe",
3402 url: function(rez) {
3403 return "//maps.google." + rez[2] + "/maps?q=" + rez[5].replace("query=", "q=").replace("api=1", "") + "&output=embed";
3404 }
3405 }
3406 };
3407
3408 // Formats matching url to final form
3409 var format = function(url, rez, params) {
3410 if (!url) {
3411 return;
3412 }
3413
3414 params = params || "";
3415
3416 if ($.type(params) === "object") {
3417 params = $.param(params, true);
3418 }
3419
3420 $.each(rez, function(key, value) {
3421 url = url.replace("$" + key, value || "");
3422 });
3423
3424 if (params.length) {
3425 url += (url.indexOf("?") > 0 ? "&" : "?") + params;
3426 }
3427
3428 return url;
3429 };
3430
3431 $(document).on("objectNeedsType.fb", function(e, instance, item) {
3432 var url = item.src || "",
3433 type = false,
3434 media,
3435 thumb,
3436 rez,
3437 params,
3438 urlParams,
3439 paramObj,
3440 provider;
3441
3442 media = $.extend(true, {}, defaults, item.opts.media);
3443
3444 // Look for any matching media type
3445 $.each(media, function(providerName, providerOpts) {
3446 rez = url.match(providerOpts.matcher);
3447
3448 if (!rez) {
3449 return;
3450 }
3451
3452 type = providerOpts.type;
3453 provider = providerName;
3454 paramObj = {};
3455
3456 if (providerOpts.paramPlace && rez[providerOpts.paramPlace]) {
3457 urlParams = rez[providerOpts.paramPlace];
3458
3459 if (urlParams[0] == "?") {
3460 urlParams = urlParams.substring(1);
3461 }
3462
3463 urlParams = urlParams.split("&");
3464
3465 for (var m = 0; m < urlParams.length; ++m) {
3466 var p = urlParams[m].split("=", 2);
3467
3468 if (p.length == 2) {
3469 paramObj[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
3470 }
3471 }
3472 }
3473
3474 params = $.extend(true, {}, providerOpts.params, item.opts[providerName], paramObj);
3475
3476 url =
3477 $.type(providerOpts.url) === "function" ? providerOpts.url.call(this, rez, params, item) : format(providerOpts.url, rez, params);
3478
3479 thumb =
3480 $.type(providerOpts.thumb) === "function" ? providerOpts.thumb.call(this, rez, params, item) : format(providerOpts.thumb, rez);
3481
3482 if (providerName === "youtube") {
3483 url = url.replace(/&t=((\d+)m)?(\d+)s/, function(match, p1, m, s) {
3484 return "&start=" + ((m ? parseInt(m, 10) * 60 : 0) + parseInt(s, 10));
3485 });
3486 } else if (providerName === "vimeo") {
3487 url = url.replace("&%23", "#");
3488 }
3489
3490 return false;
3491 });
3492
3493 // If it is found, then change content type and update the url
3494
3495 if (type) {
3496 if (!item.opts.thumb && !(item.opts.$thumb && item.opts.$thumb.length)) {
3497 item.opts.thumb = thumb;
3498 }
3499
3500 if (type === "iframe") {
3501 item.opts = $.extend(true, item.opts, {
3502 iframe: {
3503 preload: false,
3504 attr: {
3505 scrolling: "no"
3506 }
3507 }
3508 });
3509 }
3510
3511 $.extend(item, {
3512 type: type,
3513 src: url,
3514 origSrc: item.src,
3515 contentSource: provider,
3516 contentType: type === "image" ? "image" : provider == "gmap_place" || provider == "gmap_search" ? "map" : "video"
3517 });
3518 } else if (url) {
3519 item.type = item.opts.defaultType;
3520 }
3521 });
3522
3523 // Load YouTube/Video API on request to detect when video finished playing
3524 var VideoAPILoader = {
3525 youtube: {
3526 src: "https://www.youtube.com/iframe_api",
3527 class: "YT",
3528 loading: false,
3529 loaded: false
3530 },
3531
3532 vimeo: {
3533 src: "https://player.vimeo.com/api/player.js",
3534 class: "Vimeo",
3535 loading: false,
3536 loaded: false
3537 },
3538
3539 load: function(vendor) {
3540 var _this = this,
3541 script;
3542
3543 if (this[vendor].loaded) {
3544 setTimeout(function() {
3545 _this.done(vendor);
3546 });
3547 return;
3548 }
3549
3550 if (this[vendor].loading) {
3551 return;
3552 }
3553
3554 this[vendor].loading = true;
3555
3556 script = document.createElement("script");
3557 script.type = "text/javascript";
3558 script.src = this[vendor].src;
3559
3560 if (vendor === "youtube") {
3561 window.onYouTubeIframeAPIReady = function() {
3562 _this[vendor].loaded = true;
3563 _this.done(vendor);
3564 };
3565 } else {
3566 script.onload = function() {
3567 _this[vendor].loaded = true;
3568 _this.done(vendor);
3569 };
3570 }
3571
3572 document.body.appendChild(script);
3573 },
3574 done: function(vendor) {
3575 var instance, $el, player;
3576
3577 if (vendor === "youtube") {
3578 delete window.onYouTubeIframeAPIReady;
3579 }
3580
3581 instance = $.fancybox.getInstance();
3582
3583 if (instance) {
3584 $el = instance.current.$content.find("iframe");
3585
3586 if (vendor === "youtube" && YT !== undefined && YT) {
3587 player = new YT.Player($el.attr("id"), {
3588 events: {
3589 onStateChange: function(e) {
3590 if (e.data == 0) {
3591 instance.next();
3592 }
3593 }
3594 }
3595 });
3596 } else if (vendor === "vimeo" && Vimeo !== undefined && Vimeo) {
3597 player = new Vimeo.Player($el);
3598
3599 player.on("ended", function() {
3600 instance.next();
3601 });
3602 }
3603 }
3604 }
3605 };
3606
3607 $(document).on({
3608 "afterShow.fb": function(e, instance, current) {
3609 if (instance.group.length > 1 && (current.contentSource === "youtube" || current.contentSource === "vimeo")) {
3610 VideoAPILoader.load(current.contentSource);
3611 }
3612 }
3613 });
3614})(jQuery);
3615
3616// ==========================================================================
3617//
3618// Guestures
3619// Adds touch guestures, handles click and tap events
3620//
3621// ==========================================================================
3622(function(window, document, $) {
3623 "use strict";
3624
3625 var requestAFrame = (function() {
3626 return (
3627 window.requestAnimationFrame ||
3628 window.webkitRequestAnimationFrame ||
3629 window.mozRequestAnimationFrame ||
3630 window.oRequestAnimationFrame ||
3631 // if all else fails, use setTimeout
3632 function(callback) {
3633 return window.setTimeout(callback, 1000 / 60);
3634 }
3635 );
3636 })();
3637
3638 var cancelAFrame = (function() {
3639 return (
3640 window.cancelAnimationFrame ||
3641 window.webkitCancelAnimationFrame ||
3642 window.mozCancelAnimationFrame ||
3643 window.oCancelAnimationFrame ||
3644 function(id) {
3645 window.clearTimeout(id);
3646 }
3647 );
3648 })();
3649
3650 var getPointerXY = function(e) {
3651 var result = [];
3652
3653 e = e.originalEvent || e || window.e;
3654 e = e.touches && e.touches.length ? e.touches : e.changedTouches && e.changedTouches.length ? e.changedTouches : [e];
3655
3656 for (var key in e) {
3657 if (e[key].pageX) {
3658 result.push({
3659 x: e[key].pageX,
3660 y: e[key].pageY
3661 });
3662 } else if (e[key].clientX) {
3663 result.push({
3664 x: e[key].clientX,
3665 y: e[key].clientY
3666 });
3667 }
3668 }
3669
3670 return result;
3671 };
3672
3673 var distance = function(point2, point1, what) {
3674 if (!point1 || !point2) {
3675 return 0;
3676 }
3677
3678 if (what === "x") {
3679 return point2.x - point1.x;
3680 } else if (what === "y") {
3681 return point2.y - point1.y;
3682 }
3683
3684 return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
3685 };
3686
3687 var isClickable = function($el) {
3688 if (
3689 $el.is('a,area,button,[role="button"],input,label,select,summary,textarea,video,audio,iframe') ||
3690 $.isFunction($el.get(0).onclick) ||
3691 $el.data("selectable")
3692 ) {
3693 return true;
3694 }
3695
3696 // Check for attributes like data-fancybox-next or data-fancybox-close
3697 for (var i = 0, atts = $el[0].attributes, n = atts.length; i < n; i++) {
3698 if (atts[i].nodeName.substr(0, 14) === "data-fancybox-") {
3699 return true;
3700 }
3701 }
3702
3703 return false;
3704 };
3705
3706 var hasScrollbars = function(el) {
3707 var overflowY = window.getComputedStyle(el)["overflow-y"],
3708 overflowX = window.getComputedStyle(el)["overflow-x"],
3709 vertical = (overflowY === "scroll" || overflowY === "auto") && el.scrollHeight > el.clientHeight,
3710 horizontal = (overflowX === "scroll" || overflowX === "auto") && el.scrollWidth > el.clientWidth;
3711
3712 return vertical || horizontal;
3713 };
3714
3715 var isScrollable = function($el) {
3716 var rez = false;
3717
3718 while (true) {
3719 rez = hasScrollbars($el.get(0));
3720
3721 if (rez) {
3722 break;
3723 }
3724
3725 $el = $el.parent();
3726
3727 if (!$el.length || $el.hasClass("fancybox-stage") || $el.is("body")) {
3728 break;
3729 }
3730 }
3731
3732 return rez;
3733 };
3734
3735 var Guestures = function(instance) {
3736 var self = this;
3737
3738 self.instance = instance;
3739
3740 self.$bg = instance.$refs.bg;
3741 self.$stage = instance.$refs.stage;
3742 self.$container = instance.$refs.container;
3743
3744 self.destroy();
3745
3746 self.$container.on("touchstart.fb.touch mousedown.fb.touch", $.proxy(self, "ontouchstart"));
3747 };
3748
3749 Guestures.prototype.destroy = function() {
3750 var self = this;
3751
3752 self.$container.off(".fb.touch");
3753
3754 $(document).off(".fb.touch");
3755
3756 if (self.requestId) {
3757 cancelAFrame(self.requestId);
3758 self.requestId = null;
3759 }
3760
3761 if (self.tapped) {
3762 clearTimeout(self.tapped);
3763 self.tapped = null;
3764 }
3765 };
3766
3767 Guestures.prototype.ontouchstart = function(e) {
3768 var self = this,
3769 $target = $(e.target),
3770 instance = self.instance,
3771 current = instance.current,
3772 $slide = current.$slide,
3773 $content = current.$content,
3774 isTouchDevice = e.type == "touchstart";
3775
3776 // Do not respond to both (touch and mouse) events
3777 if (isTouchDevice) {
3778 self.$container.off("mousedown.fb.touch");
3779 }
3780
3781 // Ignore right click
3782 if (e.originalEvent && e.originalEvent.button == 2) {
3783 return;
3784 }
3785
3786 // Ignore taping on links, buttons, input elements
3787 if (!$slide.length || !$target.length || isClickable($target) || isClickable($target.parent())) {
3788 return;
3789 }
3790 // Ignore clicks on the scrollbar
3791 if (!$target.is("img") && e.originalEvent.clientX > $target[0].clientWidth + $target.offset().left) {
3792 return;
3793 }
3794
3795 // Ignore clicks while zooming or closing
3796 if (!current || instance.isAnimating || current.$slide.hasClass("fancybox-animated")) {
3797 e.stopPropagation();
3798 e.preventDefault();
3799
3800 return;
3801 }
3802
3803 self.realPoints = self.startPoints = getPointerXY(e);
3804
3805 if (!self.startPoints.length) {
3806 return;
3807 }
3808
3809 // Allow other scripts to catch touch event if "touch" is set to false
3810 if (current.touch) {
3811 e.stopPropagation();
3812 }
3813
3814 self.startEvent = e;
3815
3816 self.canTap = true;
3817 self.$target = $target;
3818 self.$content = $content;
3819 self.opts = current.opts.touch;
3820
3821 self.isPanning = false;
3822 self.isSwiping = false;
3823 self.isZooming = false;
3824 self.isScrolling = false;
3825 self.canPan = instance.canPan();
3826
3827 self.startTime = new Date().getTime();
3828 self.distanceX = self.distanceY = self.distance = 0;
3829
3830 self.canvasWidth = Math.round($slide[0].clientWidth);
3831 self.canvasHeight = Math.round($slide[0].clientHeight);
3832
3833 self.contentLastPos = null;
3834 self.contentStartPos = $.fancybox.getTranslate(self.$content) || {top: 0, left: 0};
3835 self.sliderStartPos = $.fancybox.getTranslate($slide);
3836
3837 // Since position will be absolute, but we need to make it relative to the stage
3838 self.stagePos = $.fancybox.getTranslate(instance.$refs.stage);
3839
3840 self.sliderStartPos.top -= self.stagePos.top;
3841 self.sliderStartPos.left -= self.stagePos.left;
3842
3843 self.contentStartPos.top -= self.stagePos.top;
3844 self.contentStartPos.left -= self.stagePos.left;
3845
3846 $(document)
3847 .off(".fb.touch")
3848 .on(isTouchDevice ? "touchend.fb.touch touchcancel.fb.touch" : "mouseup.fb.touch mouseleave.fb.touch", $.proxy(self, "ontouchend"))
3849 .on(isTouchDevice ? "touchmove.fb.touch" : "mousemove.fb.touch", $.proxy(self, "ontouchmove"));
3850
3851 if ($.fancybox.isMobile) {
3852 document.addEventListener("scroll", self.onscroll, true);
3853 }
3854
3855 // Skip if clicked outside the sliding area
3856 if (!(self.opts || self.canPan) || !($target.is(self.$stage) || self.$stage.find($target).length)) {
3857 if ($target.is(".fancybox-image")) {
3858 e.preventDefault();
3859 }
3860
3861 if (!($.fancybox.isMobile && $target.hasClass("fancybox-caption"))) {
3862 return;
3863 }
3864 }
3865
3866 self.isScrollable = isScrollable($target) || isScrollable($target.parent());
3867
3868 // Check if element is scrollable and try to prevent default behavior (scrolling)
3869 if (!($.fancybox.isMobile && self.isScrollable)) {
3870 e.preventDefault();
3871 }
3872
3873 // One finger or mouse click - swipe or pan an image
3874 if (self.startPoints.length === 1 || current.hasError) {
3875 if (self.canPan) {
3876 $.fancybox.stop(self.$content);
3877
3878 self.isPanning = true;
3879 } else {
3880 self.isSwiping = true;
3881 }
3882
3883 self.$container.addClass("fancybox-is-grabbing");
3884 }
3885
3886 // Two fingers - zoom image
3887 if (self.startPoints.length === 2 && current.type === "image" && (current.isLoaded || current.$ghost)) {
3888 self.canTap = false;
3889 self.isSwiping = false;
3890 self.isPanning = false;
3891
3892 self.isZooming = true;
3893
3894 $.fancybox.stop(self.$content);
3895
3896 self.centerPointStartX = (self.startPoints[0].x + self.startPoints[1].x) * 0.5 - $(window).scrollLeft();
3897 self.centerPointStartY = (self.startPoints[0].y + self.startPoints[1].y) * 0.5 - $(window).scrollTop();
3898
3899 self.percentageOfImageAtPinchPointX = (self.centerPointStartX - self.contentStartPos.left) / self.contentStartPos.width;
3900 self.percentageOfImageAtPinchPointY = (self.centerPointStartY - self.contentStartPos.top) / self.contentStartPos.height;
3901
3902 self.startDistanceBetweenFingers = distance(self.startPoints[0], self.startPoints[1]);
3903 }
3904 };
3905
3906 Guestures.prototype.onscroll = function(e) {
3907 var self = this;
3908
3909 self.isScrolling = true;
3910
3911 document.removeEventListener("scroll", self.onscroll, true);
3912 };
3913
3914 Guestures.prototype.ontouchmove = function(e) {
3915 var self = this;
3916
3917 // Make sure user has not released over iframe or disabled element
3918 if (e.originalEvent.buttons !== undefined && e.originalEvent.buttons === 0) {
3919 self.ontouchend(e);
3920 return;
3921 }
3922
3923 if (self.isScrolling) {
3924 self.canTap = false;
3925 return;
3926 }
3927
3928 self.newPoints = getPointerXY(e);
3929
3930 if (!(self.opts || self.canPan) || !self.newPoints.length || !self.newPoints.length) {
3931 return;
3932 }
3933
3934 if (!(self.isSwiping && self.isSwiping === true)) {
3935 e.preventDefault();
3936 }
3937
3938 self.distanceX = distance(self.newPoints[0], self.startPoints[0], "x");
3939 self.distanceY = distance(self.newPoints[0], self.startPoints[0], "y");
3940
3941 self.distance = distance(self.newPoints[0], self.startPoints[0]);
3942
3943 // Skip false ontouchmove events (Chrome)
3944 if (self.distance > 0) {
3945 if (self.isSwiping) {
3946 self.onSwipe(e);
3947 } else if (self.isPanning) {
3948 self.onPan();
3949 } else if (self.isZooming) {
3950 self.onZoom();
3951 }
3952 }
3953 };
3954
3955 Guestures.prototype.onSwipe = function(e) {
3956 var self = this,
3957 instance = self.instance,
3958 swiping = self.isSwiping,
3959 left = self.sliderStartPos.left || 0,
3960 angle;
3961
3962 // If direction is not yet determined
3963 if (swiping === true) {
3964 // We need at least 10px distance to correctly calculate an angle
3965 if (Math.abs(self.distance) > 10) {
3966 self.canTap = false;
3967
3968 if (instance.group.length < 2 && self.opts.vertical) {
3969 self.isSwiping = "y";
3970 } else if (instance.isDragging || self.opts.vertical === false || (self.opts.vertical === "auto" && $(window).width() > 800)) {
3971 self.isSwiping = "x";
3972 } else {
3973 angle = Math.abs((Math.atan2(self.distanceY, self.distanceX) * 180) / Math.PI);
3974
3975 self.isSwiping = angle > 45 && angle < 135 ? "y" : "x";
3976 }
3977
3978 if (self.isSwiping === "y" && $.fancybox.isMobile && self.isScrollable) {
3979 self.isScrolling = true;
3980
3981 return;
3982 }
3983
3984 instance.isDragging = self.isSwiping;
3985
3986 // Reset points to avoid jumping, because we dropped first swipes to calculate the angle
3987 self.startPoints = self.newPoints;
3988
3989 $.each(instance.slides, function(index, slide) {
3990 var slidePos, stagePos;
3991
3992 $.fancybox.stop(slide.$slide);
3993
3994 slidePos = $.fancybox.getTranslate(slide.$slide);
3995 stagePos = $.fancybox.getTranslate(instance.$refs.stage);
3996
3997 slide.$slide
3998 .css({
3999 transform: "",
4000 opacity: "",
4001 "transition-duration": ""
4002 })
4003 .removeClass("fancybox-animated")
4004 .removeClass(function(index, className) {
4005 return (className.match(/(^|\s)fancybox-fx-\S+/g) || []).join(" ");
4006 });
4007
4008 if (slide.pos === instance.current.pos) {
4009 self.sliderStartPos.top = slidePos.top - stagePos.top;
4010 self.sliderStartPos.left = slidePos.left - stagePos.left;
4011 }
4012
4013 $.fancybox.setTranslate(slide.$slide, {
4014 top: slidePos.top - stagePos.top,
4015 left: slidePos.left - stagePos.left
4016 });
4017 });
4018
4019 // Stop slideshow
4020 if (instance.SlideShow && instance.SlideShow.isActive) {
4021 instance.SlideShow.stop();
4022 }
4023 }
4024
4025 return;
4026 }
4027
4028 // Sticky edges
4029 if (swiping == "x") {
4030 if (
4031 self.distanceX > 0 &&
4032 (self.instance.group.length < 2 || (self.instance.current.index === 0 && !self.instance.current.opts.loop))
4033 ) {
4034 left = left + Math.pow(self.distanceX, 0.8);
4035 } else if (
4036 self.distanceX < 0 &&
4037 (self.instance.group.length < 2 ||
4038 (self.instance.current.index === self.instance.group.length - 1 && !self.instance.current.opts.loop))
4039 ) {
4040 left = left - Math.pow(-self.distanceX, 0.8);
4041 } else {
4042 left = left + self.distanceX;
4043 }
4044 }
4045
4046 self.sliderLastPos = {
4047 top: swiping == "x" ? 0 : self.sliderStartPos.top + self.distanceY,
4048 left: left
4049 };
4050
4051 if (self.requestId) {
4052 cancelAFrame(self.requestId);
4053
4054 self.requestId = null;
4055 }
4056
4057 self.requestId = requestAFrame(function() {
4058 if (self.sliderLastPos) {
4059 $.each(self.instance.slides, function(index, slide) {
4060 var pos = slide.pos - self.instance.currPos;
4061
4062 $.fancybox.setTranslate(slide.$slide, {
4063 top: self.sliderLastPos.top,
4064 left: self.sliderLastPos.left + pos * self.canvasWidth + pos * slide.opts.gutter
4065 });
4066 });
4067
4068 self.$container.addClass("fancybox-is-sliding");
4069 }
4070 });
4071 };
4072
4073 Guestures.prototype.onPan = function() {
4074 var self = this;
4075
4076 // Prevent accidental movement (sometimes, when tapping casually, finger can move a bit)
4077 if (distance(self.newPoints[0], self.realPoints[0]) < ($.fancybox.isMobile ? 10 : 5)) {
4078 self.startPoints = self.newPoints;
4079 return;
4080 }
4081
4082 self.canTap = false;
4083
4084 self.contentLastPos = self.limitMovement();
4085
4086 if (self.requestId) {
4087 cancelAFrame(self.requestId);
4088 }
4089
4090 self.requestId = requestAFrame(function() {
4091 $.fancybox.setTranslate(self.$content, self.contentLastPos);
4092 });
4093 };
4094
4095 // Make panning sticky to the edges
4096 Guestures.prototype.limitMovement = function() {
4097 var self = this;
4098
4099 var canvasWidth = self.canvasWidth;
4100 var canvasHeight = self.canvasHeight;
4101
4102 var distanceX = self.distanceX;
4103 var distanceY = self.distanceY;
4104
4105 var contentStartPos = self.contentStartPos;
4106
4107 var currentOffsetX = contentStartPos.left;
4108 var currentOffsetY = contentStartPos.top;
4109
4110 var currentWidth = contentStartPos.width;
4111 var currentHeight = contentStartPos.height;
4112
4113 var minTranslateX, minTranslateY, maxTranslateX, maxTranslateY, newOffsetX, newOffsetY;
4114
4115 if (currentWidth > canvasWidth) {
4116 newOffsetX = currentOffsetX + distanceX;
4117 } else {
4118 newOffsetX = currentOffsetX;
4119 }
4120
4121 newOffsetY = currentOffsetY + distanceY;
4122
4123 // Slow down proportionally to traveled distance
4124 minTranslateX = Math.max(0, canvasWidth * 0.5 - currentWidth * 0.5);
4125 minTranslateY = Math.max(0, canvasHeight * 0.5 - currentHeight * 0.5);
4126
4127 maxTranslateX = Math.min(canvasWidth - currentWidth, canvasWidth * 0.5 - currentWidth * 0.5);
4128 maxTranslateY = Math.min(canvasHeight - currentHeight, canvasHeight * 0.5 - currentHeight * 0.5);
4129
4130 // ->
4131 if (distanceX > 0 && newOffsetX > minTranslateX) {
4132 newOffsetX = minTranslateX - 1 + Math.pow(-minTranslateX + currentOffsetX + distanceX, 0.8) || 0;
4133 }
4134
4135 // <-
4136 if (distanceX < 0 && newOffsetX < maxTranslateX) {
4137 newOffsetX = maxTranslateX + 1 - Math.pow(maxTranslateX - currentOffsetX - distanceX, 0.8) || 0;
4138 }
4139
4140 // \/
4141 if (distanceY > 0 && newOffsetY > minTranslateY) {
4142 newOffsetY = minTranslateY - 1 + Math.pow(-minTranslateY + currentOffsetY + distanceY, 0.8) || 0;
4143 }
4144
4145 // /\
4146 if (distanceY < 0 && newOffsetY < maxTranslateY) {
4147 newOffsetY = maxTranslateY + 1 - Math.pow(maxTranslateY - currentOffsetY - distanceY, 0.8) || 0;
4148 }
4149
4150 return {
4151 top: newOffsetY,
4152 left: newOffsetX
4153 };
4154 };
4155
4156 Guestures.prototype.limitPosition = function(newOffsetX, newOffsetY, newWidth, newHeight) {
4157 var self = this;
4158
4159 var canvasWidth = self.canvasWidth;
4160 var canvasHeight = self.canvasHeight;
4161
4162 if (newWidth > canvasWidth) {
4163 newOffsetX = newOffsetX > 0 ? 0 : newOffsetX;
4164 newOffsetX = newOffsetX < canvasWidth - newWidth ? canvasWidth - newWidth : newOffsetX;
4165 } else {
4166 // Center horizontally
4167 newOffsetX = Math.max(0, canvasWidth / 2 - newWidth / 2);
4168 }
4169
4170 if (newHeight > canvasHeight) {
4171 newOffsetY = newOffsetY > 0 ? 0 : newOffsetY;
4172 newOffsetY = newOffsetY < canvasHeight - newHeight ? canvasHeight - newHeight : newOffsetY;
4173 } else {
4174 // Center vertically
4175 newOffsetY = Math.max(0, canvasHeight / 2 - newHeight / 2);
4176 }
4177
4178 return {
4179 top: newOffsetY,
4180 left: newOffsetX
4181 };
4182 };
4183
4184 Guestures.prototype.onZoom = function() {
4185 var self = this;
4186
4187 // Calculate current distance between points to get pinch ratio and new width and height
4188 var contentStartPos = self.contentStartPos;
4189
4190 var currentWidth = contentStartPos.width;
4191 var currentHeight = contentStartPos.height;
4192
4193 var currentOffsetX = contentStartPos.left;
4194 var currentOffsetY = contentStartPos.top;
4195
4196 var endDistanceBetweenFingers = distance(self.newPoints[0], self.newPoints[1]);
4197
4198 var pinchRatio = endDistanceBetweenFingers / self.startDistanceBetweenFingers;
4199
4200 var newWidth = Math.floor(currentWidth * pinchRatio);
4201 var newHeight = Math.floor(currentHeight * pinchRatio);
4202
4203 // This is the translation due to pinch-zooming
4204 var translateFromZoomingX = (currentWidth - newWidth) * self.percentageOfImageAtPinchPointX;
4205 var translateFromZoomingY = (currentHeight - newHeight) * self.percentageOfImageAtPinchPointY;
4206
4207 // Point between the two touches
4208 var centerPointEndX = (self.newPoints[0].x + self.newPoints[1].x) / 2 - $(window).scrollLeft();
4209 var centerPointEndY = (self.newPoints[0].y + self.newPoints[1].y) / 2 - $(window).scrollTop();
4210
4211 // And this is the translation due to translation of the centerpoint
4212 // between the two fingers
4213 var translateFromTranslatingX = centerPointEndX - self.centerPointStartX;
4214 var translateFromTranslatingY = centerPointEndY - self.centerPointStartY;
4215
4216 // The new offset is the old/current one plus the total translation
4217 var newOffsetX = currentOffsetX + (translateFromZoomingX + translateFromTranslatingX);
4218 var newOffsetY = currentOffsetY + (translateFromZoomingY + translateFromTranslatingY);
4219
4220 var newPos = {
4221 top: newOffsetY,
4222 left: newOffsetX,
4223 scaleX: pinchRatio,
4224 scaleY: pinchRatio
4225 };
4226
4227 self.canTap = false;
4228
4229 self.newWidth = newWidth;
4230 self.newHeight = newHeight;
4231
4232 self.contentLastPos = newPos;
4233
4234 if (self.requestId) {
4235 cancelAFrame(self.requestId);
4236 }
4237
4238 self.requestId = requestAFrame(function() {
4239 $.fancybox.setTranslate(self.$content, self.contentLastPos);
4240 });
4241 };
4242
4243 Guestures.prototype.ontouchend = function(e) {
4244 var self = this;
4245
4246 var swiping = self.isSwiping;
4247 var panning = self.isPanning;
4248 var zooming = self.isZooming;
4249 var scrolling = self.isScrolling;
4250
4251 self.endPoints = getPointerXY(e);
4252 self.dMs = Math.max(new Date().getTime() - self.startTime, 1);
4253
4254 self.$container.removeClass("fancybox-is-grabbing");
4255
4256 $(document).off(".fb.touch");
4257
4258 document.removeEventListener("scroll", self.onscroll, true);
4259
4260 if (self.requestId) {
4261 cancelAFrame(self.requestId);
4262
4263 self.requestId = null;
4264 }
4265
4266 self.isSwiping = false;
4267 self.isPanning = false;
4268 self.isZooming = false;
4269 self.isScrolling = false;
4270
4271 self.instance.isDragging = false;
4272
4273 if (self.canTap) {
4274 return self.onTap(e);
4275 }
4276
4277 self.speed = 100;
4278
4279 // Speed in px/ms
4280 self.velocityX = (self.distanceX / self.dMs) * 0.5;
4281 self.velocityY = (self.distanceY / self.dMs) * 0.5;
4282
4283 if (panning) {
4284 self.endPanning();
4285 } else if (zooming) {
4286 self.endZooming();
4287 } else {
4288 self.endSwiping(swiping, scrolling);
4289 }
4290
4291 return;
4292 };
4293
4294 Guestures.prototype.endSwiping = function(swiping, scrolling) {
4295 var self = this,
4296 ret = false,
4297 len = self.instance.group.length,
4298 distanceX = Math.abs(self.distanceX),
4299 canAdvance = swiping == "x" && len > 1 && ((self.dMs > 130 && distanceX > 10) || distanceX > 50),
4300 speedX = 300;
4301
4302 self.sliderLastPos = null;
4303
4304 // Close if swiped vertically / navigate if horizontally
4305 if (swiping == "y" && !scrolling && Math.abs(self.distanceY) > 50) {
4306 // Continue vertical movement
4307 $.fancybox.animate(
4308 self.instance.current.$slide,
4309 {
4310 top: self.sliderStartPos.top + self.distanceY + self.velocityY * 150,
4311 opacity: 0
4312 },
4313 200
4314 );
4315 ret = self.instance.close(true, 250);
4316 } else if (canAdvance && self.distanceX > 0) {
4317 ret = self.instance.previous(speedX);
4318 } else if (canAdvance && self.distanceX < 0) {
4319 ret = self.instance.next(speedX);
4320 }
4321
4322 if (ret === false && (swiping == "x" || swiping == "y")) {
4323 self.instance.centerSlide(200);
4324 }
4325
4326 self.$container.removeClass("fancybox-is-sliding");
4327 };
4328
4329 // Limit panning from edges
4330 // ========================
4331 Guestures.prototype.endPanning = function() {
4332 var self = this,
4333 newOffsetX,
4334 newOffsetY,
4335 newPos;
4336
4337 if (!self.contentLastPos) {
4338 return;
4339 }
4340
4341 if (self.opts.momentum === false || self.dMs > 350) {
4342 newOffsetX = self.contentLastPos.left;
4343 newOffsetY = self.contentLastPos.top;
4344 } else {
4345 // Continue movement
4346 newOffsetX = self.contentLastPos.left + self.velocityX * 500;
4347 newOffsetY = self.contentLastPos.top + self.velocityY * 500;
4348 }
4349
4350 newPos = self.limitPosition(newOffsetX, newOffsetY, self.contentStartPos.width, self.contentStartPos.height);
4351
4352 newPos.width = self.contentStartPos.width;
4353 newPos.height = self.contentStartPos.height;
4354
4355 $.fancybox.animate(self.$content, newPos, 366);
4356 };
4357
4358 Guestures.prototype.endZooming = function() {
4359 var self = this;
4360
4361 var current = self.instance.current;
4362
4363 var newOffsetX, newOffsetY, newPos, reset;
4364
4365 var newWidth = self.newWidth;
4366 var newHeight = self.newHeight;
4367
4368 if (!self.contentLastPos) {
4369 return;
4370 }
4371
4372 newOffsetX = self.contentLastPos.left;
4373 newOffsetY = self.contentLastPos.top;
4374
4375 reset = {
4376 top: newOffsetY,
4377 left: newOffsetX,
4378 width: newWidth,
4379 height: newHeight,
4380 scaleX: 1,
4381 scaleY: 1
4382 };
4383
4384 // Reset scalex/scaleY values; this helps for perfomance and does not break animation
4385 $.fancybox.setTranslate(self.$content, reset);
4386
4387 if (newWidth < self.canvasWidth && newHeight < self.canvasHeight) {
4388 self.instance.scaleToFit(150);
4389 } else if (newWidth > current.width || newHeight > current.height) {
4390 self.instance.scaleToActual(self.centerPointStartX, self.centerPointStartY, 150);
4391 } else {
4392 newPos = self.limitPosition(newOffsetX, newOffsetY, newWidth, newHeight);
4393
4394 $.fancybox.animate(self.$content, newPos, 150);
4395 }
4396 };
4397
4398 Guestures.prototype.onTap = function(e) {
4399 var self = this;
4400 var $target = $(e.target);
4401
4402 var instance = self.instance;
4403 var current = instance.current;
4404
4405 var endPoints = (e && getPointerXY(e)) || self.startPoints;
4406
4407 var tapX = endPoints[0] ? endPoints[0].x - $(window).scrollLeft() - self.stagePos.left : 0;
4408 var tapY = endPoints[0] ? endPoints[0].y - $(window).scrollTop() - self.stagePos.top : 0;
4409
4410 var where;
4411
4412 var process = function(prefix) {
4413 var action = current.opts[prefix];
4414
4415 if ($.isFunction(action)) {
4416 action = action.apply(instance, [current, e]);
4417 }
4418
4419 if (!action) {
4420 return;
4421 }
4422
4423 switch (action) {
4424 case "close":
4425 instance.close(self.startEvent);
4426
4427 break;
4428
4429 case "toggleControls":
4430 instance.toggleControls();
4431
4432 break;
4433
4434 case "next":
4435 instance.next();
4436
4437 break;
4438
4439 case "nextOrClose":
4440 if (instance.group.length > 1) {
4441 instance.next();
4442 } else {
4443 instance.close(self.startEvent);
4444 }
4445
4446 break;
4447
4448 case "zoom":
4449 if (current.type == "image" && (current.isLoaded || current.$ghost)) {
4450 if (instance.canPan()) {
4451 instance.scaleToFit();
4452 } else if (instance.isScaledDown()) {
4453 instance.scaleToActual(tapX, tapY);
4454 } else if (instance.group.length < 2) {
4455 instance.close(self.startEvent);
4456 }
4457 }
4458
4459 break;
4460 }
4461 };
4462
4463 // Ignore right click
4464 if (e.originalEvent && e.originalEvent.button == 2) {
4465 return;
4466 }
4467
4468 // Skip if clicked on the scrollbar
4469 if (!$target.is("img") && tapX > $target[0].clientWidth + $target.offset().left) {
4470 return;
4471 }
4472
4473 // Check where is clicked
4474 if ($target.is(".fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-container")) {
4475 where = "Outside";
4476 } else if ($target.is(".fancybox-slide")) {
4477 where = "Slide";
4478 } else if (
4479 instance.current.$content &&
4480 instance.current.$content
4481 .find($target)
4482 .addBack()
4483 .filter($target).length
4484 ) {
4485 where = "Content";
4486 } else {
4487 return;
4488 }
4489
4490 // Check if this is a double tap
4491 if (self.tapped) {
4492 // Stop previously created single tap
4493 clearTimeout(self.tapped);
4494 self.tapped = null;
4495
4496 // Skip if distance between taps is too big
4497 if (Math.abs(tapX - self.tapX) > 50 || Math.abs(tapY - self.tapY) > 50) {
4498 return this;
4499 }
4500
4501 // OK, now we assume that this is a double-tap
4502 process("dblclick" + where);
4503 } else {
4504 // Single tap will be processed if user has not clicked second time within 300ms
4505 // or there is no need to wait for double-tap
4506 self.tapX = tapX;
4507 self.tapY = tapY;
4508
4509 if (current.opts["dblclick" + where] && current.opts["dblclick" + where] !== current.opts["click" + where]) {
4510 self.tapped = setTimeout(function() {
4511 self.tapped = null;
4512
4513 if (!instance.isAnimating) {
4514 process("click" + where);
4515 }
4516 }, 500);
4517 } else {
4518 process("click" + where);
4519 }
4520 }
4521
4522 return this;
4523 };
4524
4525 $(document)
4526 .on("onActivate.fb", function(e, instance) {
4527 if (instance && !instance.Guestures) {
4528 instance.Guestures = new Guestures(instance);
4529 }
4530 })
4531 .on("beforeClose.fb", function(e, instance) {
4532 if (instance && instance.Guestures) {
4533 instance.Guestures.destroy();
4534 }
4535 });
4536})(window, document, jQuery);
4537
4538// ==========================================================================
4539//
4540// SlideShow
4541// Enables slideshow functionality
4542//
4543// Example of usage:
4544// $.fancybox.getInstance().SlideShow.start()
4545//
4546// ==========================================================================
4547(function(document, $) {
4548 "use strict";
4549
4550 $.extend(true, $.fancybox.defaults, {
4551 btnTpl: {
4552 slideShow:
4553 '<button data-fancybox-play class="fancybox-button fancybox-button--play" title="{{PLAY_START}}">' +
4554 '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 5.4v13.2l11-6.6z"/></svg>' +
4555 '<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>' +
4556 "</button>"
4557 },
4558 slideShow: {
4559 autoStart: false,
4560 speed: 3000,
4561 progress: true
4562 }
4563 });
4564
4565 var SlideShow = function(instance) {
4566 this.instance = instance;
4567 this.init();
4568 };
4569
4570 $.extend(SlideShow.prototype, {
4571 timer: null,
4572 isActive: false,
4573 $button: null,
4574
4575 init: function() {
4576 var self = this,
4577 instance = self.instance,
4578 opts = instance.group[instance.currIndex].opts.slideShow;
4579
4580 self.$button = instance.$refs.toolbar.find("[data-fancybox-play]").on("click", function() {
4581 self.toggle();
4582 });
4583
4584 if (instance.group.length < 2 || !opts) {
4585 self.$button.hide();
4586 } else if (opts.progress) {
4587 self.$progress = $('<div class="fancybox-progress"></div>').appendTo(instance.$refs.inner);
4588 }
4589 },
4590
4591 set: function(force) {
4592 var self = this,
4593 instance = self.instance,
4594 current = instance.current;
4595
4596 // Check if reached last element
4597 if (current && (force === true || current.opts.loop || instance.currIndex < instance.group.length - 1)) {
4598 if (self.isActive && current.contentType !== "video") {
4599 if (self.$progress) {
4600 $.fancybox.animate(self.$progress.show(), {scaleX: 1}, current.opts.slideShow.speed);
4601 }
4602
4603 self.timer = setTimeout(function() {
4604 if (!instance.current.opts.loop && instance.current.index == instance.group.length - 1) {
4605 instance.jumpTo(0);
4606 } else {
4607 instance.next();
4608 }
4609 }, current.opts.slideShow.speed);
4610 }
4611 } else {
4612 self.stop();
4613 instance.idleSecondsCounter = 0;
4614 instance.showControls();
4615 }
4616 },
4617
4618 clear: function() {
4619 var self = this;
4620
4621 clearTimeout(self.timer);
4622
4623 self.timer = null;
4624
4625 if (self.$progress) {
4626 self.$progress.removeAttr("style").hide();
4627 }
4628 },
4629
4630 start: function() {
4631 var self = this,
4632 current = self.instance.current;
4633
4634 if (current) {
4635 self.$button
4636 .attr("title", (current.opts.i18n[current.opts.lang] || current.opts.i18n.en).PLAY_STOP)
4637 .removeClass("fancybox-button--play")
4638 .addClass("fancybox-button--pause");
4639
4640 self.isActive = true;
4641
4642 if (current.isComplete) {
4643 self.set(true);
4644 }
4645
4646 self.instance.trigger("onSlideShowChange", true);
4647 }
4648 },
4649
4650 stop: function() {
4651 var self = this,
4652 current = self.instance.current;
4653
4654 self.clear();
4655
4656 self.$button
4657 .attr("title", (current.opts.i18n[current.opts.lang] || current.opts.i18n.en).PLAY_START)
4658 .removeClass("fancybox-button--pause")
4659 .addClass("fancybox-button--play");
4660
4661 self.isActive = false;
4662
4663 self.instance.trigger("onSlideShowChange", false);
4664
4665 if (self.$progress) {
4666 self.$progress.removeAttr("style").hide();
4667 }
4668 },
4669
4670 toggle: function() {
4671 var self = this;
4672
4673 if (self.isActive) {
4674 self.stop();
4675 } else {
4676 self.start();
4677 }
4678 }
4679 });
4680
4681 $(document).on({
4682 "onInit.fb": function(e, instance) {
4683 if (instance && !instance.SlideShow) {
4684 instance.SlideShow = new SlideShow(instance);
4685 }
4686 },
4687
4688 "beforeShow.fb": function(e, instance, current, firstRun) {
4689 var SlideShow = instance && instance.SlideShow;
4690
4691 if (firstRun) {
4692 if (SlideShow && current.opts.slideShow.autoStart) {
4693 SlideShow.start();
4694 }
4695 } else if (SlideShow && SlideShow.isActive) {
4696 SlideShow.clear();
4697 }
4698 },
4699
4700 "afterShow.fb": function(e, instance, current) {
4701 var SlideShow = instance && instance.SlideShow;
4702
4703 if (SlideShow && SlideShow.isActive) {
4704 SlideShow.set();
4705 }
4706 },
4707
4708 "afterKeydown.fb": function(e, instance, current, keypress, keycode) {
4709 var SlideShow = instance && instance.SlideShow;
4710
4711 // "P" or Spacebar
4712 if (SlideShow && current.opts.slideShow && (keycode === 80 || keycode === 32) && !$(document.activeElement).is("button,a,input")) {
4713 keypress.preventDefault();
4714
4715 SlideShow.toggle();
4716 }
4717 },
4718
4719 "beforeClose.fb onDeactivate.fb": function(e, instance) {
4720 var SlideShow = instance && instance.SlideShow;
4721
4722 if (SlideShow) {
4723 SlideShow.stop();
4724 }
4725 }
4726 });
4727
4728 // Page Visibility API to pause slideshow when window is not active
4729 $(document).on("visibilitychange", function() {
4730 var instance = $.fancybox.getInstance(),
4731 SlideShow = instance && instance.SlideShow;
4732
4733 if (SlideShow && SlideShow.isActive) {
4734 if (document.hidden) {
4735 SlideShow.clear();
4736 } else {
4737 SlideShow.set();
4738 }
4739 }
4740 });
4741})(document, jQuery);
4742
4743// ==========================================================================
4744//
4745// FullScreen
4746// Adds fullscreen functionality
4747//
4748// ==========================================================================
4749(function(document, $) {
4750 "use strict";
4751
4752 // Collection of methods supported by user browser
4753 var fn = (function() {
4754 var fnMap = [
4755 ["requestFullscreen", "exitFullscreen", "fullscreenElement", "fullscreenEnabled", "fullscreenchange", "fullscreenerror"],
4756 // new WebKit
4757 [
4758 "webkitRequestFullscreen",
4759 "webkitExitFullscreen",
4760 "webkitFullscreenElement",
4761 "webkitFullscreenEnabled",
4762 "webkitfullscreenchange",
4763 "webkitfullscreenerror"
4764 ],
4765 // old WebKit (Safari 5.1)
4766 [
4767 "webkitRequestFullScreen",
4768 "webkitCancelFullScreen",
4769 "webkitCurrentFullScreenElement",
4770 "webkitCancelFullScreen",
4771 "webkitfullscreenchange",
4772 "webkitfullscreenerror"
4773 ],
4774 [
4775 "mozRequestFullScreen",
4776 "mozCancelFullScreen",
4777 "mozFullScreenElement",
4778 "mozFullScreenEnabled",
4779 "mozfullscreenchange",
4780 "mozfullscreenerror"
4781 ],
4782 ["msRequestFullscreen", "msExitFullscreen", "msFullscreenElement", "msFullscreenEnabled", "MSFullscreenChange", "MSFullscreenError"]
4783 ];
4784
4785 var ret = {};
4786
4787 for (var i = 0; i < fnMap.length; i++) {
4788 var val = fnMap[i];
4789
4790 if (val && val[1] in document) {
4791 for (var j = 0; j < val.length; j++) {
4792 ret[fnMap[0][j]] = val[j];
4793 }
4794
4795 return ret;
4796 }
4797 }
4798
4799 return false;
4800 })();
4801
4802 if (fn) {
4803 var FullScreen = {
4804 request: function(elem) {
4805 elem = elem || document.documentElement;
4806
4807 elem[fn.requestFullscreen](elem.ALLOW_KEYBOARD_INPUT);
4808 },
4809 exit: function() {
4810 document[fn.exitFullscreen]();
4811 },
4812 toggle: function(elem) {
4813 elem = elem || document.documentElement;
4814
4815 if (this.isFullscreen()) {
4816 this.exit();
4817 } else {
4818 this.request(elem);
4819 }
4820 },
4821 isFullscreen: function() {
4822 return Boolean(document[fn.fullscreenElement]);
4823 },
4824 enabled: function() {
4825 return Boolean(document[fn.fullscreenEnabled]);
4826 }
4827 };
4828
4829 $.extend(true, $.fancybox.defaults, {
4830 btnTpl: {
4831 fullScreen:
4832 '<button data-fancybox-fullscreen class="fancybox-button fancybox-button--fsenter" title="{{FULL_SCREEN}}">' +
4833 '<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>' +
4834 '<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>' +
4835 "</button>"
4836 },
4837 fullScreen: {
4838 autoStart: false
4839 }
4840 });
4841
4842 $(document).on(fn.fullscreenchange, function() {
4843 var isFullscreen = FullScreen.isFullscreen(),
4844 instance = $.fancybox.getInstance();
4845
4846 if (instance) {
4847 // If image is zooming, then force to stop and reposition properly
4848 if (instance.current && instance.current.type === "image" && instance.isAnimating) {
4849 instance.isAnimating = false;
4850
4851 instance.update(true, true, 0);
4852
4853 if (!instance.isComplete) {
4854 instance.complete();
4855 }
4856 }
4857
4858 instance.trigger("onFullscreenChange", isFullscreen);
4859
4860 instance.$refs.container.toggleClass("fancybox-is-fullscreen", isFullscreen);
4861
4862 instance.$refs.toolbar
4863 .find("[data-fancybox-fullscreen]")
4864 .toggleClass("fancybox-button--fsenter", !isFullscreen)
4865 .toggleClass("fancybox-button--fsexit", isFullscreen);
4866 }
4867 });
4868 }
4869
4870 $(document).on({
4871 "onInit.fb": function(e, instance) {
4872 var $container;
4873
4874 if (!fn) {
4875 instance.$refs.toolbar.find("[data-fancybox-fullscreen]").remove();
4876
4877 return;
4878 }
4879
4880 if (instance && instance.group[instance.currIndex].opts.fullScreen) {
4881 $container = instance.$refs.container;
4882
4883 $container.on("click.fb-fullscreen", "[data-fancybox-fullscreen]", function(e) {
4884 e.stopPropagation();
4885 e.preventDefault();
4886
4887 FullScreen.toggle();
4888 });
4889
4890 if (instance.opts.fullScreen && instance.opts.fullScreen.autoStart === true) {
4891 FullScreen.request();
4892 }
4893
4894 // Expose API
4895 instance.FullScreen = FullScreen;
4896 } else if (instance) {
4897 instance.$refs.toolbar.find("[data-fancybox-fullscreen]").hide();
4898 }
4899 },
4900
4901 "afterKeydown.fb": function(e, instance, current, keypress, keycode) {
4902 // "F"
4903 if (instance && instance.FullScreen && keycode === 70) {
4904 keypress.preventDefault();
4905
4906 instance.FullScreen.toggle();
4907 }
4908 },
4909
4910 "beforeClose.fb": function(e, instance) {
4911 if (instance && instance.FullScreen && instance.$refs.container.hasClass("fancybox-is-fullscreen")) {
4912 FullScreen.exit();
4913 }
4914 }
4915 });
4916})(document, jQuery);
4917
4918// ==========================================================================
4919//
4920// Thumbs
4921// Displays thumbnails in a grid
4922//
4923// ==========================================================================
4924(function(document, $) {
4925 "use strict";
4926
4927 var CLASS = "fancybox-thumbs",
4928 CLASS_ACTIVE = CLASS + "-active";
4929
4930 // Make sure there are default values
4931 $.fancybox.defaults = $.extend(
4932 true,
4933 {
4934 btnTpl: {
4935 thumbs:
4936 '<button data-fancybox-thumbs class="fancybox-button fancybox-button--thumbs" title="{{THUMBS}}">' +
4937 '<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>' +
4938 "</button>"
4939 },
4940 thumbs: {
4941 autoStart: false, // Display thumbnails on opening
4942 hideOnClose: true, // Hide thumbnail grid when closing animation starts
4943 parentEl: ".fancybox-container", // Container is injected into this element
4944 axis: "y" // Vertical (y) or horizontal (x) scrolling
4945 }
4946 },
4947 $.fancybox.defaults
4948 );
4949
4950 var FancyThumbs = function(instance) {
4951 this.init(instance);
4952 };
4953
4954 $.extend(FancyThumbs.prototype, {
4955 $button: null,
4956 $grid: null,
4957 $list: null,
4958 isVisible: false,
4959 isActive: false,
4960
4961 init: function(instance) {
4962 var self = this,
4963 group = instance.group,
4964 enabled = 0;
4965
4966 self.instance = instance;
4967 self.opts = group[instance.currIndex].opts.thumbs;
4968
4969 instance.Thumbs = self;
4970
4971 self.$button = instance.$refs.toolbar.find("[data-fancybox-thumbs]");
4972
4973 // Enable thumbs if at least two group items have thumbnails
4974 for (var i = 0, len = group.length; i < len; i++) {
4975 if (group[i].thumb) {
4976 enabled++;
4977 }
4978
4979 if (enabled > 1) {
4980 break;
4981 }
4982 }
4983
4984 if (enabled > 1 && !!self.opts) {
4985 self.$button.removeAttr("style").on("click", function() {
4986 self.toggle();
4987 });
4988
4989 self.isActive = true;
4990 } else {
4991 self.$button.hide();
4992 }
4993 },
4994
4995 create: function() {
4996 var self = this,
4997 instance = self.instance,
4998 parentEl = self.opts.parentEl,
4999 list = [],
5000 src;
5001
5002 if (!self.$grid) {
5003 // Create main element
5004 self.$grid = $('<div class="' + CLASS + " " + CLASS + "-" + self.opts.axis + '"></div>').appendTo(
5005 instance.$refs.container
5006 .find(parentEl)
5007 .addBack()
5008 .filter(parentEl)
5009 );
5010
5011 // Add "click" event that performs gallery navigation
5012 self.$grid.on("click", "a", function() {
5013 instance.jumpTo($(this).attr("data-index"));
5014 });
5015 }
5016
5017 // Build the list
5018 if (!self.$list) {
5019 self.$list = $('<div class="' + CLASS + '__list">').appendTo(self.$grid);
5020 }
5021
5022 $.each(instance.group, function(i, item) {
5023 src = item.thumb;
5024
5025 if (!src && item.type === "image") {
5026 src = item.src;
5027 }
5028
5029 list.push(
5030 '<a href="javascript:;" tabindex="0" data-index="' +
5031 i +
5032 '"' +
5033 (src && src.length ? ' style="background-image:url(' + src + ')"' : 'class="fancybox-thumbs-missing"') +
5034 "></a>"
5035 );
5036 });
5037
5038 self.$list[0].innerHTML = list.join("");
5039
5040 if (self.opts.axis === "x") {
5041 // Set fixed width for list element to enable horizontal scrolling
5042 self.$list.width(
5043 parseInt(self.$grid.css("padding-right"), 10) +
5044 instance.group.length *
5045 self.$list
5046 .children()
5047 .eq(0)
5048 .outerWidth(true)
5049 );
5050 }
5051 },
5052
5053 focus: function(duration) {
5054 var self = this,
5055 $list = self.$list,
5056 $grid = self.$grid,
5057 thumb,
5058 thumbPos;
5059
5060 if (!self.instance.current) {
5061 return;
5062 }
5063
5064 thumb = $list
5065 .children()
5066 .removeClass(CLASS_ACTIVE)
5067 .filter('[data-index="' + self.instance.current.index + '"]')
5068 .addClass(CLASS_ACTIVE);
5069
5070 thumbPos = thumb.position();
5071
5072 // Check if need to scroll to make current thumb visible
5073 if (self.opts.axis === "y" && (thumbPos.top < 0 || thumbPos.top > $list.height() - thumb.outerHeight())) {
5074 $list.stop().animate(
5075 {
5076 scrollTop: $list.scrollTop() + thumbPos.top
5077 },
5078 duration
5079 );
5080 } else if (
5081 self.opts.axis === "x" &&
5082 (thumbPos.left < $grid.scrollLeft() || thumbPos.left > $grid.scrollLeft() + ($grid.width() - thumb.outerWidth()))
5083 ) {
5084 $list
5085 .parent()
5086 .stop()
5087 .animate(
5088 {
5089 scrollLeft: thumbPos.left
5090 },
5091 duration
5092 );
5093 }
5094 },
5095
5096 update: function() {
5097 var that = this;
5098 that.instance.$refs.container.toggleClass("fancybox-show-thumbs", this.isVisible);
5099
5100 if (that.isVisible) {
5101 if (!that.$grid) {
5102 that.create();
5103 }
5104
5105 that.instance.trigger("onThumbsShow");
5106
5107 that.focus(0);
5108 } else if (that.$grid) {
5109 that.instance.trigger("onThumbsHide");
5110 }
5111
5112 // Update content position
5113 that.instance.update();
5114 },
5115
5116 hide: function() {
5117 this.isVisible = false;
5118 this.update();
5119 },
5120
5121 show: function() {
5122 this.isVisible = true;
5123 this.update();
5124 },
5125
5126 toggle: function() {
5127 this.isVisible = !this.isVisible;
5128 this.update();
5129 }
5130 });
5131
5132 $(document).on({
5133 "onInit.fb": function(e, instance) {
5134 var Thumbs;
5135
5136 if (instance && !instance.Thumbs) {
5137 Thumbs = new FancyThumbs(instance);
5138
5139 if (Thumbs.isActive && Thumbs.opts.autoStart === true) {
5140 Thumbs.show();
5141 }
5142 }
5143 },
5144
5145 "beforeShow.fb": function(e, instance, item, firstRun) {
5146 var Thumbs = instance && instance.Thumbs;
5147
5148 if (Thumbs && Thumbs.isVisible) {
5149 Thumbs.focus(firstRun ? 0 : 250);
5150 }
5151 },
5152
5153 "afterKeydown.fb": function(e, instance, current, keypress, keycode) {
5154 var Thumbs = instance && instance.Thumbs;
5155
5156 // "G"
5157 if (Thumbs && Thumbs.isActive && keycode === 71) {
5158 keypress.preventDefault();
5159
5160 Thumbs.toggle();
5161 }
5162 },
5163
5164 "beforeClose.fb": function(e, instance) {
5165 var Thumbs = instance && instance.Thumbs;
5166
5167 if (Thumbs && Thumbs.isVisible && Thumbs.opts.hideOnClose !== false) {
5168 Thumbs.$grid.hide();
5169 }
5170 }
5171 });
5172})(document, jQuery);
5173
5174//// ==========================================================================
5175//
5176// Share
5177// Displays simple form for sharing current url
5178//
5179// ==========================================================================
5180(function(document, $) {
5181 "use strict";
5182
5183 $.extend(true, $.fancybox.defaults, {
5184 btnTpl: {
5185 share:
5186 '<button data-fancybox-share class="fancybox-button fancybox-button--share" title="{{SHARE}}">' +
5187 '<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>' +
5188 "</button>"
5189 },
5190 share: {
5191 url: function(instance, item) {
5192 return (
5193 (!instance.currentHash && !(item.type === "inline" || item.type === "html") ? item.origSrc || item.src : false) || window.location
5194 );
5195 },
5196 tpl:
5197 '<div class="fancybox-share">' +
5198 "<h1>{{SHARE}}</h1>" +
5199 "<p>" +
5200 '<a class="fancybox-share__button fancybox-share__button--fb" href="https://www.facebook.com/sharer/sharer.php?u={{url}}">' +
5201 '<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>' +
5202 "<span>Facebook</span>" +
5203 "</a>" +
5204 '<a class="fancybox-share__button fancybox-share__button--tw" href="https://twitter.com/intent/tweet?url={{url}}&text={{descr}}">' +
5205 '<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>' +
5206 "<span>Twitter</span>" +
5207 "</a>" +
5208 '<a class="fancybox-share__button fancybox-share__button--pt" href="https://www.pinterest.com/pin/create/button/?url={{url}}&description={{descr}}&media={{media}}">' +
5209 '<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>' +
5210 "<span>Pinterest</span>" +
5211 "</a>" +
5212 "</p>" +
5213 '<p><input class="fancybox-share__input" type="text" value="{{url_raw}}" onclick="select()" /></p>' +
5214 "</div>"
5215 }
5216 });
5217
5218 function escapeHtml(string) {
5219 var entityMap = {
5220 "&": "&",
5221 "<": "<",
5222 ">": ">",
5223 '"': """,
5224 "'": "'",
5225 "/": "/",
5226 "`": "`",
5227 "=": "="
5228 };
5229
5230 return String(string).replace(/[&<>"'`=\/]/g, function(s) {
5231 return entityMap[s];
5232 });
5233 }
5234
5235 $(document).on("click", "[data-fancybox-share]", function() {
5236 var instance = $.fancybox.getInstance(),
5237 current = instance.current || null,
5238 url,
5239 tpl;
5240
5241 if (!current) {
5242 return;
5243 }
5244
5245 if ($.type(current.opts.share.url) === "function") {
5246 url = current.opts.share.url.apply(current, [instance, current]);
5247 }
5248
5249 tpl = current.opts.share.tpl
5250 .replace(/\{\{media\}\}/g, current.type === "image" ? encodeURIComponent(current.src) : "")
5251 .replace(/\{\{url\}\}/g, encodeURIComponent(url))
5252 .replace(/\{\{url_raw\}\}/g, escapeHtml(url))
5253 .replace(/\{\{descr\}\}/g, instance.$caption ? encodeURIComponent(instance.$caption.text()) : "");
5254
5255 $.fancybox.open({
5256 src: instance.translate(instance, tpl),
5257 type: "html",
5258 opts: {
5259 touch: false,
5260 animationEffect: false,
5261 afterLoad: function(shareInstance, shareCurrent) {
5262 // Close self if parent instance is closing
5263 instance.$refs.container.one("beforeClose.fb", function() {
5264 shareInstance.close(null, 0);
5265 });
5266
5267 // Opening links in a popup window
5268 shareCurrent.$content.find(".fancybox-share__button").click(function() {
5269 window.open(this.href, "Share", "width=550, height=450");
5270 return false;
5271 });
5272 },
5273 mobile: {
5274 autoFocus: false
5275 }
5276 }
5277 });
5278 });
5279})(document, jQuery);
5280
5281// ==========================================================================
5282//
5283// Hash
5284// Enables linking to each modal
5285//
5286// ==========================================================================
5287(function(window, document, $) {
5288 "use strict";
5289
5290 // Simple $.escapeSelector polyfill (for jQuery prior v3)
5291 if (!$.escapeSelector) {
5292 $.escapeSelector = function(sel) {
5293 var rcssescape = /([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g;
5294 var fcssescape = function(ch, asCodePoint) {
5295 if (asCodePoint) {
5296 // U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
5297 if (ch === "\0") {
5298 return "\uFFFD";
5299 }
5300
5301 // Control characters and (dependent upon position) numbers get escaped as code points
5302 return ch.slice(0, -1) + "\\" + ch.charCodeAt(ch.length - 1).toString(16) + " ";
5303 }
5304
5305 // Other potentially-special ASCII characters get backslash-escaped
5306 return "\\" + ch;
5307 };
5308
5309 return (sel + "").replace(rcssescape, fcssescape);
5310 };
5311 }
5312
5313 // Get info about gallery name and current index from url
5314 function parseUrl() {
5315 var hash = window.location.hash.substr(1),
5316 rez = hash.split("-"),
5317 index = rez.length > 1 && /^\+?\d+$/.test(rez[rez.length - 1]) ? parseInt(rez.pop(-1), 10) || 1 : 1,
5318 gallery = rez.join("-");
5319
5320 return {
5321 hash: hash,
5322 /* Index is starting from 1 */
5323 index: index < 1 ? 1 : index,
5324 gallery: gallery
5325 };
5326 }
5327
5328 // Trigger click evnt on links to open new fancyBox instance
5329 function triggerFromUrl(url) {
5330 if (url.gallery !== "") {
5331 // If we can find element matching 'data-fancybox' atribute,
5332 // then triggering click event should start fancyBox
5333 $("[data-fancybox='" + $.escapeSelector(url.gallery) + "']")
5334 .eq(url.index - 1)
5335 .focus()
5336 .trigger("click.fb-start");
5337 }
5338 }
5339
5340 // Get gallery name from current instance
5341 function getGalleryID(instance) {
5342 var opts, ret;
5343
5344 if (!instance) {
5345 return false;
5346 }
5347
5348 opts = instance.current ? instance.current.opts : instance.opts;
5349 ret = opts.hash || (opts.$orig ? opts.$orig.data("fancybox") || opts.$orig.data("fancybox-trigger") : "");
5350
5351 return ret === "" ? false : ret;
5352 }
5353
5354 // Start when DOM becomes ready
5355 $(function() {
5356 // Check if user has disabled this module
5357 if ($.fancybox.defaults.hash === false) {
5358 return;
5359 }
5360
5361 // Update hash when opening/closing fancyBox
5362 $(document).on({
5363 "onInit.fb": function(e, instance) {
5364 var url, gallery;
5365
5366 if (instance.group[instance.currIndex].opts.hash === false) {
5367 return;
5368 }
5369
5370 url = parseUrl();
5371 gallery = getGalleryID(instance);
5372
5373 // Make sure gallery start index matches index from hash
5374 if (gallery && url.gallery && gallery == url.gallery) {
5375 instance.currIndex = url.index - 1;
5376 }
5377 },
5378
5379 "beforeShow.fb": function(e, instance, current, firstRun) {
5380 var gallery;
5381
5382 if (!current || current.opts.hash === false) {
5383 return;
5384 }
5385
5386 // Check if need to update window hash
5387 gallery = getGalleryID(instance);
5388
5389 if (!gallery) {
5390 return;
5391 }
5392
5393 // Variable containing last hash value set by fancyBox
5394 // It will be used to determine if fancyBox needs to close after hash change is detected
5395 instance.currentHash = gallery + (instance.group.length > 1 ? "-" + (current.index + 1) : "");
5396
5397 // If current hash is the same (this instance most likely is opened by hashchange), then do nothing
5398 if (window.location.hash === "#" + instance.currentHash) {
5399 return;
5400 }
5401
5402 if (firstRun && !instance.origHash) {
5403 instance.origHash = window.location.hash;
5404 }
5405
5406 if (instance.hashTimer) {
5407 clearTimeout(instance.hashTimer);
5408 }
5409
5410 // Update hash
5411 instance.hashTimer = setTimeout(function() {
5412 if ("replaceState" in window.history) {
5413 window.history[firstRun ? "pushState" : "replaceState"](
5414 {},
5415 document.title,
5416 window.location.pathname + window.location.search + "#" + instance.currentHash
5417 );
5418
5419 if (firstRun) {
5420 instance.hasCreatedHistory = true;
5421 }
5422 } else {
5423 window.location.hash = instance.currentHash;
5424 }
5425
5426 instance.hashTimer = null;
5427 }, 300);
5428 },
5429
5430 "beforeClose.fb": function(e, instance, current) {
5431 if (!current || current.opts.hash === false) {
5432 return;
5433 }
5434
5435 clearTimeout(instance.hashTimer);
5436
5437 // Goto previous history entry
5438 if (instance.currentHash && instance.hasCreatedHistory) {
5439 window.history.back();
5440 } else if (instance.currentHash) {
5441 if ("replaceState" in window.history) {
5442 window.history.replaceState({}, document.title, window.location.pathname + window.location.search + (instance.origHash || ""));
5443 } else {
5444 window.location.hash = instance.origHash;
5445 }
5446 }
5447
5448 instance.currentHash = null;
5449 }
5450 });
5451
5452 // Check if need to start/close after url has changed
5453 $(window).on("hashchange.fb", function() {
5454 var url = parseUrl(),
5455 fb = null;
5456
5457 // Find last fancyBox instance that has "hash"
5458 $.each(
5459 $(".fancybox-container")
5460 .get()
5461 .reverse(),
5462 function(index, value) {
5463 var tmp = $(value).data("FancyBox");
5464
5465 if (tmp && tmp.currentHash) {
5466 fb = tmp;
5467 return false;
5468 }
5469 }
5470 );
5471
5472 if (fb) {
5473 // Now, compare hash values
5474 if (fb.currentHash !== url.gallery + "-" + url.index && !(url.index === 1 && fb.currentHash == url.gallery)) {
5475 fb.currentHash = null;
5476
5477 fb.close();
5478 }
5479 } else if (url.gallery !== "") {
5480 triggerFromUrl(url);
5481 }
5482 });
5483
5484 // Check current hash and trigger click event on matching element to start fancyBox, if needed
5485 setTimeout(function() {
5486 if (!$.fancybox.getInstance()) {
5487 triggerFromUrl(parseUrl());
5488 }
5489 }, 50);
5490 });
5491})(window, document, jQuery);
5492
5493// ==========================================================================
5494//
5495// Wheel
5496// Basic mouse weheel support for gallery navigation
5497//
5498// ==========================================================================
5499(function(document, $) {
5500 "use strict";
5501
5502 var prevTime = new Date().getTime();
5503
5504 $(document).on({
5505 "onInit.fb": function(e, instance, current) {
5506 instance.$refs.stage.on("mousewheel DOMMouseScroll wheel MozMousePixelScroll", function(e) {
5507 var current = instance.current,
5508 currTime = new Date().getTime();
5509
5510 if (instance.group.length < 2 || current.opts.wheel === false || (current.opts.wheel === "auto" && current.type !== "image")) {
5511 return;
5512 }
5513
5514 e.preventDefault();
5515 e.stopPropagation();
5516
5517 if (current.$slide.hasClass("fancybox-animated")) {
5518 return;
5519 }
5520
5521 e = e.originalEvent || e;
5522
5523 if (currTime - prevTime < 250) {
5524 return;
5525 }
5526
5527 prevTime = currTime;
5528
5529 instance[(-e.deltaY || -e.deltaX || e.wheelDelta || -e.detail) < 0 ? "next" : "previous"]();
5530 });
5531 }
5532 });
5533})(document, jQuery);