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