https://members.sanctum1791.com/o/Sanctum1791/js/fancybox/jquery.fancybox.js

10
11(function (window, document, $, undefined) {
12  "use strict";
13
14  window.console = window.console || {
15    info: function (stuff) {}
16  };
17
18  // If there's no jQuery, fancyBox can't work
19  // =========================================
20
21  if (!$) {
22    return;
23  }
24
25  // Check if fancyBox is already initialized
26  // ========================================
27
28  if ($.fn.fancybox) {
29    console.info("fancyBox already initialized");
30
31    return;
32  }
33
34  // Private default settings
35  // ========================
36
37  var defaults = {
38    // 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: '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" src=""></iframe>',
114
115      // Preload iframe before displaying it
116      // This allows to calculate iframe content width and height
117      // (note: Due to "Same Origin Policy", you can't get cross domain data).
118      preload: true,
119
120      // Custom CSS styling for iframe wrapping element
121      // You can use this to set custom iframe dimensions
122      css: {},
123
124      // Iframe tag attributes
125      attr: {
126        scrolling: "auto"
127      }
128    },
129
130    // For HTML5 video only
131    video: {
132      tpl: '<video class="fancybox-video" controls controlsList="nodownload" poster="{{poster}}">' +
133        '<source src="{{src}}" type="{{format}}" />' +
134        'Sorry, your browser doesn\'t support embedded videos, <a href="{{src}}">download</a> and watch with your favorite video player!' +
135        "</video>",
136      format: "", // custom video format
137      autoStart: true
138    },
139
140    // Default content type if cannot be detected automatically
141    defaultType: "image",
142
143    // Open/close animation type
144    // Possible values:
145    //   false            - disable
146    //   "zoom"           - zoom images from/to thumbnail
147    //   "fade"
148    //   "zoom-in-out"
149    //
150    animationEffect: "zoom",
151
152    // Duration in ms for open/close animation
153    animationDuration: 366,
154
155    // Should image change opacity while zooming
156    // If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios
157    zoomOpacity: "auto",
158
159    // Transition effect between slides
160    //
161    // Possible values:
162    //   false            - disable
163    //   "fade'
164    //   "slide'
165    //   "circular'
166    //   "tube'
167    //   "zoom-in-out'
168    //   "rotate'
169    //
170    transitionEffect: "fade",
171
172    // Duration in ms for transition animation
173    transitionDuration: 366,
174
175    // Custom CSS class for slide element
176    slideClass: "",
177
178    // Custom CSS class for layout
179    baseClass: "",
180
181    // Base template for layout
182    baseTpl: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
183      '<div class="fancybox-bg"></div>' +
184      '<div class="fancybox-inner">' +
185      '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
186      '<div class="fancybox-toolbar">{{buttons}}</div>' +
187      '<div class="fancybox-navigation">{{arrows}}</div>' +
188      '<div class="fancybox-stage"></div>' +
189      '<div class="fancybox-caption"><div class="fancybox-caption__body"></div></div>' +
190      "</div>" +
191      "</div>",
192
193    // Loading indicator template
194    spinnerTpl: '<div class="fancybox-loading"></div>',
195
196    // Error message template
197    errorTpl: '<div class="fancybox-error"><p>{{ERROR}}</p></div>',
198
199    btnTpl: {
200      download: '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
201        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"/></svg>' +
202        "</a>",
203
204      zoom: '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
205        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 17.3l-3-3a5.9 5.9 0 0 0-.6-7.6 5.9 5.9 0 0 0-8.4 0 5.9 5.9 0 0 0 0 8.4 5.9 5.9 0 0 0 7.7.7l3 3a1 1 0 0 0 1.3 0c.4-.5.4-1 0-1.5zM8.1 13.8a4 4 0 0 1 0-5.7 4 4 0 0 1 5.7 0 4 4 0 0 1 0 5.7 4 4 0 0 1-5.7 0z"/></svg>' +
206        "</button>",
207
208      close: '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
209        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"/></svg>' +
210        "</button>",
211
212      // Arrows
213      arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
214        '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.28 15.7l-1.34 1.37L5 12l4.94-5.07 1.34 1.38-2.68 2.72H19v1.94H8.6z"/></svg></div>' +
215        "</button>",
216
217      arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
218        '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 12.97l-2.68 2.72 1.34 1.38L19 12l-4.94-5.07-1.34 1.38 2.68 2.72H5v1.94z"/></svg></div>' +
219        "</button>",
220
221      // This small close button will be appended to your html/inline/ajax content by default,
222      // if "smallBtn" option is not set to false
223      smallBtn: '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
224        '<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"/></svg>' +
225        "</button>"
226    },
227
228    // Container is injected into this element
229    parentEl: "body",
230
231    // Hide browser vertical scrollbars; use at your own risk
232    hideScrollbar: true,
233
234    // Focus handling
235    // ==============
236
237    // Try to focus on the first focusable element after opening
238    autoFocus: true,
239
240    // Put focus back to active element after closing
241    backFocus: true,
242
243    // Do not let user to focus on element outside modal content
244    trapFocus: true,
245
246    // Module specific options
247    // =======================
248
249    fullScreen: {
250      autoStart: false
251    },
252
253    // Set `touch: false` to disable panning/swiping
254    touch: {
255      vertical: true, // Allow to drag content vertically
256      momentum: true // Continue movement after releasing mouse/touch when panning
257    },
258
259    // Hash value when initializing manually,
260    // set `false` to disable hash change
261    hash: null,
262
263    // Customize or add new media types
264    // Example:
265    /*
266      media : {
267        youtube : {
268          params : {
269            autoplay : 0
270          }
271        }
272      }
273    */
274    media: {},
275
276    slideShow: {
277      autoStart: false,
278      speed: 3000
279    },
280
281    thumbs: {
282      autoStart: false, // Display thumbnails on opening
283      hideOnClose: true, // Hide thumbnail grid when closing animation starts
284      parentEl: ".fancybox-container", // Container is injected into this element
285      axis: "y" // Vertical (y) or horizontal (x) scrolling
286    },
287
288    // Use mousewheel to navigate gallery
289    // If 'auto' - enabled for images only
290    wheel: "auto",
291
292    // Callbacks
293    //==========
294
295    // See Documentation/API/Events for more information
296    // Example:
297    /*
298      afterShow: function( instance, current ) {
299        console.info( 'Clicked element:' );
300        console.info( current.opts.$orig );
301      }
302    */
303
304    onInit: $.noop, // When instance has been initialized
305
306    beforeLoad: $.noop, // Before the content of a slide is being loaded
307    afterLoad: $.noop, // When the content of a slide is done loading
308
309    beforeShow: $.noop, // Before open animation starts
310    afterShow: $.noop, // When content is done loading and animating
311
312    beforeClose: $.noop, // Before the instance attempts to close. Return false to cancel the close.
313    afterClose: $.noop, // After instance has been closed
314
315    onActivate: $.noop, // When instance is brought to front
316    onDeactivate: $.noop, // When other instance has been activated
317
318    // Interaction
319    // ===========
320
321    // Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
322    // each option can be string or method that returns value.
323    //
324    // Possible values:
325    //   "close"           - close instance
326    //   "next"            - move to next gallery item
327    //   "nextOrClose"     - move to next gallery item or close if gallery has only one item
328    //   "toggleControls"  - show/hide controls
329    //   "zoom"            - zoom image (if loaded)
330    //   false             - do nothing
331
332    // Clicked on the content
333    clickContent: function (current, event) {
334      return current.type === "image" ? "zoom" : false;
335    },
336
337    // Clicked on the slide
338    clickSlide: "close",
339
340    // Clicked on the background (backdrop) element;
341    // if you have not changed the layout, then most likely you need to use `clickSlide` option
342    clickOutside: "close",
343
344    // Same as previous two, but for double click
345    dblclickContent: false,
346    dblclickSlide: false,
347    dblclickOutside: false,
348
349    // Custom options when mobile device is detected
350    // =============================================
351
352    mobile: {
353      preventCaptionOverlap: false,
354      idleTime: false,
355      clickContent: function (current, event) {
356        return current.type === "image" ? "toggleControls" : false;
357      },
358      clickSlide: function (current, event) {
359        return current.type === "image" ? "toggleControls" : "close";
360      },
361      dblclickContent: function (current, event) {
362        return current.type === "image" ? "zoom" : false;
363      },
364      dblclickSlide: function (current, event) {
365        return current.type === "image" ? "zoom" : false;
366      }
367    },
368
369    // Internationalization
370    // ====================
371
372    lang: "en",
373    i18n: {
374      en: {
375        CLOSE: "Close",
376        NEXT: "Next",
377        PREV: "Previous",
378        ERROR: "The requested content cannot be loaded. <br/> Please try again later.",
379        PLAY_START: "Start slideshow",
380        PLAY_STOP: "Pause slideshow",
381        FULL_SCREEN: "Full screen",
382        THUMBS: "Thumbnails",
383        DOWNLOAD: "Download",
384        SHARE: "Share",
385        ZOOM: "Zoom"
386      },
387      de: {
388        CLOSE: "Schlie&szlig;en",
389        NEXT: "Weiter",
390        PREV: "Zur&uuml;ck",
391        ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es sp&auml;ter nochmal.",
392        PLAY_START: "Diaschau starten",
393        PLAY_STOP: "Diaschau beenden",
394        FULL_SCREEN: "Vollbild",
395        THUMBS: "Vorschaubilder",
396        DOWNLOAD: "Herunterladen",
397        SHARE: "Teilen",
398        ZOOM: "Vergr&ouml;&szlig;ern"
399      }
400    }
401  };
402
403  // Few useful variables and methods
404  // ================================
405
406  var $W = $(window);
407  var $D = $(document);
408
409  var called = 0;
410
411  // Check if an object is a jQuery object and not a native JavaScript object
412  // ========================================================================
413  var isQuery = function (obj) {
414    return obj && obj.hasOwnProperty && obj instanceof $;
415  };
416
417  // Handle multiple browsers for "requestAnimationFrame" and "cancelAnimationFrame"
418  // ===============================================================================
419  var requestAFrame = (function () {
420    return (
421      window.requestAnimationFrame ||
422      window.webkitRequestAnimationFrame ||
423      window.mozRequestAnimationFrame ||
424      window.oRequestAnimationFrame ||
425      // if all else fails, use setTimeout
426      function (callback) {
427        return window.setTimeout(callback, 1000 / 60);
428      }
429    );
430  })();
431
432  var cancelAFrame = (function () {
433    return (
434      window.cancelAnimationFrame ||
435      window.webkitCancelAnimationFrame ||
436      window.mozCancelAnimationFrame ||
437      window.oCancelAnimationFrame ||
438      function (id) {
439        window.clearTimeout(id);
440      }
441    );
442  })();
443
444  // Detect the supported transition-end event property name
445  // =======================================================
446  var transitionEnd = (function () {
447    var el = document.createElement("fakeelement"),
448      t;
449
450    var transitions = {
451      transition: "transitionend",
452      OTransition: "oTransitionEnd",
453      MozTransition: "transitionend",
454      WebkitTransition: "webkitTransitionEnd"
455    };
456
457    for (t in transitions) {
458      if (el.style[t] !== undefined) {
459        return transitions[t];
460      }
461    }
462
463    return "transitionend";
464  })();
465
466  // Force redraw on an element.
467  // This helps in cases where the browser doesn't redraw an updated element properly
468  // ================================================================================
469  var forceRedraw = function ($el) {
470    return $el && $el.length && $el[0].offsetHeight;
471  };
472
473  // Exclude array (`buttons`) options from deep merging
474  // ===================================================
475  var mergeOpts = function (opts1, opts2) {
476    var rez = $.extend(true, {}, opts1, opts2);
477
478    $.each(opts2, function (key, value) {
479      if ($.isArray(value)) {
480        rez[key] = value;
481      }
482    });
483
484    return rez;
485  };
486
487  // How much of an element is visible in viewport
488  // =============================================
489
490  var inViewport = function (elem) {
491    var elemCenter, rez;
492
493    if (!elem || elem.ownerDocument !== document) {
494      return false;
495    }
496
497    $(".fancybox-container").css("pointer-events", "none");
498
499    elemCenter = {
500      x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
501      y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
502    };
503
504    rez = document.elementFromPoint(elemCenter.x, elemCenter.y) === elem;
505
506    $(".fancybox-container").css("pointer-events", "");
507
508    return rez;
509  };
510
511  // Class definition
512  // ================
513
514  var FancyBox = function (content, opts, index) {
515    var self = this;
516
517    self.opts = mergeOpts({
518      index: index
519    }, $.fancybox.defaults);
520
521    if ($.isPlainObject(opts)) {
522      self.opts = mergeOpts(self.opts, opts);
523    }
524
525    if ($.fancybox.isMobile) {
526      self.opts = mergeOpts(self.opts, self.opts.mobile);
527    }
528
529    self.id = self.opts.id || ++called;
530
531    self.currIndex = parseInt(self.opts.index, 10) || 0;
532    self.prevIndex = null;
533
534    self.prevPos = null;
535    self.currPos = 0;
536
537    self.firstRun = true;
538
539    // All group items
540    self.group = [];
541
542    // Existing slides (for current, next and previous gallery items)
543    self.slides = {};
544
545    // Create group elements
546    self.addContent(content);
547
548    if (!self.group.length) {
549      return;
550    }
551
552    self.init();
553  };
554
555  $.extend(FancyBox.prototype, {
556    // Create DOM structure
557    // ====================
558
559    init: function () {
560      var self = this,
561        firstItem = self.group[self.currIndex],
562        firstItemOpts = firstItem.opts,
563        $container,
564        buttonStr;
565
566      if (firstItemOpts.closeExisting) {
567        $.fancybox.close(true);
568      }
569
570      // Hide scrollbars
571      // ===============
572
573      $("body").addClass("fancybox-active");
574
575      if (
576        !$.fancybox.getInstance() &&
577        firstItemOpts.hideScrollbar !== false &&
578        !$.fancybox.isMobile &&
579        document.body.scrollHeight > window.innerHeight
580      ) {
581        $("head").append(
582          '<style id="fancybox-style-noscroll" type="text/css">.compensate-for-scrollbar{margin-right:' +
583          (window.innerWidth - document.documentElement.clientWidth) +
584          "px;}</style>"
585        );
586
587        $("body").addClass("compensate-for-scrollbar");
588      }
589
590      // Build html markup and set references
591      // ====================================
592
593      // Build html code for buttons and insert into main template
594      buttonStr = "";
595
596      $.each(firstItemOpts.buttons, function (index, value) {
597        buttonStr += firstItemOpts.btnTpl[value] || "";
598      });
599
600      // Create markup from base template, it will be initially hidden to
601      // avoid unnecessary work like painting while initializing is not complete
602      $container = $(
603          self.translate(
604            self,
605            firstItemOpts.baseTpl
606            .replace("{{buttons}}", buttonStr)
607            .replace("{{arrows}}", firstItemOpts.btnTpl.arrowLeft + firstItemOpts.btnTpl.arrowRight)
608          )
609        )
610        .attr("id", "fancybox-container-" + self.id)
611        .addClass(firstItemOpts.baseClass)
612        .data("FancyBox", self)
613        .appendTo(firstItemOpts.parentEl);
614
615      // Create object holding references to jQuery wrapped nodes
616      self.$refs = {
617        container: $container
618      };
619
620      ["bg", "inner", "infobar", "toolbar", "stage", "caption", "navigation"].forEach(function (item) {
621        self.$refs[item] = $container.find(".fancybox-" + item);
622      });
623
624      self.trigger("onInit");
625
626      // Enable events, deactive previous instances
627      self.activate();
628
629      // Build slides, load and reveal content
630      self.jumpTo(self.currIndex);
631    },
632
633    // Simple i18n support - replaces object keys found in template
634    // with corresponding values
635    // ============================================================
636
637    translate: function (obj, str) {
638      var arr = obj.opts.i18n[obj.opts.lang] || obj.opts.i18n.en;
639
640      return str.replace(/\{\{(\w+)\}\}/g, function (match, n) {
641        return arr[n] === undefined ? match : arr[n];
642      });
643    },
644
645    // Populate current group with fresh content
646    // Check if each object has valid type and content
647    // ===============================================
648
649    addContent: function (content) {
650      var self = this,
651        items = $.makeArray(content),
652        thumbs;
653
654      $.each(items, function (i, item) {
655        var obj = {},
656          opts = {},
657          $item,
658          type,
659          found,
660          src,
661          srcParts;
662
663        // Step 1 - Make sure we have an object
664        // ====================================
665
666        if ($.isPlainObject(item)) {
667          // We probably have manual usage here, something like
668          // $.fancybox.open( [ { src : "image.jpg", type : "image" } ] )
669
670          obj = item;
671          opts = item.opts || item;
672        } else if ($.type(item) === "object" && $(item).length) {
673          // Here we probably have jQuery collection returned by some selector
674          $item = $(item);
675
676          // Support attributes like `data-options='{"touch" : false}'` and `data-touch='false'`
677          opts = $item.data() || {};
678          opts = $.extend(true, {}, opts, opts.options);
679
680          // Here we store clicked element
681          opts.$orig = $item;
682
683          obj.src = self.opts.src || opts.src || $item.attr("href");
684
685          // Assume that simple syntax is used, for example:
686          //   `$.fancybox.open( $("#test"), {} );`
687          if (!obj.type && !obj.src) {
688            obj.type = "inline";
689            obj.src = item;
690          }
691        } else {
692          // Assume we have a simple html code, for example:
693          //   $.fancybox.open( '<div><h1>Hi!</h1></div>' );
694          obj = {
695            type: "html",
696            src: item + ""
697          };
698        }
699
700        // Each gallery object has full collection of options
701        obj.opts = $.extend(true, {}, self.opts, opts);
702
703        // Do not merge buttons array
704        if ($.isArray(opts.buttons)) {
705          obj.opts.buttons = opts.buttons;
706        }
707
708        if ($.fancybox.isMobile && obj.opts.mobile) {
709          obj.opts = mergeOpts(obj.opts, obj.opts.mobile);
710        }
711
712        // Step 2 - Make sure we have content type, if not - try to guess
713        // ==============================================================
714
715        type = obj.type || obj.opts.type;
716        src = obj.src || "";
717
718        if (!type && src) {
719          if ((found = src.match(/\.(mp4|mov|ogv|webm)((\?|#).*)?$/i))) {
720            type = "video";
721
722            if (!obj.opts.video.format) {
723              obj.opts.video.format = "video/" + (found[1] === "ogv" ? "ogg" : found[1]);
724            }
725          } else if (src.match(/(^data:image\/[a-z0-9+\/=]*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg|ico)((\?|#).*)?$)/i)) {
726            type = "image";
727          } else if (src.match(/\.(pdf)((\?|#).*)?$/i)) {
728            type = "iframe";
729            obj = $.extend(true, obj, {
730              contentType: "pdf",
731              opts: {
732                iframe: {
733                  preload: false
734                }
735              }
736            });
737          } else if (src.charAt(0) === "#") {
738            type = "inline";
739          }
740        }
741
742        if (type) {
743          obj.type = type;
744        } else {
745          self.trigger("objectNeedsType", obj);
746        }
747
748        if (!obj.contentType) {
749          obj.contentType = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1 ? "html" : obj.type;
750        }
751
752        // Step 3 - Some adjustments
753        // =========================
754
755        obj.index = self.group.length;
756
757        if (obj.opts.smallBtn == "auto") {
758          obj.opts.smallBtn = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1;
759        }
760
761        if (obj.opts.toolbar === "auto") {
762          obj.opts.toolbar = !obj.opts.smallBtn;
763        }
764
765        // Find thumbnail image, check if exists and if is in the viewport
766        obj.$thumb = obj.opts.$thumb || null;
767
768        if (obj.opts.$trigger && obj.index === self.opts.index) {
769          obj.$thumb = obj.opts.$trigger.find("img:first");
770
771          if (obj.$thumb.length) {
772            obj.opts.$orig = obj.opts.$trigger;
773          }
774        }
775
776        if (!(obj.$thumb && obj.$thumb.length) && obj.opts.$orig) {
777          obj.$thumb = obj.opts.$orig.find("img:first");
778        }
779
780        if (obj.$thumb && !obj.$thumb.length) {
781          obj.$thumb = null;
782        }
783
784        obj.thumb = obj.opts.thumb || (obj.$thumb ? obj.$thumb[0].src : null);
785
786        // "caption" is a "special" option, it can be used to customize caption per gallery item
787        if ($.type(obj.opts.caption) === "function") {
788          obj.opts.caption = obj.opts.caption.apply(item, [self, obj]);
789        }
790
791        if ($.type(self.opts.caption) === "function") {
792          obj.opts.caption = self.opts.caption.apply(item, [self, obj]);
793        }
794
795        // Make sure we have caption as a string or jQuery object
796        if (!(obj.opts.caption instanceof $)) {
797          obj.opts.caption = obj.opts.caption === undefined ? "" : obj.opts.caption + "";
798        }
799
800        // Check if url contains "filter" used to filter the content
801        // Example: "ajax.html #something"
802        if (obj.type === "ajax") {
803          srcParts = src.split(/\s+/, 2);
804
805          if (srcParts.length > 1) {
806            obj.src = srcParts.shift();
807
808            obj.opts.filter = srcParts.shift();
809          }
810        }
811
812        // Hide all buttons and disable interactivity for modal items
813        if (obj.opts.modal) {
814          obj.opts = $.extend(true, obj.opts, {
815            trapFocus: true,
816            // Remove buttons
817            infobar: 0,
818            toolbar: 0,
819
820            smallBtn: 0,
821
822            // Disable keyboard navigation
823            keyboard: 0,
824
825            // Disable some modules
826            slideShow: 0,
827            fullScreen: 0,
828            thumbs: 0,
829            touch: 0,
830
831            // Disable click event handlers
832            clickContent: false,
833            clickSlide: false,
834            clickOutside: false,
835            dblclickContent: false,
836            dblclickSlide: false,
837            dblclickOutside: false
838          });
839        }
840
841        // Step 4 - Add processed object to group
842        // ======================================
843
844        self.group.push(obj);
845      });
846
847      // Update controls if gallery is already opened
848      if (Object.keys(self.slides).length) {
849        self.updateControls();
850
851        // Update thumbnails, if needed
852        thumbs = self.Thumbs;
853
854        if (thumbs && thumbs.isActive) {
855          thumbs.create();
856
857          thumbs.focus();
858        }
859      }
860    },
861
862    // Attach an event handler functions for:
863    //   - navigation buttons
864    //   - browser scrolling, resizing;
865    //   - focusing
866    //   - keyboard
867    //   - detecting inactivity
868    // ======================================
869
870    addEvents: function () {
871      var self = this;
872
873      self.removeEvents();
874
875      // Make navigation elements clickable
876      // ==================================
877
878      self.$refs.container
879        .on("click.fb-close", "[data-fancybox-close]", function (e) {
880          e.stopPropagation();
881          e.preventDefault();
882
883          self.close(e);
884        })
885        .on("touchstart.fb-prev click.fb-prev", "[data-fancybox-prev]", function (e) {
886          e.stopPropagation();
887          e.preventDefault();
888
889          self.previous();
890        })
891        .on("touchstart.fb-next click.fb-next", "[data-fancybox-next]", function (e) {
892          e.stopPropagation();
893          e.preventDefault();
894
895          self.next();
896        })
897        .on("click.fb", "[data-fancybox-zoom]", function (e) {
898          // Click handler for zoom button
899          self[self.isScaledDown() ? "scaleToActual" : "scaleToFit"]();
900        });
901
902      // Handle page scrolling and browser resizing
903      // ==========================================
904
905      $W.on("orientationchange.fb resize.fb", function (e) {
906        if (e && e.originalEvent && e.originalEvent.type === "resize") {
907          if (self.requestId) {
908            cancelAFrame(self.requestId);
909          }
910
911          self.requestId = requestAFrame(function () {
912            self.update(e);
913          });
914        } else {
915          if (self.current && self.current.type === "iframe") {
916            self.$refs.stage.hide();
917          }
918
919          setTimeout(
920            function () {
921              self.$refs.stage.show();
922
923              self.update(e);
924            },
925            $.fancybox.isMobile ? 600 : 250
926          );
927        }
928      });
929
930      $D.on("keydown.fb", function (e) {
931        var instance = $.fancybox ? $.fancybox.getInstance() : null,
932          current = instance.current,
933          keycode = e.keyCode || e.which;
934
935        // Trap keyboard focus inside of the modal
936        // =======================================
937
938        if (keycode == 9) {
939          if (current.opts.trapFocus) {
940            self.focus(e);
941          }
942
943          return;
944        }
945
946        // Enable keyboard navigation
947        // ==========================
948
949        if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input,textarea,video,audio,select")) {
950          return;
951        }
952
953        // Backspace and Esc keys
954        if (keycode === 8 || keycode === 27) {
955          e.preventDefault();
956
957          self.close(e);
958
959          return;
960        }
961
962        // Left arrow and Up arrow
963        if (keycode === 37 || keycode === 38) {
964          e.preventDefault();
965
966          self.previous();
967
968          return;
969        }
970
971        // Righ arrow and Down arrow
972        if (keycode === 39 || keycode === 40) {
973          e.preventDefault();
974
975          self.next();
976
977          return;
978        }
979
980        self.trigger("afterKeydown", e, keycode);
981      });
982
983      // Hide controls after some inactivity period
984      if (self.group[self.currIndex].opts.idleTime) {
985        self.idleSecondsCounter = 0;
986
987        $D.on(
988          "mousemove.fb-idle mouseleave.fb-idle mousedown.fb-idle touchstart.fb-idle touchmove.fb-idle scroll.fb-idle keydown.fb-idle",
989          function (e) {
990            self.idleSecondsCounter = 0;
991
992            if (self.isIdle) {
993              self.showControls();
994            }
995
996            self.isIdle = false;
997          }
998        );
999
1000        self.idleInterval = window.setInterval(function () {
1001          self.idleSecondsCounter++;
1002
1003          if (self.idleSecondsCounter >= self.group[self.currIndex].opts.idleTime && !self.isDragging) {
1004            self.isIdle = true;
1005            self.idleSecondsCounter = 0;
1006
1007            self.hideControls();
1008          }
1009        }, 1000);
1010      }
1011    },
1012
1013    // Remove events added by the core
1014    // ===============================
1015
1016    removeEvents: function () {
1017      var self = this;
1018
1019      $W.off("orientationchange.fb resize.fb");
1020      $D.off("keydown.fb .fb-idle");
1021
1022      this.$refs.container.off(".fb-close .fb-prev .fb-next");
1023
1024      if (self.idleInterval) {
1025        window.clearInterval(self.idleInterval);
1026
1027        self.idleInterval = null;
1028      }
1029    },
1030
1031    // Change to previous gallery item
1032    // ===============================
1033
1034    previous: function (duration) {
1035      return this.jumpTo(this.currPos - 1, duration);
1036    },
1037
1038    // Change to next gallery item
1039    // ===========================
1040
1041    next: function (duration) {
1042      return this.jumpTo(this.currPos + 1, duration);
1043    },
1044
1045    // Switch to selected gallery item
1046    // ===============================
1047
1048    jumpTo: function (pos, duration) {
1049      var self = this,
1050        groupLen = self.group.length,
1051        firstRun,
1052        isMoved,
1053        loop,
1054        current,
1055        previous,
1056        slidePos,
1057        stagePos,
1058        prop,
1059        diff;
1060
1061      if (self.isDragging || self.isClosing || (self.isAnimating && self.firstRun)) {
1062        return;
1063      }
1064
1065      // Should loop?
1066      pos = parseInt(pos, 10);
1067      loop = self.current ? self.current.opts.loop : self.opts.loop;
1068
1069      if (!loop && (pos < 0 || pos >= groupLen)) {
1070        return false;
1071      }
1072
1073      // Check if opening for the first time; this helps to speed things up
1074      firstRun = self.firstRun = !Object.keys(self.slides).length;
1075
1076      // Create slides
1077      previous = self.current;
1078
1079      self.prevIndex = self.currIndex;
1080      self.prevPos = self.currPos;
1081
1082      current = self.createSlide(pos);
1083
1084      if (groupLen > 1) {
1085        if (loop || current.index < groupLen - 1) {
1086          self.createSlide(pos + 1);
1087        }
1088
1089        if (loop || current.index > 0) {
1090          self.createSlide(pos - 1);
1091        }
1092      }
1093
1094      self.current = current;
1095      self.currIndex = current.index;
1096      self.currPos = current.pos;
1097
1098      self.trigger("beforeShow", firstRun);
1099
1100      self.updateControls();
1101
1102      // Validate duration length
1103      current.forcedDuration = undefined;
1104
1105      if ($.isNumeric(duration)) {
1106        current.forcedDuration = duration;
1107      } else {
1108        duration = current.opts[firstRun ? "animationDuration" : "transitionDuration"];
1109      }
1110
1111      duration = parseInt(duration, 10);
1112
1113      // Check if user has swiped the slides or if still animating
1114      isMoved = self.isMoved(current);
1115
1116      // Make sure current slide is visible
1117      current.$slide.addClass("fancybox-slide--current");
1118
1119      // Fresh start - reveal container, current slide and start loading content
1120      if (firstRun) {
1121        if (current.opts.animationEffect && duration) {
1122          self.$refs.container.css("transition-duration", duration + "ms");
1123        }
1124
1125        self.$refs.container.addClass("fancybox-is-open").trigger("focus");
1126
1127        // Attempt to load content into slide
1128        // This will later call `afterLoad` -> `revealContent`
1129        self.loadSlide(current);
1130
1131        self.preload("image");
1132
1133        return;
1134      }
1135
1136      // Get actual slide/stage positions (before cleaning up)
1137      slidePos = $.fancybox.getTranslate(previous.$slide);
1138      stagePos = $.fancybox.getTranslate(self.$refs.stage);
1139
1140      // Clean up all slides
1141      $.each(self.slides, function (index, slide) {
1142        $.fancybox.stop(slide.$slide, true);
1143      });
1144
1145      if (previous.pos !== current.pos) {
1146        previous.isComplete = false;
1147      }
1148
1149      previous.$slide.removeClass("fancybox-slide--complete fancybox-slide--current");
1150
1151      // If slides are out of place, then animate them to correct position
1152      if (isMoved) {
1153        // Calculate horizontal swipe distance
1154        diff = slidePos.left - (previous.pos * slidePos.width + previous.pos * previous.opts.gutter);
1155
1156        $.each(self.slides, function (index, slide) {
1157          slide.$slide.removeClass("fancybox-animated").removeClass(function (index, className) {
1158            return (className.match(/(^|\s)fancybox-fx-\S+/g) || []).join(" ");
1159          });
1160
1161          // Make sure that each slide is in equal distance
1162          // This is mostly needed for freshly added slides, because they are not yet positioned
1163          var leftPos = slide.pos * slidePos.width + slide.pos * slide.opts.gutter;
1164
1165          $.fancybox.setTranslate(slide.$slide, {
1166            top: 0,
1167            left: leftPos - stagePos.left + diff
1168          });
1169
1170          if (slide.pos !== current.pos) {
1171            slide.$slide.addClass("fancybox-slide--" + (slide.pos > current.pos ? "next" : "previous"));
1172          }
1173
1174          // Redraw to make sure that transition will start
1175          forceRedraw(slide.$slide);
1176
1177          // Animate the slide
1178          $.fancybox.animate(
1179            slide.$slide, {
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        $.fancybox.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 = $.fancybox.getTranslate(current.$slide).width,
1260        canvasHeight = $.fancybox.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      $.fancybox.stop($content);
1276
1277      x = x === undefined ? canvasWidth * 0.5 : x;
1278      y = y === undefined ? canvasHeight * 0.5 : y;
1279
1280      imgPos = $.fancybox.getTranslate($content);
1281
1282      imgPos.top -= $.fancybox.getTranslate(current.$slide).top;
1283      imgPos.left -= $.fancybox.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      $.fancybox.animate(
1320        $content, {
1321          top: posY,
1322          left: posX,
1323          scaleX: scaleX,
1324          scaleY: scaleY
1325        },
1326        duration || 366,
1327        function () {
1328          self.isAnimating = false;
1329        }
1330      );
1331
1332      // Stop slideshow
1333      if (self.SlideShow && self.SlideShow.isActive) {
1334        self.SlideShow.stop();
1335      }
1336    },
1337
1338    // Scale image to fit inside parent element
1339    // ========================================
1340
1341    scaleToFit: function (duration) {
1342      var self = this,
1343        current = self.current,
1344        $content = current.$content,
1345        end;
1346
1347      if (self.isAnimating || self.isMoved() || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
1348        return;
1349      }
1350
1351      self.isAnimating = true;
1352
1353      $.fancybox.stop($content);
1354
1355      end = self.getFitPos(current);
1356
1357      self.updateCursor(end.width, end.height);
1358
1359      $.fancybox.animate(
1360        $content, {
1361          top: end.top,
1362          left: end.left,
1363          scaleX: end.width / $content.width(),
1364          scaleY: end.height / $content.height()
1365        },
1366        duration || 366,
1367        function () {
1368          self.isAnimating = false;
1369        }
1370      );
1371    },
1372
1373    // Calculate image size to fit inside viewport
1374    // ===========================================
1375
1376    getFitPos: function (slide) {
1377      var self = this,
1378        $content = slide.$content,
1379        $slide = slide.$slide,
1380        width = slide.width || slide.opts.width,
1381        height = slide.height || slide.opts.height,
1382        maxWidth,
1383        maxHeight,
1384        minRatio,
1385        aspectRatio,
1386        rez = {};
1387
1388      if (!slide.isLoaded || !$content || !$content.length) {
1389        return false;
1390      }
1391
1392      maxWidth = $.fancybox.getTranslate(self.$refs.stage).width;
1393      maxHeight = $.fancybox.getTranslate(self.$refs.stage).height;
1394
1395      maxWidth -=
1396        parseFloat($slide.css("paddingLeft")) +
1397        parseFloat($slide.css("paddingRight")) +
1398        parseFloat($content.css("marginLeft")) +
1399        parseFloat($content.css("marginRight"));
1400
1401      maxHeight -=
1402        parseFloat($slide.css("paddingTop")) +
1403        parseFloat($slide.css("paddingBottom")) +
1404        parseFloat($content.css("marginTop")) +
1405        parseFloat($content.css("marginBottom"));
1406
1407      if (!width || !height) {
1408        width = maxWidth;
1409        height = maxHeight;
1410      }
1411
1412      minRatio = Math.min(1, maxWidth / width, maxHeight / height);
1413
1414      width = minRatio * width;
1415      height = minRatio * height;
1416
1417      // Adjust width/height to precisely fit into container
1418      if (width > maxWidth - 0.5) {
1419        width = maxWidth;
1420      }
1421
1422      if (height > maxHeight - 0.5) {
1423        height = maxHeight;
1424      }
1425
1426      if (slide.type === "image") {
1427        rez.top = Math.floor((maxHeight - height) * 0.5) + parseFloat($slide.css("paddingTop"));
1428        rez.left = Math.floor((maxWidth - width) * 0.5) + parseFloat($slide.css("paddingLeft"));
1429      } else if (slide.contentType === "video") {
1430        // Force aspect ratio for the video
1431        // "I say the whole world must learn of our peaceful ways… by force!"
1432        aspectRatio = slide.opts.width && slide.opts.height ? width / height : slide.opts.ratio || 16 / 9;
1433
1434        if (height > width / aspectRatio) {
1435          height = width / aspectRatio;
1436        } else if (width > height * aspectRatio) {
1437          width = height * aspectRatio;
1438        }
1439      }
1440
1441      rez.width = width;
1442      rez.height = height;
1443
1444      return rez;
1445    },
1446
1447    // Update content size and position for all slides
1448    // ==============================================
1449
1450    update: function (e) {
1451      var self = this;
1452
1453      $.each(self.slides, function (key, slide) {
1454        self.updateSlide(slide, e);
1455      });
1456    },
1457
1458    // Update slide content position and size
1459    // ======================================
1460
1461    updateSlide: function (slide, e) {
1462      var self = this,
1463        $content = slide && slide.$content,
1464        width = slide.width || slide.opts.width,
1465        height = slide.height || slide.opts.height,
1466        $slide = slide.$slide;
1467
1468      // First, prevent caption overlap, if needed
1469      self.adjustCaption(slide);
1470
1471      // Then resize content to fit inside the slide
1472      if ($content && (width || height || slide.contentType === "video") && !slide.hasError) {
1473        $.fancybox.stop($content);
1474
1475        $.fancybox.setTranslate($content, self.getFitPos(slide));
1476
1477        if (slide.pos === self.currPos) {
1478          self.isAnimating = false;
1479
1480          self.updateCursor();
1481        }
1482      }
1483
1484      // Then some adjustments
1485      self.adjustLayout(slide);
1486
1487      if ($slide.length) {
1488        $slide.trigger("refresh");
1489
1490        if (slide.pos === self.currPos) {
1491          self.$refs.toolbar
1492            .add(self.$refs.navigation.find(".fancybox-button--arrow_right"))
1493            .toggleClass("compensate-for-scrollbar", $slide.get(0).scrollHeight > $slide.get(0).clientHeight);
1494        }
1495      }
1496
1497      self.trigger("onUpdate", slide, e);
1498    },
1499
1500    // Horizontally center slide
1501    // =========================
1502
1503    centerSlide: function (duration) {
1504      var self = this,
1505        current = self.current,
1506        $slide = current.$slide;
1507
1508      if (self.isClosing || !current) {
1509        return;
1510      }
1511
1512      $slide.siblings().css({
1513        transform: "",
1514        opacity: ""
1515      });
1516
1517      $slide
1518        .parent()
1519        .children()
1520        .removeClass("fancybox-slide--previous fancybox-slide--next");
1521
1522      $.fancybox.animate(
1523        $slide, {
1524          top: 0,
1525          left: 0,
1526          opacity: 1
1527        },
1528        duration === undefined ? 0 : duration,
1529        function () {
1530          // Clean up
1531          $slide.css({
1532            transform: "",
1533            opacity: ""
1534          });
1535
1536          if (!current.isComplete) {
1537            self.complete();
1538          }
1539        },
1540        false
1541      );
1542    },
1543
1544    // Check if current slide is moved (swiped)
1545    // ========================================
1546
1547    isMoved: function (slide) {
1548      var current = slide || this.current,
1549        slidePos,
1550        stagePos;
1551
1552      if (!current) {
1553        return false;
1554      }
1555
1556      stagePos = $.fancybox.getTranslate(this.$refs.stage);
1557      slidePos = $.fancybox.getTranslate(current.$slide);
1558
1559      return (
1560        !current.$slide.hasClass("fancybox-animated") &&
1561        (Math.abs(slidePos.top - stagePos.top) > 0.5 || Math.abs(slidePos.left - stagePos.left) > 0.5)
1562      );
1563    },
1564
1565    // Update cursor style depending if content can be zoomed
1566    // ======================================================
1567
1568    updateCursor: function (nextWidth, nextHeight) {
1569      var self = this,
1570        current = self.current,
1571        $container = self.$refs.container,
1572        canPan,
1573        isZoomable;
1574
1575      if (!current || self.isClosing || !self.Guestures) {
1576        return;
1577      }
1578
1579      $container.removeClass("fancybox-is-zoomable fancybox-can-zoomIn fancybox-can-zoomOut fancybox-can-swipe fancybox-can-pan");
1580
1581      canPan = self.canPan(nextWidth, nextHeight);
1582
1583      isZoomable = canPan ? true : self.isZoomable();
1584
1585      $container.toggleClass("fancybox-is-zoomable", isZoomable);
1586
1587      $("[data-fancybox-zoom]").prop("disabled", !isZoomable);
1588
1589      if (canPan) {
1590        $container.addClass("fancybox-can-pan");
1591      } else if (
1592        isZoomable &&
1593        (current.opts.clickContent === "zoom" || ($.isFunction(current.opts.clickContent) && current.opts.clickContent(current) == "zoom"))
1594      ) {
1595        $container.addClass("fancybox-can-zoomIn");
1596      } else if (current.opts.touch && (current.opts.touch.vertical || self.group.length > 1) && current.contentType !== "video") {
1597        $container.addClass("fancybox-can-swipe");
1598      }
1599    },
1600
1601    // Check if current slide is zoomable
1602    // ==================================
1603
1604    isZoomable: function () {
1605      var self = this,
1606        current = self.current,
1607        fitPos;
1608
1609      // Assume that slide is zoomable if:
1610      //   - image is still loading
1611      //   - actual size of the image is smaller than available area
1612      if (current && !self.isClosing && current.type === "image" && !current.hasError) {
1613        if (!current.isLoaded) {
1614          return true;
1615        }
1616
1617        fitPos = self.getFitPos(current);
1618
1619        if (fitPos && (current.width > fitPos.width || current.height > fitPos.height)) {
1620          return true;
1621        }
1622      }
1623
1624      return false;
1625    },
1626
1627    // Check if current image dimensions are smaller than actual
1628    // =========================================================
1629
1630    isScaledDown: function (nextWidth, nextHeight) {
1631      var self = this,
1632        rez = false,
1633        current = self.current,
1634        $content = current.$content;
1635
1636      if (nextWidth !== undefined && nextHeight !== undefined) {
1637        rez = nextWidth < current.width && nextHeight < current.height;
1638      } else if ($content) {
1639        rez = $.fancybox.getTranslate($content);
1640        rez = rez.width < current.width && rez.height < current.height;
1641      }
1642
1643      return rez;
1644    },
1645
1646    // Check if image dimensions exceed parent element
1647    // ===============================================
1648
1649    canPan: function (nextWidth, nextHeight) {
1650      var self = this,
1651        current = self.current,
1652        pos = null,
1653        rez = false;
1654
1655      if (current.type === "image" && (current.isComplete || (nextWidth && nextHeight)) && !current.hasError) {
1656        rez = self.getFitPos(current);
1657
1658        if (nextWidth !== undefined && nextHeight !== undefined) {
1659          pos = {
1660            width: nextWidth,
1661            height: nextHeight
1662          };
1663        } else if (current.isComplete) {
1664          pos = $.fancybox.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      setTimeout(function () {
1784        var $img = slide.$image;
1785
1786        if (!self.isClosing && slide.isLoading && (!$img || !$img.length || !$img[0].complete) && !slide.hasError) {
1787          self.showLoading(slide);
1788        }
1789      }, 50);
1790
1791      //Check if image has srcset
1792      self.checkSrcset(slide);
1793
1794      // This will be wrapper containing both ghost and actual image
1795      slide.$content = $('<div class="fancybox-content"></div>')
1796        .addClass("fancybox-is-hidden")
1797        .appendTo(slide.$slide.addClass("fancybox-slide--image"));
1798
1799      // If we have a thumbnail, we can display it while actual image is loading
1800      // Users will not stare at black screen and actual image will appear gradually
1801      if (slide.opts.preload !== false && slide.opts.width && slide.opts.height && slide.thumb) {
1802        slide.width = slide.opts.width;
1803        slide.height = slide.opts.height;
1804
1805        ghost = document.createElement("img");
1806
1807        ghost.onerror = function () {
1808          $(this).remove();
1809
1810          slide.$ghost = null;
1811        };
1812
1813        ghost.onload = function () {
1814          self.afterLoad(slide);
1815        };
1816
1817        slide.$ghost = $(ghost)
1818          .addClass("fancybox-image")
1819          .appendTo(slide.$content)
1820          .attr("src", slide.thumb);
1821      }
1822
1823      // Start loading actual image
1824      self.setBigImage(slide);
1825    },
1826
1827    // Check if image has srcset and get the source
1828    // ============================================
1829    checkSrcset: function (slide) {
1830      var srcset = slide.opts.srcset || slide.opts.image.srcset,
1831        found,
1832        temp,
1833        pxRatio,
1834        windowWidth;
1835
1836      // If we have "srcset", then we need to find first matching "src" value.
1837      // This is necessary, because when you set an src attribute, the browser will preload the image
1838      // before any javascript or even CSS is applied.
1839      if (srcset) {
1840        pxRatio = window.devicePixelRatio || 1;
1841        windowWidth = window.innerWidth * pxRatio;
1842
1843        temp = srcset.split(",").map(function (el) {
1844          var ret = {};
1845
1846          el.trim()
1847            .split(/\s+/)
1848            .forEach(function (el, i) {
1849              var value = parseInt(el.substring(0, el.length - 1), 10);
1850
1851              if (i === 0) {
1852                return (ret.url = el);
1853              }
1854
1855              if (value) {
1856                ret.value = value;
1857                ret.postfix = el[el.length - 1];
1858              }
1859            });
1860
1861          return ret;
1862        });
1863
1864        // Sort by value
1865        temp.sort(function (a, b) {
1866          return a.value - b.value;
1867        });
1868
1869        // Ok, now we have an array of all srcset values
1870        for (var j = 0; j < temp.length; j++) {
1871          var el = temp[j];
1872
1873          if ((el.postfix === "w" && el.value >= windowWidth) || (el.postfix === "x" && el.value >= pxRatio)) {
1874            found = el;
1875            break;
1876          }
1877        }
1878
1879        // If not found, take the last one
1880        if (!found && temp.length) {
1881          found = temp[temp.length - 1];
1882        }
1883
1884        if (found) {
1885          slide.src = found.url;
1886
1887          // If we have default width/height values, we can calculate height for matching source
1888          if (slide.width && slide.height && found.postfix == "w") {
1889            slide.height = (slide.width / slide.height) * found.value;
1890            slide.width = found.value;
1891          }
1892
1893          slide.opts.srcset = srcset;
1894        }
1895      }
1896    },
1897
1898    // Create full-size image
1899    // ======================
1900
1901    setBigImage: function (slide) {
1902      var self = this,
1903        img = document.createElement("img"),
1904        $img = $(img);
1905
1906      slide.$image = $img
1907        .one("error", function () {
1908          self.setError(slide);
1909        })
1910        .one("load", function () {
1911          var sizes;
1912
1913          if (!slide.$ghost) {
1914            self.resolveImageSlideSize(slide, this.naturalWidth, this.naturalHeight);
1915
1916            self.afterLoad(slide);
1917          }
1918
1919          if (self.isClosing) {
1920            return;
1921          }
1922
1923          if (slide.opts.srcset) {
1924            sizes = slide.opts.sizes;
1925
1926            if (!sizes || sizes === "auto") {
1927              sizes =
1928                (slide.width / slide.height > 1 && $W.width() / $W.height() > 1 ? "100" : Math.round((slide.width / slide.height) * 100)) +
1929                "vw";
1930            }
1931
1932            $img.attr("sizes", sizes).attr("srcset", slide.opts.srcset);
1933          }
1934
1935          // Hide temporary image after some delay
1936          if (slide.$ghost) {
1937            setTimeout(function () {
1938              if (slide.$ghost && !self.isClosing) {
1939                slide.$ghost.hide();
1940              }
1941            }, Math.min(300, Math.max(1000, slide.height / 1600)));
1942          }
1943
1944          self.hideLoading(slide);
1945        })
1946        .addClass("fancybox-image")
1947        .attr("src", slide.src)
1948        .appendTo(slide.$content);
1949
1950      if ((img.complete || img.readyState == "complete") && $img.naturalWidth && $img.naturalHeight) {
1951        $img.trigger("load");
1952      } else if (img.error) {
1953        $img.trigger("error");
1954      }
1955    },
1956
1957    // Computes the slide size from image size and maxWidth/maxHeight
1958    // ==============================================================
1959
1960    resolveImageSlideSize: function (slide, imgWidth, imgHeight) {
1961      var maxWidth = parseInt(slide.opts.width, 10),
1962        maxHeight = parseInt(slide.opts.height, 10);
1963
1964      // Sets the default values from the image
1965      slide.width = imgWidth;
1966      slide.height = imgHeight;
1967
1968      if (maxWidth > 0) {
1969        slide.width = maxWidth;
1970        slide.height = Math.floor((maxWidth * imgHeight) / imgWidth);
1971      }
1972
1973      if (maxHeight > 0) {
1974        slide.width = Math.floor((maxHeight * imgWidth) / imgHeight);
1975        slide.height = maxHeight;
1976      }
1977    },
1978
1979    // Create iframe wrapper, iframe and bindings
1980    // ==========================================
1981
1982    setIframe: function (slide) {
1983      var self = this,
1984        opts = slide.opts.iframe,
1985        $slide = slide.$slide,
1986        $iframe;
1987
1988      slide.$content = $('<div class="fancybox-content' + (opts.preload ? " fancybox-is-hidden" : "") + '"></div>')
1989        .css(opts.css)
1990        .appendTo($slide);
1991
1992      $slide.addClass("fancybox-slide--" + slide.contentType);
1993
1994      slide.$iframe = $iframe = $(opts.tpl.replace(/\{rnd\}/g, new Date().getTime()))
1995        .attr(opts.attr)
1996        .appendTo(slide.$content);
1997
1998      if (opts.preload) {
1999        self.showLoading(slide);
2000
2001        // Unfortunately, it is not always possible to determine if iframe is successfully loaded
2002        // (due to browser security policy)
2003
2004        $iframe.on("load.fb error.fb", function (e) {
2005          this.isReady = 1;
2006
2007          slide.$slide.trigger("refresh");
2008
2009          self.afterLoad(slide);
2010        });
2011
2012        // Recalculate iframe content size
2013        // ===============================
2014
2015        $slide.on("refresh.fb", function () {
2016          var $content = slide.$content,
2017            frameWidth = opts.css.width,
2018            frameHeight = opts.css.height,
2019            $contents,
2020            $body;
2021
2022          if ($iframe[0].isReady !== 1) {
2023            return;
2024          }
2025
2026          try {
2027            $contents = $iframe.contents();
2028            $body = $contents.find("body");
2029          } catch (ignore) {}
2030
2031          // Calculate content dimensions, if it is accessible
2032          if ($body && $body.length && $body.children().length) {
2033            // Avoid scrolling to top (if multiple instances)
2034            $slide.css("overflow", "visible");
2035
2036            $content.css({
2037              width: "100%",
2038              "max-width": "100%",
2039              height: "9999px"
2040            });
2041
2042            if (frameWidth === undefined) {
2043              frameWidth = Math.ceil(Math.max($body[0].clientWidth, $body.outerWidth(true)));
2044            }
2045
2046            $content.css("width", frameWidth ? frameWidth : "").css("max-width", "");
2047
2048            if (frameHeight === undefined) {
2049              frameHeight = Math.ceil(Math.max($body[0].clientHeight, $body.outerHeight(true)));
2050            }
2051
2052            $content.css("height", frameHeight ? frameHeight : "");
2053
2054            $slide.css("overflow", "auto");
2055          }
2056
2057          $content.removeClass("fancybox-is-hidden");
2058        });
2059      } else {
2060        self.afterLoad(slide);
2061      }
2062
2063      $iframe.attr("src", slide.src);
2064
2065      // Remove iframe if closing or changing gallery item
2066      $slide.one("onReset", function () {
2067        // This helps IE not to throw errors when closing
2068        try {
2069          $(this)
2070            .find("iframe")
2071            .hide()
2072            .unbind()
2073            .attr("src", "//about:blank");
2074        } catch (ignore) {}
2075
2076        $(this)
2077          .off("refresh.fb")
2078          .empty();
2079
2080        slide.isLoaded = false;
2081        slide.isRevealed = false;
2082      });
2083    },
2084
2085    // Wrap and append content to the slide
2086    // ======================================
2087
2088    setContent: function (slide, content) {
2089      var self = this;
2090
2091      if (self.isClosing) {
2092        return;
2093      }
2094
2095      self.hideLoading(slide);
2096
2097      if (slide.$content) {
2098        $.fancybox.stop(slide.$content);
2099      }
2100
2101      slide.$slide.empty();
2102
2103      // If content is a jQuery object, then it will be moved to the slide.
2104      // The placeholder is created so we will know where to put it back.
2105      if (isQuery(content) && content.parent().length) {
2106        // Make sure content is not already moved to fancyBox
2107        if (content.hasClass("fancybox-content") || content.parent().hasClass("fancybox-content")) {
2108          content.parents(".fancybox-slide").trigger("onReset");
2109        }
2110
2111        // Create temporary element marking original place of the content
2112        slide.$placeholder = $("<div>")
2113          .hide()
2114          .insertAfter(content);
2115
2116        // Make sure content is visible
2117        content.css("display", "inline-block");
2118      } else if (!slide.hasError) {
2119        // If content is just a plain text, try to convert it to html
2120        if ($.type(content) === "string") {
2121          content = $("<div>")
2122            .append($.trim(content))
2123            .contents();
2124        }
2125
2126        // If "filter" option is provided, then filter content
2127        if (slide.opts.filter) {
2128          content = $("<div>")
2129            .html(content)
2130            .find(slide.opts.filter);
2131        }
2132      }
2133
2134      slide.$slide.one("onReset", function () {
2135        // Pause all html5 video/audio
2136        $(this)
2137          .find("video,audio")
2138          .trigger("pause");
2139
2140        // Put content back
2141        if (slide.$placeholder) {
2142          slide.$placeholder.after(content.removeClass("fancybox-content").hide()).remove();
2143
2144          slide.$placeholder = null;
2145        }
2146
2147        // Remove custom close button
2148        if (slide.$smallBtn) {
2149          slide.$smallBtn.remove();
2150
2151          slide.$smallBtn = null;
2152        }
2153
2154        // Remove content and mark slide as not loaded
2155        if (!slide.hasError) {
2156          $(this).empty();
2157
2158          slide.isLoaded = false;
2159          slide.isRevealed = false;
2160        }
2161      });
2162
2163      $(content).appendTo(slide.$slide);
2164
2165      if ($(content).is("video,audio")) {
2166        $(content).addClass("fancybox-video");
2167
2168        $(content).wrap("<div></div>");
2169
2170        slide.contentType = "video";
2171
2172        slide.opts.width = slide.opts.width || $(content).attr("width");
2173        slide.opts.height = slide.opts.height || $(content).attr("height");
2174      }
2175
2176      slide.$content = slide.$slide
2177        .children()
2178        .filter("div,form,main,video,audio,article,.fancybox-content")
2179        .first();
2180
2181      slide.$content.siblings().hide();
2182
2183      // Re-check if there is a valid content
2184      // (in some cases, ajax response can contain various elements or plain text)
2185      if (!slide.$content.length) {
2186        slide.$content = slide.$slide
2187          .wrapInner("<div></div>")
2188          .children()
2189          .first();
2190      }
2191
2192      slide.$content.addClass("fancybox-content");
2193
2194      slide.$slide.addClass("fancybox-slide--" + slide.contentType);
2195
2196      self.afterLoad(slide);
2197    },
2198
2199    // Display error message
2200    // =====================
2201
2202    setError: function (slide) {
2203      slide.hasError = true;
2204
2205      slide.$slide
2206        .trigger("onReset")
2207        .removeClass("fancybox-slide--" + slide.contentType)
2208        .addClass("fancybox-slide--error");
2209
2210      slide.contentType = "html";
2211
2212      this.setContent(slide, this.translate(slide, slide.opts.errorTpl));
2213
2214      if (slide.pos === this.currPos) {
2215        this.isAnimating = false;
2216      }
2217    },
2218
2219    // Show loading icon inside the slide
2220    // ==================================
2221
2222    showLoading: function (slide) {
2223      var self = this;
2224
2225      slide = slide || self.current;
2226
2227      if (slide && !slide.$spinner) {
2228        slide.$spinner = $(self.translate(self, self.opts.spinnerTpl))
2229          .appendTo(slide.$slide)
2230          .hide()
2231          .fadeIn("fast");
2232      }
2233    },
2234
2235    // Remove loading icon from the slide
2236    // ==================================
2237
2238    hideLoading: function (slide) {
2239      var self = this;
2240
2241      slide = slide || self.current;
2242
2243      if (slide && slide.$spinner) {
2244        slide.$spinner.stop().remove();
2245
2246        delete slide.$spinner;
2247      }
2248    },
2249
2250    // Adjustments after slide content has been loaded
2251    // ===============================================
2252
2253    afterLoad: function (slide) {
2254      var self = this;
2255
2256      if (self.isClosing) {
2257        return;
2258      }
2259
2260      slide.isLoading = false;
2261      slide.isLoaded = true;
2262
2263      self.trigger("afterLoad", slide);
2264
2265      self.hideLoading(slide);
2266
2267      // Add small close button
2268      if (slide.opts.smallBtn && (!slide.$smallBtn || !slide.$smallBtn.length)) {
2269        slide.$smallBtn = $(self.translate(slide, slide.opts.btnTpl.smallBtn)).appendTo(slide.$content);
2270      }
2271
2272      // Disable right click
2273      if (slide.opts.protect && slide.$content && !slide.hasError) {
2274        slide.$content.on("contextmenu.fb", function (e) {
2275          if (e.button == 2) {
2276            e.preventDefault();
2277          }
2278
2279          return true;
2280        });
2281
2282        // Add fake element on top of the image
2283        // This makes a bit harder for user to select image
2284        if (slide.type === "image") {
2285          $('<div class="fancybox-spaceball"></div>').appendTo(slide.$content);
2286        }
2287      }
2288
2289      self.adjustCaption(slide);
2290
2291      self.adjustLayout(slide);
2292
2293      if (slide.pos === self.currPos) {
2294        self.updateCursor();
2295      }
2296
2297      self.revealContent(slide);
2298    },
2299
2300    // Prevent caption overlap,
2301    // fix css inconsistency across browsers
2302    // =====================================
2303
2304    adjustCaption: function (slide) {
2305      var self = this,
2306        current = slide || self.current,
2307        caption = current.opts.caption,
2308        preventOverlap = current.opts.preventCaptionOverlap,
2309        $caption = self.$refs.caption,
2310        $clone,
2311        captionH = false;
2312
2313      $caption.toggleClass("fancybox-caption--separate", preventOverlap);
2314
2315      if (preventOverlap && caption && caption.length) {
2316        if (current.pos !== self.currPos) {
2317          $clone = $caption.clone().appendTo($caption.parent());
2318
2319          $clone
2320            .children()
2321            .eq(0)
2322            .empty()
2323            .html(caption);
2324
2325          captionH = $clone.outerHeight(true);
2326
2327          $clone.empty().remove();
2328        } else if (self.$caption) {
2329          captionH = self.$caption.outerHeight(true);
2330        }
2331
2332        current.$slide.css("padding-bottom", captionH || "");
2333      }
2334    },
2335
2336    // Simple hack to fix inconsistency across browsers, described here (affects Edge, too):
2337    // https://bugzilla.mozilla.org/show_bug.cgi?id=748518
2338    // ====================================================================================
2339
2340    adjustLayout: function (slide) {
2341      var self = this,
2342        current = slide || self.current,
2343        scrollHeight,
2344        marginBottom,
2345        inlinePadding,
2346        actualPadding;
2347
2348      if (current.isLoaded && current.opts.disableLayoutFix !== true) {
2349        current.$content.css("margin-bottom", "");
2350
2351        // If we would always set margin-bottom for the content,
2352        // then it would potentially break vertical align
2353        if (current.$content.outerHeight() > current.$slide.height() + 0.5) {
2354          inlinePadding = current.$slide[0].style["padding-bottom"];
2355          actualPadding = current.$slide.css("padding-bottom");
2356
2357          if (parseFloat(actualPadding) > 0) {
2358            scrollHeight = current.$slide[0].scrollHeight;
2359
2360            current.$slide.css("padding-bottom", 0);
2361
2362            if (Math.abs(scrollHeight - current.$slide[0].scrollHeight) < 1) {
2363              marginBottom = actualPadding;
2364            }
2365
2366            current.$slide.css("padding-bottom", inlinePadding);
2367          }
2368        }
2369
2370        current.$content.css("margin-bottom", marginBottom);
2371      }
2372    },
2373
2374    // Make content visible
2375    // This method is called right after content has been loaded or
2376    // user navigates gallery and transition should start
2377    // ============================================================
2378
2379    revealContent: function (slide) {
2380      var self = this,
2381        $slide = slide.$slide,
2382        end = false,
2383        start = false,
2384        isMoved = self.isMoved(slide),
2385        isRevealed = slide.isRevealed,
2386        effect,
2387        effectClassName,
2388        duration,
2389        opacity;
2390
2391      slide.isRevealed = true;
2392
2393      effect = slide.opts[self.firstRun ? "animationEffect" : "transitionEffect"];
2394      duration = slide.opts[self.firstRun ? "animationDuration" : "transitionDuration"];
2395
2396      duration = parseInt(slide.forcedDuration === undefined ? duration : slide.forcedDuration, 10);
2397
2398      if (isMoved || slide.pos !== self.currPos || !duration) {
2399        effect = false;
2400      }
2401
2402      // Check if can zoom
2403      if (effect === "zoom") {
2404        if (slide.pos === self.currPos && duration && slide.type === "image" && !slide.hasError && (start = self.getThumbPos(slide))) {
2405          end = self.getFitPos(slide);
2406        } else {
2407          effect = "fade";
2408        }
2409      }
2410
2411      // Zoom animation
2412      // ==============
2413      if (effect === "zoom") {
2414        self.isAnimating = true;
2415
2416        end.scaleX = end.width / start.width;
2417        end.scaleY = end.height / start.height;
2418
2419        // Check if we need to animate opacity
2420        opacity = slide.opts.zoomOpacity;
2421
2422        if (opacity == "auto") {
2423          opacity = Math.abs(slide.width / slide.height - start.width / start.height) > 0.1;
2424        }
2425
2426        if (opacity) {
2427          start.opacity = 0.1;
2428          end.opacity = 1;
2429        }
2430
2431        // Draw image at start position
2432        $.fancybox.setTranslate(slide.$content.removeClass("fancybox-is-hidden"), start);
2433
2434        forceRedraw(slide.$content);
2435
2436        // Start animation
2437        $.fancybox.animate(slide.$content, end, duration, function () {
2438          self.isAnimating = false;
2439
2440          self.complete();
2441        });
2442
2443        return;
2444      }
2445
2446      self.updateSlide(slide);
2447
2448      // Simply show content if no effect
2449      // ================================
2450      if (!effect) {
2451        slide.$content.removeClass("fancybox-is-hidden");
2452
2453        if (!isRevealed && isMoved && slide.type === "image" && !slide.hasError) {
2454          slide.$content.hide().fadeIn("fast");
2455        }
2456
2457        if (slide.pos === self.currPos) {
2458          self.complete();
2459        }
2460
2461        return;
2462      }
2463
2464      // Prepare for CSS transiton
2465      // =========================
2466      $.fancybox.stop($slide);
2467
2468      //effectClassName = "fancybox-animated fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-fx-" + effect;
2469      effectClassName = "fancybox-slide--" + (slide.pos >= self.prevPos ? "next" : "previous") + " fancybox-animated fancybox-fx-" + effect;
2470
2471      $slide.addClass(effectClassName).removeClass("fancybox-slide--current"); //.addClass(effectClassName);
2472
2473      slide.$content.removeClass("fancybox-is-hidden");
2474
2475      // Force reflow
2476      forceRedraw($slide);
2477
2478      if (slide.type !== "image") {
2479        slide.$content.hide().show(0);
2480      }
2481
2482      $.fancybox.animate(
2483        $slide,
2484        "fancybox-slide--current",
2485        duration,
2486        function () {
2487          $slide.removeClass(effectClassName).css({
2488            transform: "",
2489            opacity: ""
2490          });
2491
2492          if (slide.pos === self.currPos) {
2493            self.complete();
2494          }
2495        },
2496        true
2497      );
2498    },
2499
2500    // Check if we can and have to zoom from thumbnail
2501    //================================================
2502
2503    getThumbPos: function (slide) {
2504      var rez = false,
2505        $thumb = slide.$thumb,
2506        thumbPos,
2507        btw,
2508        brw,
2509        bbw,
2510        blw;
2511
2512      if (!$thumb || !inViewport($thumb[0])) {
2513        return false;
2514      }
2515
2516      thumbPos = $.fancybox.getTranslate($thumb);
2517
2518      btw = parseFloat($thumb.css("border-top-width") || 0);
2519      brw = parseFloat($thumb.css("border-right-width") || 0);
2520      bbw = parseFloat($thumb.css("border-bottom-width") || 0);
2521      blw = parseFloat($thumb.css("border-left-width") || 0);
2522
2523      rez = {
2524        top: thumbPos.top + btw,
2525        left: thumbPos.left + blw,
2526        width: thumbPos.width - brw - blw,
2527        height: thumbPos.height - btw - bbw,
2528        scaleX: 1,
2529        scaleY: 1
2530      };
2531
2532      return thumbPos.width > 0 && thumbPos.height > 0 ? rez : false;
2533    },
2534
2535    // Final adjustments after current gallery item is moved to position
2536    // and it`s content is loaded
2537    // ==================================================================
2538
2539    complete: function () {
2540      var self = this,
2541        current = self.current,
2542        slides = {},
2543        $el;
2544
2545      if (self.isMoved() || !current.isLoaded) {
2546        return;
2547      }
2548
2549      if (!current.isComplete) {
2550        current.isComplete = true;
2551
2552        current.$slide.siblings().trigger("onReset");
2553
2554        self.preload("inline");
2555
2556        // Trigger any CSS transiton inside the slide
2557        forceRedraw(current.$slide);
2558
2559        current.$slide.addClass("fancybox-slide--complete");
2560
2561        // Remove unnecessary slides
2562        $.each(self.slides, function (key, slide) {
2563          if (slide.pos >= self.currPos - 1 && slide.pos <= self.currPos + 1) {
2564            slides[slide.pos] = slide;
2565          } else if (slide) {
2566            $.fancybox.stop(slide.$slide);
2567
2568            slide.$slide.off().remove();
2569          }
2570        });
2571
2572        self.slides = slides;
2573      }
2574
2575      self.isAnimating = false;
2576
2577      self.updateCursor();
2578
2579      self.trigger("afterShow");
2580
2581      // Autoplay first html5 video/audio
2582      if (!!current.opts.video.autoStart) {
2583        current.$slide
2584          .find("video,audio")
2585          .filter(":visible:first")
2586          .trigger("play")
2587          .one("ended", function () {
2588            if (Document.exitFullscreen) {
2589              Document.exitFullscreen();
2590            } else if (this.webkitExitFullscreen) {
2591              this.webkitExitFullscreen();
2592            }
2593
2594            self.next();
2595          });
2596      }
2597
2598      // Try to focus on the first focusable element
2599      if (current.opts.autoFocus && current.contentType === "html") {
2600        // Look for the first input with autofocus attribute
2601        $el = current.$content.find("input[autofocus]:enabled:visible:first");
2602
2603        if ($el.length) {
2604          $el.trigger("focus");
2605        } else {
2606          self.focus(null, true);
2607        }
2608      }
2609
2610      // Avoid jumping
2611      current.$slide.scrollTop(0).scrollLeft(0);
2612    },
2613
2614    // Preload next and previous slides
2615    // ================================
2616
2617    preload: function (type) {
2618      var self = this,
2619        prev,
2620        next;
2621
2622      if (self.group.length < 2) {
2623        return;
2624      }
2625
2626      next = self.slides[self.currPos + 1];
2627      prev = self.slides[self.currPos - 1];
2628
2629      if (prev && prev.type === type) {
2630        self.loadSlide(prev);
2631      }
2632
2633      if (next && next.type === type) {
2634        self.loadSlide(next);
2635      }
2636    },
2637
2638    // Try to find and focus on the first focusable element
2639    // ====================================================
2640
2641    focus: function (e, firstRun) {
2642      var self = this,
2643        focusableStr = [
2644          "a[href]",
2645          "area[href]",
2646          'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
2647          "select:not([disabled]):not([aria-hidden])",
2648          "textarea:not([disabled]):not([aria-hidden])",
2649          "button:not([disabled]):not([aria-hidden])",
2650          "iframe",
2651          "object",
2652          "embed",
2653          "video",
2654          "audio",
2655          "[contenteditable]",
2656          '[tabindex]:not([tabindex^="-"])'
2657        ].join(","),
2658        focusableItems,
2659        focusedItemIndex;
2660
2661      if (self.isClosing) {
2662        return;
2663      }
2664
2665      if (e || !self.current || !self.current.isComplete) {
2666        // Focus on any element inside fancybox
2667        focusableItems = self.$refs.container.find("*:visible");
2668      } else {
2669        // Focus inside current slide
2670        focusableItems = self.current.$slide.find("*:visible" + (firstRun ? ":not(.fancybox-close-small)" : ""));
2671      }
2672
2673      focusableItems = focusableItems.filter(focusableStr).filter(function () {
2674        return $(this).css("visibility") !== "hidden" && !$(this).hasClass("disabled");
2675      });
2676
2677      if (focusableItems.length) {
2678        focusedItemIndex = focusableItems.index(document.activeElement);
2679
2680        if (e && e.shiftKey) {
2681          // Back tab
2682          if (focusedItemIndex < 0 || focusedItemIndex == 0) {
2683            e.preventDefault();
2684
2685            focusableItems.eq(focusableItems.length - 1).trigger("focus");
2686          }
2687        } else {
2688          // Outside or Forward tab
2689          if (focusedItemIndex < 0 || focusedItemIndex == focusableItems.length - 1) {
2690            if (e) {
2691              e.preventDefault();
2692            }
2693
2694            focusableItems.eq(0).trigger("focus");
2695          }
2696        }
2697      } else {
2698        self.$refs.container.trigger("focus");
2699      }
2700    },
2701
2702    // Activates current instance - brings container to the front and enables keyboard,
2703    // notifies other instances about deactivating
2704    // =================================================================================
2705
2706    activate: function () {
2707      var self = this;
2708
2709      // Deactivate all instances
2710      $(".fancybox-container").each(function () {
2711        var instance = $(this).data("FancyBox");
2712
2713        // Skip self and closing instances
2714        if (instance && instance.id !== self.id && !instance.isClosing) {
2715          instance.trigger("onDeactivate");
2716
2717          instance.removeEvents();
2718
2719          instance.isVisible = false;
2720        }
2721      });
2722
2723      self.isVisible = true;
2724
2725      if (self.current || self.isIdle) {
2726        self.update();
2727
2728        self.updateControls();
2729      }
2730
2731      self.trigger("onActivate");
2732
2733      self.addEvents();
2734    },
2735
2736    // Start closing procedure
2737    // This will start "zoom-out" animation if needed and clean everything up afterwards
2738    // =================================================================================
2739
2740    close: function (e, d) {
2741      var self = this,
2742        current = self.current,
2743        effect,
2744        duration,
2745        $content,
2746        domRect,
2747        opacity,
2748        start,
2749        end;
2750
2751      var done = function () {
2752        self.cleanUp(e);
2753      };
2754
2755      if (self.isClosing) {
2756        return false;
2757      }
2758
2759      self.isClosing = true;
2760
2761      // If beforeClose callback prevents closing, make sure content is centered
2762      if (self.trigger("beforeClose", e) === false) {
2763        self.isClosing = false;
2764
2765        requestAFrame(function () {
2766          self.update();
2767        });
2768
2769        return false;
2770      }
2771
2772      // Remove all events
2773      // If there are multiple instances, they will be set again by "activate" method
2774      self.removeEvents();
2775
2776      $content = current.$content;
2777      effect = current.opts.animationEffect;
2778      duration = $.isNumeric(d) ? d : effect ? current.opts.animationDuration : 0;
2779
2780      current.$slide.removeClass("fancybox-slide--complete fancybox-slide--next fancybox-slide--previous fancybox-animated");
2781
2782      if (e !== true) {
2783        $.fancybox.stop(current.$slide);
2784      } else {
2785        effect = false;
2786      }
2787
2788      // Remove other slides
2789      current.$slide
2790        .siblings()
2791        .trigger("onReset")
2792        .remove();
2793
2794      // Trigger animations
2795      if (duration) {
2796        self.$refs.container
2797          .removeClass("fancybox-is-open")
2798          .addClass("fancybox-is-closing")
2799          .css("transition-duration", duration + "ms");
2800      }
2801
2802      // Clean up
2803      self.hideLoading(current);
2804
2805      self.hideControls(true);
2806
2807      self.updateCursor();
2808
2809      // Check if possible to zoom-out
2810      if (
2811        effect === "zoom" &&
2812        !($content && duration && current.type === "image" && !self.isMoved() && !current.hasError && (end = self.getThumbPos(current)))
2813      ) {
2814        effect = "fade";
2815      }
2816
2817      if (effect === "zoom") {
2818        $.fancybox.stop($content);
2819
2820        domRect = $.fancybox.getTranslate($content);
2821
2822        start = {
2823          top: domRect.top,
2824          left: domRect.left,
2825          scaleX: domRect.width / end.width,
2826          scaleY: domRect.height / end.height,
2827          width: end.width,
2828          height: end.height
2829        };
2830
2831        // Check if we need to animate opacity
2832        opacity = current.opts.zoomOpacity;
2833
2834        if (opacity == "auto") {
2835          opacity = Math.abs(current.width / current.height - end.width / end.height) > 0.1;
2836        }
2837
2838        if (opacity) {
2839          end.opacity = 0;
2840        }
2841
2842        $.fancybox.setTranslate($content, start);
2843
2844        forceRedraw($content);
2845
2846        $.fancybox.animate($content, end, duration, done);
2847
2848        return true;
2849      }
2850
2851      if (effect && duration) {
2852        $.fancybox.animate(
2853          current.$slide.addClass("fancybox-slide--previous").removeClass("fancybox-slide--current"),
2854          "fancybox-animated fancybox-fx-" + effect,
2855          duration,
2856          done
2857        );
2858      } else {
2859        // If skip animation
2860        if (e === true) {
2861          setTimeout(done, duration);
2862        } else {
2863          done();
2864        }
2865      }
2866
2867      return true;
2868    },
2869
2870    // Final adjustments after removing the instance
2871    // =============================================
2872
2873    cleanUp: function (e) {
2874      var self = this,
2875        instance,
2876        $focus = self.current.opts.$orig,
2877        x,
2878        y;
2879
2880      self.current.$slide.trigger("onReset");
2881
2882      self.$refs.container.empty().remove();
2883
2884      self.trigger("afterClose", e);
2885
2886      // Place back focus
2887      if (!!self.current.opts.backFocus) {
2888        if (!$focus || !$focus.length || !$focus.is(":visible")) {
2889          $focus = self.$trigger;
2890        }
2891
2892        if ($focus && $focus.length) {
2893          x = window.scrollX;
2894          y = window.scrollY;
2895
2896          $focus.trigger("focus");
2897
2898          $("html, body")
2899            .scrollTop(y)
2900            .scrollLeft(x);
2901        }
2902      }
2903
2904      self.current = null;
2905
2906      // Check if there are other instances
2907      instance = $.fancybox.getInstance();
2908
2909      if (instance) {
2910        instance.activate();
2911      } else {
2912        $("body").removeClass("fancybox-active compensate-for-scrollbar");
2913
2914        $("#fancybox-style-noscroll").remove();
2915      }
2916    },
2917
2918    // Call callback and trigger an event
2919    // ==================================
2920
2921    trigger: function (name, slide) {
2922      var args = Array.prototype.slice.call(arguments, 1),
2923        self = this,
2924        obj = slide && slide.opts ? slide : self.current,
2925        rez;
2926
2927      if (obj) {
2928        args.unshift(obj);
2929      } else {
2930        obj = self;
2931      }
2932
2933      args.unshift(self);
2934
2935      if ($.isFunction(obj.opts[name])) {
2936        rez = obj.opts[name].apply(obj, args);
2937      }
2938
2939      if (rez === false) {
2940        return rez;
2941      }
2942
2943      if (name === "afterClose" || !self.$refs) {
2944        $D.trigger(name + ".fb", args);
2945      } else {
2946        self.$refs.container.trigger(name + ".fb", args);
2947      }
2948    },
2949
2950    // Update infobar values, navigation button states and reveal caption
2951    // ==================================================================
2952
2953    updateControls: function () {
2954      var self = this,
2955        current = self.current,
2956        index = current.index,
2957        $container = self.$refs.container,
2958        $caption = self.$refs.caption,
2959        caption = current.opts.caption;
2960
2961      // Recalculate content dimensions
2962      current.$slide.trigger("refresh");
2963
2964      // Set caption
2965      if (caption && caption.length) {
2966        self.$caption = $caption;
2967
2968        $caption
2969          .children()
2970          .eq(0)
2971          .html(caption);
2972      } else {
2973        self.$caption = null;
2974      }
2975
2976      if (!self.hasHiddenControls && !self.isIdle) {
2977        self.showControls();
2978      }
2979
2980      // Update info and navigation elements
2981      $container.find("[data-fancybox-count]").html(self.group.length);
2982      $container.find("[data-fancybox-index]").html(index + 1);
2983
2984      $container.find("[data-fancybox-prev]").prop("disabled", !current.opts.loop && index <= 0);
2985      $container.find("[data-fancybox-next]").prop("disabled", !current.opts.loop && index >= self.group.length - 1);
2986
2987      if (current.type === "image") {
2988        // Re-enable buttons; update download button source
2989        $container
2990          .find("[data-fancybox-zoom]")
2991          .show()
2992          .end()
2993          .find("[data-fancybox-download]")
2994          .attr("href", current.opts.image.src || current.src)
2995          .show();
2996      } else if (current.opts.toolbar) {
2997        $container.find("[data-fancybox-download],[data-fancybox-zoom]").hide();
2998      }
2999
3000      // Make sure focus is not on disabled button/element
3001      if ($(document.activeElement).is(":hidden,[disabled]")) {
3002        self.$refs.container.trigger("focus");
3003      }
3004    },
3005
3006    // Hide toolbar and caption
3007    // ========================
3008
3009    hideControls: function (andCaption) {
3010      var self = this,
3011        arr = ["infobar", "toolbar", "nav"];
3012
3013      if (andCaption || !self.current.opts.preventCaptionOverlap) {
3014        arr.push("caption");
3015      }
3016
3017      this.$refs.container.removeClass(
3018        arr
3019        .map(function (i) {
3020          return "fancybox-show-" + i;
3021        })
3022        .join(" ")
3023      );
3024
3025      this.hasHiddenControls = true;
3026    },
3027
3028    showControls: function () {
3029      var self = this,
3030        opts = self.current ? self.current.opts : self.opts,
3031        $container = self.$refs.container;
3032
3033      self.hasHiddenControls = false;
3034      self.idleSecondsCounter = 0;
3035
3036      $container
3037        .toggleClass("fancybox-show-toolbar", !!(opts.toolbar && opts.buttons))
3038        .toggleClass("fancybox-show-infobar", !!(opts.infobar && self.group.length > 1))
3039        .toggleClass("fancybox-show-caption", !!self.$caption)
3040        .toggleClass("fancybox-show-nav", !!(opts.arrows && self.group.length > 1))
3041        .toggleClass("fancybox-is-modal", !!opts.modal);
3042    },
3043
3044    // Toggle toolbar and caption
3045    // ==========================
3046
3047    toggleControls: function () {
3048      if (this.hasHiddenControls) {
3049        this.showControls();
3050      } else {
3051        this.hideControls();
3052      }
3053    }
3054  });
3055
3056  $.fancybox = {
3057    version: "3.5.7",
3058    defaults: defaults,
3059
3060    // Get current instance and execute a command.
3061    //
3062    // Examples of usage:
3063    //
3064    //   $instance = $.fancybox.getInstance();
3065    //   $.fancybox.getInstance().jumpTo( 1 );
3066    //   $.fancybox.getInstance( 'jumpTo', 1 );
3067    //   $.fancybox.getInstance( function() {
3068    //       console.info( this.currIndex );
3069    //   });
3070    // ======================================================
3071
3072    getInstance: function (command) {
3073      var instance = $('.fancybox-container:not(".fancybox-is-closing"):last').data("FancyBox"),
3074        args = Array.prototype.slice.call(arguments, 1);
3075
3076      if (instance instanceof FancyBox) {
3077        if ($.type(command) === "string") {
3078          instance[command].apply(instance, args);
3079        } else if ($.type(command) === "function") {
3080          command.apply(instance, args);
3081        }
3082
3083        return instance;
3084      }
3085
3086      return false;
3087    },
3088
3089    // Create new instance
3090    // ===================
3091
3092    open: function (items, opts, index) {
3093      return new FancyBox(items, opts, index);
3094    },
3095
3096    // Close current or all instances
3097    // ==============================
3098
3099    close: function (all) {
3100      var instance = this.getInstance();
3101
3102      if (instance) {
3103        instance.close();
3104
3105        // Try to find and close next instance
3106        if (all === true) {
3107          this.close(all);
3108        }
3109      }
3110    },
3111
3112    // Close all instances and unbind all events
3113    // =========================================
3114
3115    destroy: function () {
3116      this.close(true);
3117
3118      $D.add("body").off("click.fb-start", "**");
3119    },
3120
3121    // Try to detect mobile devices
3122    // ============================
3123
3124    isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
3125
3126    // Detect if 'translate3d' support is available
3127    // ============================================
3128
3129    use3d: (function () {
3130      var div = document.createElement("div");
3131
3132      return (
3133        window.getComputedStyle &&
3134        window.getComputedStyle(div) &&
3135        window.getComputedStyle(div).getPropertyValue("transform") &&
3136        !(document.documentMode && document.documentMode < 11)
3137      );
3138    })(),
3139
3140    // Helper function to get current visual state of an element
3141    // returns array[ top, left, horizontal-scale, vertical-scale, opacity ]
3142    // =====================================================================
3143
3144    getTranslate: function ($el) {
3145      var domRect;
3146
3147      if (!$el || !$el.length) {
3148        return false;
3149      }
3150
3151      domRect = $el[0].getBoundingClientRect();
3152
3153      return {
3154        top: domRect.top || 0,
3155        left: domRect.left || 0,
3156        width: domRect.width,
3157        height: domRect.height,
3158        opacity: parseFloat($el.css("opacity"))
3159      };
3160    },
3161
3162    // Shortcut for setting "translate3d" properties for element
3163    // Can set be used to set opacity, too
3164    // ========================================================
3165
3166    setTranslate: function ($el, props) {
3167      var str = "",
3168        css = {};
3169
3170      if (!$el || !props) {
3171        return;
3172      }
3173
3174      if (props.left !== undefined || props.top !== undefined) {
3175        str =
3176          (props.left === undefined ? $el.position().left : props.left) +
3177          "px, " +
3178          (props.top === undefined ? $el.position().top : props.top) +
3179          "px";
3180
3181        if (this.use3d) {
3182          str = "translate3d(" + str + ", 0px)";
3183        } else {
3184          str = "translate(" + str + ")";
3185        }
3186      }
3187
3188      if (props.scaleX !== undefined && props.scaleY !== undefined) {
3189        str += " scale(" + props.scaleX + ", " + props.scaleY + ")";
3190      } else if (props.scaleX !== undefined) {
3191        str += " scaleX(" + props.scaleX + ")";
3192      }
3193
3194      if (str.length) {
3195        css.transform = str;
3196      }
3197
3198      if (props.opacity !== undefined) {
3199        css.opacity = props.opacity;
3200      }
3201
3202      if (props.width !== undefined) {
3203        css.width = props.width;
3204      }
3205
3206      if (props.height !== undefined) {
3207        css.height = props.height;
3208      }
3209
3210      return $el.css(css);
3211    },
3212
3213    // Simple CSS transition handler
3214    // =============================
3215
3216    animate: function ($el, to, duration, callback, leaveAnimationName) {
3217      var self = this,
3218        from;
3219
3220      if ($.isFunction(duration)) {
3221        callback = duration;
3222        duration = null;
3223      }
3224
3225      self.stop($el);
3226
3227      from = self.getTranslate($el);
3228
3229      $el.on(transitionEnd, function (e) {
3230        // Skip events from child elements and z-index change
3231        if (e && e.originalEvent && (!$el.is(e.originalEvent.target) || e.originalEvent.propertyName == "z-index")) {
3232          return;
3233        }
3234
3235        self.stop($el);
3236
3237        if ($.isNumeric(duration)) {
3238          $el.css("transition-duration", "");
3239        }
3240
3241        if ($.isPlainObject(to)) {
3242          if (to.scaleX !== undefined && to.scaleY !== undefined) {
3243            self.setTranslate($el, {
3244              top: to.top,
3245              left: to.left,
3246              width: from.width * to.scaleX,
3247              height: from.height * to.scaleY,
3248              scaleX: 1,
3249              scaleY: 1
3250            });
3251          }
3252        } else if (leaveAnimationName !== true) {
3253          $el.removeClass(to);
3254        }
3255
3256        if ($.isFunction(callback)) {
3257          callback(e);
3258        }
3259      });
3260
3261      if ($.isNumeric(duration)) {
3262        $el.css("transition-duration", duration + "ms");
3263      }
3264
3265      // Start animation by changing CSS properties or class name
3266      if ($.isPlainObject(to)) {
3267        if (to.scaleX !== undefined && to.scaleY !== undefined) {
3268          delete to.width;
3269          delete to.height;
3270
3271          if ($el.parent().hasClass("fancybox-slide--image")) {
3272            $el.parent().addClass("fancybox-is-scaling");
3273          }
3274        }
3275
3276        $.fancybox.setTranslate($el, to);
3277      } else {
3278        $el.addClass(to);
3279      }
3280
3281      // Make sure that `transitionend` callback gets fired
3282      $el.data(
3283        "timer",
3284        setTimeout(function () {
3285          $el.trigger(transitionEnd);
3286        }, duration + 33)
3287      );
3288    },
3289
3290    stop: function ($el, callCallback) {
3291      if ($el && $el.length) {
3292        clearTimeout($el.data("timer"));
3293
3294        if (callCallback) {
3295          $el.trigger(transitionEnd);
3296        }
3297
3298        $el.off(transitionEnd).css("transition-duration", "");
3299
3300        $el.parent().removeClass("fancybox-is-scaling");
3301      }
3302    }
3303  };
3304
3305  // Default click handler for "fancyboxed" links
3306  // ============================================
3307
3308  function _run(e, opts) {
3309