https://shinwugi.com/resources/js/fancybox/jquery.fancybox.js

1// ==================================================
2// fancyBox v3.3.5
3//
4// Licensed GPLv3 for open source use
5// or fancyBox Commercial License for commercial use
6//
7// http://fancyapps.com/fancybox/
8// Copyright 2018 fancyApps
9//
10// ==================================================
11(function(window, document, $, undefined) {
12    "use strict";
13  
14    window.console = window.console || {
15      info: function(stuff) {}
16    };
17  
18    // If there's no jQuery, fancyBox can't work
19    // =========================================
20  
21    if (!$) {
22      return;
23    }
24  
25    // Check if fancyBox is already initialized
26    // ========================================
27  
28    if ($.fn.fancybox) {
29      console.info("fancyBox already initialized");
30  
31      return;
32    }
33  
34    // Private default settings
35    // ========================
36  
37    var defaults = {
38      // Enable infinite gallery navigation
39      loop: false,
40  
41      // Horizontal space between slides
42      gutter: 50,
43  
44      // Enable keyboard navigation
45      keyboard: true,
46  
47      // Should display navigation arrows at the screen edges
48      arrows: true,
49  
50      // Should display counter at the top left corner
51      infobar: true,
52  
53      // Should display close button (using `btnTpl.smallBtn` template) over the content
54      // Can be true, false, "auto"
55      // If "auto" - will be automatically enabled for "html", "inline" or "ajax" items
56      smallBtn: "auto",
57  
58      // Should display toolbar (buttons at the top)
59      // Can be true, false, "auto"
60      // If "auto" - will be automatically hidden if "smallBtn" is enabled
61      toolbar: "auto",
62  
63      // What buttons should appear in the top right corner.
64      // Buttons will be created using templates from `btnTpl` option
65      // and they will be placed into toolbar (class="fancybox-toolbar"` element)
66      buttons: [
67        "zoom",
68        //"share",
69        //"slideShow",
70        //"fullScreen",
71        //"download",
72        "thumbs",
73        "close"
74      ],
75  
76      // Detect "idle" time in seconds
77      idleTime: 3,
78  
79      // Disable right-click and use simple image protection for images
80      protect: false,
81  
82      // Shortcut to make content "modal" - disable keyboard navigtion, hide buttons, etc
83      modal: false,
84  
85      image: {
86        // Wait for images to load before displaying
87        //   true  - wait for image to load and then display;
88        //   false - display thumbnail and load the full-sized image over top,
89        //           requires predefined image dimensions (`data-width` and `data-height` attributes)
90        preload: false
91      },
92  
93      ajax: {
94        // Object containing settings for ajax request
95        settings: {
96          // This helps to indicate that request comes from the modal
97          // Feel free to change naming
98          data: {
99            fancybox: true
100          }
101        }
102      },
103  
104      iframe: {
105        // Iframe template
106        tpl:
107          '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',
108  
109        // Preload iframe before displaying it
110        // This allows to calculate iframe content width and height
111        // (note: Due to "Same Origin Policy", you can't get cross domain data).
112        preload: true,
113  
114        // Custom CSS styling for iframe wrapping element
115        // You can use this to set custom iframe dimensions
116        css: {},
117  
118        // Iframe tag attributes
119        attr: {
120          scrolling: "auto"
121        }
122      },
123  
124      // Default content type if cannot be detected automatically
125      defaultType: "image",
126  
127      // Open/close animation type
128      // Possible values:
129      //   false            - disable
130      //   "zoom"           - zoom images from/to thumbnail
131      //   "fade"
132      //   "zoom-in-out"
133      //
134      animationEffect: "zoom",
135  
136      // Duration in ms for open/close animation
137      animationDuration: 366,
138  
139      // Should image change opacity while zooming
140      // If opacity is "auto", then opacity will be changed if image and thumbnail have different aspect ratios
141      zoomOpacity: "auto",
142  
143      // Transition effect between slides
144      //
145      // Possible values:
146      //   false            - disable
147      //   "fade'
148      //   "slide'
149      //   "circular'
150      //   "tube'
151      //   "zoom-in-out'
152      //   "rotate'
153      //
154      transitionEffect: "fade",
155  
156      // Duration in ms for transition animation
157      transitionDuration: 366,
158  
159      // Custom CSS class for slide element
160      slideClass: "",
161  
162      // Custom CSS class for layout
163      baseClass: "",
164  
165      // Base template for layout
166      baseTpl:
167        '<div class="fancybox-container" role="dialog" tabindex="-1">' +
168        '<div class="fancybox-bg"></div>' +
169        '<div class="fancybox-inner">' +
170        '<div class="fancybox-infobar">' +
171        "<span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span>" +
172        "</div>" +
173        '<div class="fancybox-toolbar">{{buttons}}</div>' +
174        '<div class="fancybox-navigation">{{arrows}}</div>' +
175        '<div class="fancybox-stage"></div>' +
176        '<div class="fancybox-caption"></div>' +
177        "</div>" +
178        "</div>",
179  
180      // Loading indicator template
181      spinnerTpl: '<div class="fancybox-loading"></div>',
182  
183      // Error message template
184      errorTpl: '<div class="fancybox-error"><p>{{ERROR}}</p></div>',
185  
186      btnTpl: {
187        download:
188          '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
189          '<svg viewBox="0 0 40 40">' +
190          '<path d="M13,16 L20,23 L27,16 M20,7 L20,23 M10,24 L10,28 L30,28 L30,24" />' +
191          "</svg>" +
192          "</a>",
193  
194        zoom:
195          '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
196          '<svg viewBox="0 0 40 40">' +
197          '<path d="M18,17 m-8,0 a8,8 0 1,0 16,0 a8,8 0 1,0 -16,0 M24,22 L31,29" />' +
198          "</svg>" +
199          "</button>",
200  
201        close:
202          '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
203          '<svg viewBox="0 0 40 40">' +
204          '<path d="M10,10 L30,30 M30,10 L10,30" />' +
205          "</svg>" +
206          "</button>",
207  
208        // This small close button will be appended to your html/inline/ajax content by default,
209        // if "smallBtn" option is not set to false
210        smallBtn:
211          '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"><svg viewBox="0 0 32 32"><path d="M10,10 L22,22 M22,10 L10,22"></path></svg></button>',
212  
213        // Arrows
214        arrowLeft:
215          '<a data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}" href="javascript:;">' +
216          '<svg viewBox="0 0 40 40">' +
217          '<path d="M18,12 L10,20 L18,28 M10,20 L30,20"></path>' +
218          "</svg>" +
219          "</a>",
220  
221        arrowRight:
222          '<a data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}" href="javascript:;">' +
223          '<svg viewBox="0 0 40 40">' +
224          '<path d="M10,20 L30,20 M22,12 L30,20 L22,28"></path>' +
225          "</svg>" +
226          "</a>"
227      },
228  
229      // Container is injected into this element
230      parentEl: "body",
231  
232      // Focus handling
233      // ==============
234  
235      // Try to focus on the first focusable element after opening
236      autoFocus: false,
237  
238      // Put focus back to active element after closing
239      backFocus: true,
240  
241      // Do not let user to focus on element outside modal content
242      trapFocus: true,
243  
244      // Module specific options
245      // =======================
246  
247      fullScreen: {
248        autoStart: false
249      },
250  
251      // Set `touch: false` to disable dragging/swiping
252      touch: {
253        vertical: true, // Allow to drag content vertically
254        momentum: true // Continue movement after releasing mouse/touch when panning
255      },
256  
257      // Hash value when initializing manually,
258      // set `false` to disable hash change
259      hash: null,
260  
261      // Customize or add new media types
262      // Example:
263      /*
264          media : {
265              youtube : {
266                  params : {
267                      autoplay : 0
268                  }
269              }
270          }
271          */
272      media: {},
273  
274      slideShow: {
275        autoStart: false,
276        speed: 4000
277      },
278  
279      thumbs: {
280        autoStart: false, // Display thumbnails on opening
281        hideOnClose: true, // Hide thumbnail grid when closing animation starts
282        parentEl: ".fancybox-container", // Container is injected into this element
283        axis: "y" // Vertical (y) or horizontal (x) scrolling
284      },
285  
286      // Use mousewheel to navigate gallery
287      // If 'auto' - enabled for images only
288      wheel: "auto",
289  
290      // Callbacks
291      //==========
292  
293      // See Documentation/API/Events for more information
294      // Example:
295      /*
296          afterShow: function( instance, current ) {
297              console.info( 'Clicked element:' );
298              console.info( current.opts.$orig );
299          }
300      */
301  
302      onInit: $.noop, // When instance has been initialized
303  
304      beforeLoad: $.noop, // Before the content of a slide is being loaded
305      afterLoad: $.noop, // When the content of a slide is done loading
306  
307      beforeShow: $.noop, // Before open animation starts
308      afterShow: $.noop, // When content is done loading and animating
309  
310      beforeClose: $.noop, // Before the instance attempts to close. Return false to cancel the close.
311      afterClose: $.noop, // After instance has been closed
312  
313      onActivate: $.noop, // When instance is brought to front
314      onDeactivate: $.noop, // When other instance has been activated
315  
316      // Interaction
317      // ===========
318  
319      // Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
320      // each option can be string or method that returns value.
321      //
322      // Possible values:
323      //   "close"           - close instance
324      //   "next"            - move to next gallery item
325      //   "nextOrClose"     - move to next gallery item or close if gallery has only one item
326      //   "toggleControls"  - show/hide controls
327      //   "zoom"            - zoom image (if loaded)
328      //   false             - do nothing
329  
330      // Clicked on the content
331      clickContent: function(current, event) {
332        return current.type === "image" ? "zoom" : false;
333      },
334  
335      // Clicked on the slide
336      clickSlide: "close",
337  
338      // Clicked on the background (backdrop) element;
339      // if you have not changed the layout, then most likely you need to use `clickSlide` option
340      clickOutside: "close",
341  
342      // Same as previous two, but for double click
343      dblclickContent: false,
344      dblclickSlide: false,
345      dblclickOutside: false,
346  
347      // Custom options when mobile device is detected
348      // =============================================
349  
350      mobile: {
351        idleTime: false,
352        clickContent: function(current, event) {
353          return current.type === "image" ? "toggleControls" : false;

388 Bitte versuchen Sie es später nochmal.",
389          PLAY_START: "Diaschau starten",
390          PLAY_STOP: "Diaschau beenden",
391          FULL_SCREEN: "Vollbild",
392          THUMBS: "Vorschaubilder",
393          DOWNLOAD: "Herunterladen",
394          SHARE: "Teilen",
395          ZOOM: "Maßstab"
396        }
397      }
398    };
399  
400    // Few useful variables and methods
401    // ================================
402  
403    var $W = $(window);
404    var $D = $(document);
405  
406    var called = 0;
407  
408    // Check if an object is a jQuery object and not a native JavaScript object
409    // ========================================================================
410    var isQuery = function(obj) {
411      return obj && obj.hasOwnProperty && obj instanceof $;
412    };
413  
414    // Handle multiple browsers for "requestAnimationFrame" and "cancelAnimationFrame"
415    // ===============================================================================
416    var requestAFrame = (function() {
417      return (
418        window.requestAnimationFrame ||
419        window.webkitRequestAnimationFrame ||
420        window.mozRequestAnimationFrame ||
421        window.oRequestAnimationFrame ||
422        // if all else fails, use setTimeout
423        function(callback) {
424          return window.setTimeout(callback, 1000 / 60);
425        }
426      );
427    })();
428  
429    // Detect the supported transition-end event property name
430    // =======================================================
431    var transitionEnd = (function() {
432      var el = document.createElement("fakeelement"),
433        t;
434  
435      var transitions = {
436        transition: "transitionend",
437        OTransition: "oTransitionEnd",
438        MozTransition: "transitionend",
439        WebkitTransition: "webkitTransitionEnd"
440      };
441  
442      for (t in transitions) {
443        if (el.style[t] !== undefined) {
444          return transitions[t];
445        }
446      }
447  
448      return "transitionend";
449    })();
450  
451    // Force redraw on an element.
452    // This helps in cases where the browser doesn't redraw an updated element properly
453    // ================================================================================
454    var forceRedraw = function($el) {
455      return $el && $el.length && $el[0].offsetHeight;
456    };
457  
458    // Exclude array (`buttons`) options from deep merging
459    // ===================================================
460    var mergeOpts = function(opts1, opts2) {
461      var rez = $.extend(true, {}, opts1, opts2);
462  
463      $.each(opts2, function(key, value) {
464        if ($.isArray(value)) {
465          rez[key] = value;
466        }
467      });
468  
469      return rez;
470    };
471  
472    // Class definition
473    // ================
474  
475    var FancyBox = function(content, opts, index) {
476      var self = this;
477  
478      self.opts = mergeOpts({index: index}, $.fancybox.defaults);
479  
480      if ($.isPlainObject(opts)) {
481        self.opts = mergeOpts(self.opts, opts);
482      }
483  
484      if ($.fancybox.isMobile) {
485        self.opts = mergeOpts(self.opts, self.opts.mobile);
486      }
487  
488      self.id = self.opts.id || ++called;
489  
490      self.currIndex = parseInt(self.opts.index, 10) || 0;
491      self.prevIndex = null;
492  
493      self.prevPos = null;
494      self.currPos = 0;
495  
496      self.firstRun = true;
497  
498      // All group items
499      self.group = [];
500  
501      // Existing slides (for current, next and previous gallery items)
502      self.slides = {};
503  
504      // Create group elements
505      self.addContent(content);
506  
507      if (!self.group.length) {
508        return;
509      }
510  
511      // Save last active element
512      self.$lastFocus = $(document.activeElement).trigger("blur");
513  
514      self.init();
515    };
516  
517    $.extend(FancyBox.prototype, {
518      // Create DOM structure
519      // ====================
520  
521      init: function() {
522        var self = this,
523          firstItem = self.group[self.currIndex],
524          firstItemOpts = firstItem.opts,
525          scrollbarWidth = $.fancybox.scrollbarWidth,
526          $scrollDiv,
527          $container,
528          buttonStr;
529  
530        // Hide scrollbars
531        // ===============
532  
533        if (!$.fancybox.getInstance() && firstItemOpts.hideScrollbar !== false) {
534          $("body").addClass("fancybox-active");
535  
536          if (!$.fancybox.isMobile && document.body.scrollHeight > window.innerHeight) {
537            if (scrollbarWidth === undefined) {
538              $scrollDiv = $('<div style="width:100px;height:100px;overflow:scroll;" />').appendTo("body");
539  
540              scrollbarWidth = $.fancybox.scrollbarWidth = $scrollDiv[0].offsetWidth - $scrollDiv[0].clientWidth;
541  
542              $scrollDiv.remove();
543            }
544  
545            $("head").append(
546              '<style id="fancybox-style-noscroll" type="text/css">.compensate-for-scrollbar { margin-right: ' +
547                scrollbarWidth +
548                "px; }</style>"
549            );
550  
551            $("body").addClass("compensate-for-scrollbar");
552          }
553        }
554  
555        // Build html markup and set references
556        // ====================================
557  
558        // Build html code for buttons and insert into main template
559        buttonStr = "";
560  
561        $.each(firstItemOpts.buttons, function(index, value) {
562          buttonStr += firstItemOpts.btnTpl[value] || "";
563        });
564  
565        // Create markup from base template, it will be initially hidden to
566        // avoid unnecessary work like painting while initializing is not complete
567        $container = $(
568          self.translate(
569            self,
570            firstItemOpts.baseTpl
571              .replace("{{buttons}}", buttonStr)
572              .replace("{{arrows}}", firstItemOpts.btnTpl.arrowLeft + firstItemOpts.btnTpl.arrowRight)
573          )
574        )
575          .attr("id", "fancybox-container-" + self.id)
576          .addClass("fancybox-is-hidden")
577          .addClass(firstItemOpts.baseClass)
578          .data("FancyBox", self)
579          .appendTo(firstItemOpts.parentEl);
580  
581        // Create object holding references to jQuery wrapped nodes
582        self.$refs = {
583          container: $container
584        };
585  
586        ["bg", "inner", "infobar", "toolbar", "stage", "caption", "navigation"].forEach(function(item) {
587          self.$refs[item] = $container.find(".fancybox-" + item);
588        });
589  
590        self.trigger("onInit");
591  
592        // Enable events, deactive previous instances
593        self.activate();
594  
595        // Build slides, load and reveal content
596        self.jumpTo(self.currIndex);
597      },
598  
599      // Simple i18n support - replaces object keys found in template
600      // with corresponding values
601      // ============================================================
602  
603      translate: function(obj, str) {
604        var arr = obj.opts.i18n[obj.opts.lang];
605  
606        return str.replace(/\{\{(\w+)\}\}/g, function(match, n) {
607          var value = arr[n];
608  
609          if (value === undefined) {
610            return match;
611          }
612  
613          return value;
614        });
615      },
616  
617      // Populate current group with fresh content
618      // Check if each object has valid type and content
619      // ===============================================
620  
621      addContent: function(content) {
622        var self = this,
623          items = $.makeArray(content),
624          thumbs;
625  
626        $.each(items, function(i, item) {
627          var obj = {},
628            opts = {},
629            $item,
630            type,
631            found,
632            src,
633            srcParts;
634  
635          // Step 1 - Make sure we have an object
636          // ====================================
637  
638          if ($.isPlainObject(item)) {
639            // We probably have manual usage here, something like
640            // $.fancybox.open( [ { src : "image.jpg", type : "image" } ] )
641  
642            obj = item;
643            opts = item.opts || item;
644          } else if ($.type(item) === "object" && $(item).length) {
645            // Here we probably have jQuery collection returned by some selector
646            $item = $(item);
647  
648            // Support attributes like `data-options='{"touch" : false}'` and `data-touch='false'`
649            opts = $item.data() || {};
650            opts = $.extend(true, {}, opts, opts.options);
651  
652            // Here we store clicked element
653            opts.$orig = $item;
654  
655            obj.src = self.opts.src || opts.src || $item.attr("href");
656  
657            // Assume that simple syntax is used, for example:
658            //   `$.fancybox.open( $("#test"), {} );`
659            if (!obj.type && !obj.src) {
660              obj.type = "inline";
661              obj.src = item;
662            }
663          } else {
664            // Assume we have a simple html code, for example:
665            //   $.fancybox.open( '<div><h1>Hi!</h1></div>' );
666            obj = {
667              type: "html",
668              src: item + ""
669            };
670          }
671  
672          // Each gallery object has full collection of options
673          obj.opts = $.extend(true, {}, self.opts, opts);
674  
675          // Do not merge buttons array
676          if ($.isArray(opts.buttons)) {
677            obj.opts.buttons = opts.buttons;
678          }
679  
680          // Step 2 - Make sure we have content type, if not - try to guess
681          // ==============================================================
682  
683          type = obj.type || obj.opts.type;
684          src = obj.src || "";
685  
686          if (!type && src) {
687            if ((found = src.match(/\.(mp4|mov|ogv)((\?|#).*)?$/i))) {
688              type = "video";
689  
690              if (!obj.opts.videoFormat) {
691                obj.opts.videoFormat = "video/" + (found[1] === "ogv" ? "ogg" : found[1]);
692              }
693            } else if (src.match(/(^data:image\/[a-z0-9+\/=]*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg|ico)((\?|#).*)?$)/i)) {
694              type = "image";
695            } else if (src.match(/\.(pdf)((\?|#).*)?$/i)) {
696              type = "iframe";
697            } else if (src.charAt(0) === "#") {
698              type = "inline";
699            }
700          }
701  
702          if (type) {
703            obj.type = type;
704          } else {
705            self.trigger("objectNeedsType", obj);
706          }
707  
708          if (!obj.contentType) {
709            obj.contentType = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1 ? "html" : obj.type;
710          }
711  
712          // Step 3 - Some adjustments
713          // =========================
714  
715          obj.index = self.group.length;
716  
717          if (obj.opts.smallBtn == "auto") {
718            obj.opts.smallBtn = $.inArray(obj.type, ["html", "inline", "ajax"]) > -1;
719          }
720  
721          if (obj.opts.toolbar === "auto") {
722            obj.opts.toolbar = !obj.opts.smallBtn;
723          }
724  
725          // Find thumbnail image
726          if (obj.opts.$trigger && obj.index === self.opts.index) {
727            obj.opts.$thumb = obj.opts.$trigger.find("img:first");
728          }
729  
730          if ((!obj.opts.$thumb || !obj.opts.$thumb.length) && obj.opts.$orig) {
731            obj.opts.$thumb = obj.opts.$orig.find("img:first");
732          }
733  
734          // "caption" is a "special" option, it can be used to customize caption per gallery item ..
735          if ($.type(obj.opts.caption) === "function") {
736            obj.opts.caption = obj.opts.caption.apply(item, [self, obj]);
737          }
738  
739          if ($.type(self.opts.caption) === "function") {
740            obj.opts.caption = self.opts.caption.apply(item, [self, obj]);
741          }
742  
743          // Make sure we have caption as a string or jQuery object
744          if (!(obj.opts.caption instanceof $)) {
745            obj.opts.caption = obj.opts.caption === undefined ? "" : obj.opts.caption + "";
746          }
747  
748          // Check if url contains "filter" used to filter the content
749          // Example: "ajax.html #something"
750          if (obj.type === "ajax") {
751            srcParts = src.split(/\s+/, 2);
752  
753            if (srcParts.length > 1) {
754              obj.src = srcParts.shift();
755  
756              obj.opts.filter = srcParts.shift();
757            }
758          }
759  
760          // Hide all buttons and disable interactivity for modal items
761          if (obj.opts.modal) {
762            obj.opts = $.extend(true, obj.opts, {
763              // Remove buttons
764              infobar: 0,
765              toolbar: 0,
766  
767              smallBtn: 0,
768  
769              // Disable keyboard navigation
770              keyboard: 0,
771  
772              // Disable some modules
773              slideShow: 0,
774              fullScreen: 0,
775              thumbs: 0,
776              touch: 0,
777  
778              // Disable click event handlers
779              clickContent: false,
780              clickSlide: false,
781              clickOutside: false,
782              dblclickContent: false,
783              dblclickSlide: false,
784              dblclickOutside: false
785            });
786          }
787  
788          // Step 4 - Add processed object to group
789          // ======================================
790  
791          self.group.push(obj);
792        });
793  
794        // Update controls if gallery is already opened
795        if (Object.keys(self.slides).length) {
796          self.updateControls();
797  
798          // Update thumbnails, if needed
799          thumbs = self.Thumbs;
800  
801          if (thumbs && thumbs.isActive) {
802            thumbs.create();
803  
804            thumbs.focus();
805          }
806        }
807      },
808  
809      // Attach an event handler functions for:
810      //   - navigation buttons
811      //   - browser scrolling, resizing;
812      //   - focusing
813      //   - keyboard
814      //   - detect idle
815      // ======================================
816  
817      addEvents: function() {
818        var self = this;
819  
820        self.removeEvents();
821  
822        // Make navigation elements clickable
823        self.$refs.container
824          .on("click.fb-close", "[data-fancybox-close]", function(e) {
825            e.stopPropagation();
826            e.preventDefault();
827  
828            self.close(e);
829          })
830          .on("touchstart.fb-prev click.fb-prev", "[data-fancybox-prev]", function(e) {
831            e.stopPropagation();
832            e.preventDefault();
833  
834            self.previous();
835          })
836          .on("touchstart.fb-next click.fb-next", "[data-fancybox-next]", function(e) {
837            e.stopPropagation();
838            e.preventDefault();
839  
840            self.next();
841          })
842          .on("click.fb", "[data-fancybox-zoom]", function(e) {
843            // Click handler for zoom button
844            self[self.isScaledDown() ? "scaleToActual" : "scaleToFit"]();
845          });
846  
847        // Handle page scrolling and browser resizing
848        $W.on("orientationchange.fb resize.fb", function(e) {
849          if (e && e.originalEvent && e.originalEvent.type === "resize") {
850            requestAFrame(function() {
851              self.update();
852            });
853          } else {
854            self.$refs.stage.hide();
855  
856            setTimeout(function() {
857              self.$refs.stage.show();
858  
859              self.update();
860            }, $.fancybox.isMobile ? 600 : 250);
861          }
862        });
863  
864        // Trap keyboard focus inside of the modal, so the user does not accidentally tab outside of the modal
865        // (a.k.a. "escaping the modal")
866        $D.on("focusin.fb", function(e) {
867          var instance = $.fancybox ? $.fancybox.getInstance() : null;
868  
869          if (
870            instance.isClosing ||
871            !instance.current ||
872            !instance.current.opts.trapFocus ||
873            $(e.target).hasClass("fancybox-container") ||
874            $(e.target).is(document)
875          ) {
876            return;
877          }
878  
879          if (instance && $(e.target).css("position") !== "fixed" && !instance.$refs.container.has(e.target).length) {
880            e.stopPropagation();
881  
882            instance.focus();
883          }
884        });
885  
886        // Enable keyboard navigation
887        $D.on("keydown.fb", function(e) {
888          var current = self.current,
889            keycode = e.keyCode || e.which;
890  
891          if (!current || !current.opts.keyboard) {
892            return;
893          }
894  
895          if (e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input") || $(e.target).is("textarea")) {
896            return;
897          }
898  
899          // Backspace and Esc keys
900          if (keycode === 8 || keycode === 27) {
901            e.preventDefault();
902  
903            self.close(e);
904  
905            return;
906          }
907  
908          // Left arrow and Up arrow
909          if (keycode === 37 || keycode === 38) {
910            e.preventDefault();
911  
912            self.previous();
913  
914            return;
915          }
916  
917          // Righ arrow and Down arrow
918          if (keycode === 39 || keycode === 40) {
919            e.preventDefault();
920  
921            self.next();
922  
923            return;
924          }
925  
926          self.trigger("afterKeydown", e, keycode);
927        });
928  
929        // Hide controls after some inactivity period
930        if (self.group[self.currIndex].opts.idleTime) {
931          self.idleSecondsCounter = 0;
932  
933          $D.on(
934            "mousemove.fb-idle mouseleave.fb-idle mousedown.fb-idle touchstart.fb-idle touchmove.fb-idle scroll.fb-idle keydown.fb-idle",
935            function(e) {
936              self.idleSecondsCounter = 0;
937  
938              if (self.isIdle) {
939                self.showControls();
940              }
941  
942              self.isIdle = false;
943            }
944          );
945  
946          self.idleInterval = window.setInterval(function() {
947            self.idleSecondsCounter++;
948  
949            if (self.idleSecondsCounter >= self.group[self.currIndex].opts.idleTime && !self.isDragging) {
950              self.isIdle = true;
951              self.idleSecondsCounter = 0;
952  
953              self.hideControls();
954            }
955          }, 1000);
956        }
957      },
958  
959      // Remove events added by the core
960      // ===============================
961  
962      removeEvents: function() {
963        var self = this;
964  
965        $W.off("orientationchange.fb resize.fb");
966        $D.off("focusin.fb keydown.fb .fb-idle");
967  
968        this.$refs.container.off(".fb-close .fb-prev .fb-next");
969  
970        if (self.idleInterval) {
971          window.clearInterval(self.idleInterval);
972  
973          self.idleInterval = null;
974        }
975      },
976  
977      // Change to previous gallery item
978      // ===============================
979  
980      previous: function(duration) {
981        return this.jumpTo(this.currPos - 1, duration);
982      },
983  
984      // Change to next gallery item
985      // ===========================
986  
987      next: function(duration) {
988        return this.jumpTo(this.currPos + 1, duration);
989      },
990  
991      // Switch to selected gallery item
992      // ===============================
993  
994      jumpTo: function(pos, duration) {
995        var self = this,
996          groupLen = self.group.length,
997          firstRun,
998          loop,
999          current,
1000          previous,
1001          canvasWidth,
1002          currentPos,
1003          transitionProps;
1004  
1005        if (self.isDragging || self.isClosing || (self.isAnimating && self.firstRun)) {
1006          return;
1007        }
1008  
1009        pos = parseInt(pos, 10);
1010  
1011        // Should loop?
1012        loop = self.current ? self.current.opts.loop : self.opts.loop;
1013  
1014        if (!loop && (pos < 0 || pos >= groupLen)) {
1015          return false;

1153  
1154        if (!duration || (!current.isMoved && !current.opts.transitionEffect)) {
1155          return;
1156        }
1157  
1158        if (current.isMoved) {
1159          previous.$slide.addClass(transitionProps);
1160        } else {
1161          transitionProps = "fancybox-animated " + transitionProps + " fancybox-fx-" + current.opts.transitionEffect;
1162  
1163          $.fancybox.animate(previous.$slide, transitionProps, duration, function() {
1164            previous.$slide.removeClass(transitionProps).removeAttr("style");
1165          });
1166        }
1167      },
1168  
1169      // Create new "slide" element
1170      // These are gallery items  that are actually added to DOM
1171      // =======================================================
1172  
1173      createSlide: function(pos) {
1174        var self = this,
1175          $slide,
1176          index;
1177  
1178        index = pos % self.group.length;
1179        index = index < 0 ? self.group.length + index : index;
1180  
1181        if (!self.slides[pos] && self.group[index]) {
1182          $slide = $('<div class="fancybox-slide"></div>').appendTo(self.$refs.stage);
1183  
1184          self.slides[pos] = $.extend(true, {}, self.group[index], {
1185            pos: pos,
1186            $slide: $slide,
1187            isLoaded: false
1188          });
1189  
1190          self.updateSlide(self.slides[pos]);
1191        }
1192  
1193        return self.slides[pos];
1194      },
1195  
1196      // Scale image to the actual size of the image;
1197      // x and y values should be relative to the slide
1198      // ==============================================
1199  
1200      scaleToActual: function(x, y, duration) {
1201        var self = this,
1202          current = self.current,
1203          $content = current.$content,
1204          canvasWidth = $.fancybox.getTranslate(current.$slide).width,
1205          canvasHeight = $.fancybox.getTranslate(current.$slide).height,
1206          newImgWidth = current.width,
1207          newImgHeight = current.height,
1208          imgPos,
1209          posX,
1210          posY,
1211          scaleX,
1212          scaleY;
1213  
1214        if (self.isAnimating || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
1215          return;
1216        }
1217  
1218        $.fancybox.stop($content);
1219  
1220        self.isAnimating = true;
1221  
1222        x = x === undefined ? canvasWidth * 0.5 : x;
1223        y = y === undefined ? canvasHeight * 0.5 : y;
1224  
1225        imgPos = $.fancybox.getTranslate($content);
1226  
1227        imgPos.top -= $.fancybox.getTranslate(current.$slide).top;
1228        imgPos.left -= $.fancybox.getTranslate(current.$slide).left;
1229  
1230        scaleX = newImgWidth / imgPos.width;
1231        scaleY = newImgHeight / imgPos.height;
1232  
1233        // Get center position for original image
1234        posX = canvasWidth * 0.5 - newImgWidth * 0.5;
1235        posY = canvasHeight * 0.5 - newImgHeight * 0.5;
1236  
1237        // Make sure image does not move away from edges
1238        if (newImgWidth > canvasWidth) {
1239          posX = imgPos.left * scaleX - (x * scaleX - x);
1240  
1241          if (posX > 0) {
1242            posX = 0;
1243          }
1244  
1245          if (posX < canvasWidth - newImgWidth) {
1246            posX = canvasWidth - newImgWidth;
1247          }
1248        }
1249  
1250        if (newImgHeight > canvasHeight) {
1251          posY = imgPos.top * scaleY - (y * scaleY - y);
1252  
1253          if (posY > 0) {
1254            posY = 0;
1255          }
1256  
1257          if (posY < canvasHeight - newImgHeight) {
1258            posY = canvasHeight - newImgHeight;
1259          }
1260        }
1261  
1262        self.updateCursor(newImgWidth, newImgHeight);
1263  
1264        $.fancybox.animate(
1265          $content,
1266          {
1267            top: posY,
1268            left: posX,
1269            scaleX: scaleX,
1270            scaleY: scaleY
1271          },
1272          duration || 330,
1273          function() {
1274            self.isAnimating = false;
1275          }
1276        );
1277  
1278        // Stop slideshow
1279        if (self.SlideShow && self.SlideShow.isActive) {
1280          self.SlideShow.stop();
1281        }
1282      },
1283  
1284      // Scale image to fit inside parent element
1285      // ========================================
1286  
1287      scaleToFit: function(duration) {
1288        var self = this,
1289          current = self.current,
1290          $content = current.$content,
1291          end;
1292  
1293        if (self.isAnimating || !$content || !(current.type == "image" && current.isLoaded && !current.hasError)) {
1294          return;
1295        }
1296  
1297        $.fancybox.stop($content);
1298  
1299        self.isAnimating = true;
1300  
1301        end = self.getFitPos(current);
1302  
1303        self.updateCursor(end.width, end.height);
1304  
1305        $.fancybox.animate(
1306          $content,
1307          {
1308            top: end.top,
1309            left: end.left,
1310            scaleX: end.width / $content.width(),
1311            scaleY: end.height / $content.height()
1312          },
1313          duration || 330,
1314          function() {
1315            self.isAnimating = false;

1671        // If we have "srcset", then we need to find first matching "src" value.
1672        // This is necessary, because when you set an src attribute, the browser will preload the image
1673        // before any javascript or even CSS is applied.
1674        if (srcset) {
1675          pxRatio = window.devicePixelRatio || 1;
1676          windowWidth = window.innerWidth * pxRatio;
1677  
1678          temp = srcset.split(",").map(function(el) {
1679            var ret = {};
1680  
1681            el
1682              .trim()
1683              .split(/\s+/)
1684              .forEach(function(el, i) {
1685                var value = parseInt(el.substring(0, el.length - 1), 10);
1686  
1687                if (i === 0) {
1688                  return (ret.url = el);
1689                }
1690  
1691                if (value) {
1692                  ret.value = value;
1693                  ret.postfix = el[el.length - 1];
1694                }
1695              });
1696  
1697            return ret;
1698          });
1699  
1700          // Sort by value
1701          temp.sort(function(a, b) {
1702            return a.value - b.value;
1703          });
1704  
1705          // Ok, now we have an array of all srcset values
1706          for (var j = 0; j < temp.length; j++) {
1707            var el = temp[j];
1708  
1709            if ((el.postfix === "w" && el.value >= windowWidth) || (el.postfix === "x" && el.value >= pxRatio)) {
1710              found = el;
1711              break;
1712            }
1713          }
1714  
1715          // If not found, take the last one
1716          if (!found && temp.length) {
1717            found = temp[temp.length - 1];
1718          }
1719  
1720          if (found) {
1721            slide.src = found.url;
1722  
1723            // If we have default width/height values, we can calculate height for matching source
1724            if (slide.width && slide.height && found.postfix == "w") {
1725              slide.height = slide.width / slide.height * found.value;
1726              slide.width = found.value;
1727            }
1728  
1729            slide.opts.srcset = srcset;
1730          }
1731        }
1732  
1733        // This will be wrapper containing both ghost and actual image
1734        slide.$content = $('<div class="fancybox-content"></div>')
1735          .addClass("fancybox-is-hidden")
1736          .appendTo(slide.$slide.addClass("fancybox-slide--image"));
1737  
1738        // If we have a thumbnail, we can display it while actual image is loading
1739        // Users will not stare at black screen and actual image will appear gradually
1740        thumbSrc = slide.opts.thumb || (slide.opts.$thumb && slide.opts.$thumb.length ? slide.opts.$thumb.attr("src") : false);
1741  
1742        if (slide.opts.preload !== false && slide.opts.width && slide.opts.height && thumbSrc) {
1743          slide.width = slide.opts.width;
1744          slide.height = slide.opts.height;
1745  
1746          slide.$ghost = $("<img />")
1747            .one("error", function() {
1748              $(this).remove();
1749  
1750              slide.$ghost = null;
1751            })
1752            .one("load", function() {
1753              self.afterLoad(slide);
1754            })
1755            .addClass("fancybox-image")
1756            .appendTo(slide.$content)
1757            .attr("src", thumbSrc);
1758        }
1759  
1760        // Start loading actual image
1761        self.setBigImage(slide);
1762      },
1763  
1764      // Create full-size image
1765      // ======================
1766  
1767      setBigImage: function(slide) {
1768        var self = this,
1769          $img = $("<img />");
1770  
1771        slide.$image = $img
1772          .one("error", function() {
1773            self.setError(slide);
1774          })
1775          .one("load", function() {
1776            var sizes;
1777  
1778            if (!slide.$ghost) {
1779              self.resolveImageSlideSize(slide, this.naturalWidth, this.naturalHeight);
1780  
1781              self.afterLoad(slide);
1782            }
1783  
1784            // Clear timeout that checks if loading icon needs to be displayed
1785            if (slide.timouts) {
1786              clearTimeout(slide.timouts);
1787              slide.timouts = null;
1788            }
1789  
1790            if (self.isClosing) {
1791              return;
1792            }
1793  
1794            if (slide.opts.srcset) {
1795              sizes = slide.opts.sizes;
1796  
1797              if (!sizes || sizes === "auto") {
1798                sizes =
1799                  (slide.width / slide.height > 1 && $W.width() / $W.height() > 1 ? "100" : Math.round(slide.width / slide.height * 100)) +
1800                  "vw";
1801              }
1802  
1803              $img.attr("sizes", sizes).attr("srcset", slide.opts.srcset);
1804            }
1805  
1806            // Hide temporary image after some delay
1807            if (slide.$ghost) {
1808              setTimeout(function() {
1809                if (slide.$ghost && !self.isClosing) {
1810                  slide.$ghost.hide();
1811                }
1812              }, Math.min(300, Math.max(1000, slide.height / 1600)));
1813            }
1814  
1815            self.hideLoading(slide);
1816          })
1817          .addClass("fancybox-image")
1818          .attr("src", slide.src)
1819          .appendTo(slide.$content);
1820  
1821        if (($img[0].complete || $img[0].readyState == "complete") && $img[0].naturalWidth && $img[0].naturalHeight) {
1822          $img.trigger("load");
1823        } else if ($img[0].error) {
1824          $img.trigger("error");
1825        }
1826      },
1827  
1828      // Computes the slide size from image size and maxWidth/maxHeight
1829      // ==============================================================
1830  
1831      resolveImageSlideSize: function(slide, imgWidth, imgHeight) {
1832        var maxWidth = parseInt(slide.opts.width, 10),
1833          maxHeight = parseInt(slide.opts.height, 10);
1834  
1835        // Sets the default values from the image
1836        slide.width = imgWidth;
1837        slide.height = imgHeight;
1838  
1839        if (maxWidth > 0) {
1840          slide.width = maxWidth;
1841          slide.height = Math.floor(maxWidth * imgHeight / imgWidth);
1842        }
1843  
1844        if (maxHeight > 0) {
1845          slide.width = Math.floor(maxHeight * imgWidth / imgHeight);
1846          slide.height = maxHeight;
1847        }
1848      },
1849  
1850      // Create iframe wrapper, iframe and bindings
1851      // ==========================================
1852  
1853      setIframe: function(slide) {
1854        var self = this,
1855          opts = slide.opts.iframe,
1856          $slide = slide.$slide,
1857          $iframe;
1858  
1859        slide.$content = $('<div class="fancybox-content' + (opts.preload ? " fancybox-is-hidden" : "") + '"></div>')
1860          .css(opts.css)
1861          .appendTo($slide);
1862  
1863        $slide.addClass("fancybox-slide--" + slide.contentType);
1864  
1865        slide.$iframe = $iframe = $(opts.tpl.replace(/\{rnd\}/g, new Date().getTime()))
1866          .attr(opts.attr)
1867          .appendTo(slide.$content);
1868  
1869        if (opts.preload) {
1870          self.showLoading(slide);
1871  
1872          // Unfortunately, it is not always possible to determine if iframe is successfully loaded
1873          // (due to browser security policy)
1874  
1875          $iframe.on("load.fb error.fb", function(e) {
1876            this.isReady = 1;
1877  
1878            slide.$slide.trigger("refresh");
1879  
1880            self.afterLoad(slide);
1881          });
1882  
1883          // Recalculate iframe content size
1884          // ===============================
1885  
1886          $slide.on("refresh.fb", function() {
1887            var $content = slide.$content,
1888              frameWidth = opts.css.width,
1889              frameHeight = opts.css.height,
1890              $contents,
1891              $body;
1892  
1893            if ($iframe[0].isReady !== 1) {
1894              return;
1895            }
1896  
1897            try {
1898              $contents = $iframe.contents();
1899              $body = $contents.find("body");
1900            } catch (ignore) {}
1901  
1902            // Calculate contnet dimensions if it is accessible
1903            if ($body && $body.length && $body.children().length) {
1904              $content.css({
1905                width: "",
1906                height: ""
1907              });
1908  
1909              if (frameWidth === undefined) {
1910                frameWidth = Math.ceil(Math.max($body[0].clientWidth, $body.outerWidth(true)));
1911              }
1912  
1913              if (frameWidth) {
1914                $content.width(frameWidth);
1915              }
1916  
1917              if (frameHeight === undefined) {
1918                frameHeight = Math.ceil(Math.max($body[0].clientHeight, $body.outerHeight(true)));
1919              }
1920  
1921              if (frameHeight) {
1922                $content.height(frameHeight);
1923              }
1924            }
1925  
1926            $content.removeClass("fancybox-is-hidden");
1927          });
1928        } else {
1929          this.afterLoad(slide);
1930        }
1931  
1932        $iframe.attr("src", slide.src);
1933  
1934        // Remove iframe if closing or changing gallery item
1935        $slide.one("onReset", function() {
1936          // This helps IE not to throw errors when closing
1937          try {
1938            $(this)
1939              .find("iframe")
1940              .hide()
1941              .unbind()
1942              .attr("src", "//about:blank");
1943          } catch (ignore) {}
1944  
1945          $(this)
1946            .off("refresh.fb")
1947            .empty();
1948  
1949          slide.isLoaded = false;
1950        });
1951      },
1952  
1953      // Wrap and append content to the slide
1954      // ======================================
1955  
1956      setContent: function(slide, content) {
1957        var self = this;
1958  
1959        if (self.isClosing) {
1960          return;
1961        }
1962  
1963        self.hideLoading(slide);
1964  
1965        if (slide.$content) {
1966          $.fancybox.stop(slide.$content);
1967        }
1968  
1969        slide.$slide.empty();
1970  
1971        // If content is a jQuery object, then it will be moved to the slide.
1972        // The placeholder is created so we will know where to put it back.
1973        if (isQuery(content) && content.parent().length) {
1974          // Make sure content is not already moved to fancyBox
1975          content
1976            .parent()
1977            .parent(".fancybox-slide--inline")
1978            .trigger("onReset");
1979  
1980          // Create temporary element marking original place of the content
1981          slide.$placeholder = $("<div>")
1982            .hide()
1983            .insertAfter(content);
1984  
1985          // Make sure content is visible
1986          content.css("display", "inline-block");
1987        } else if (!slide.hasError) {
1988          // If content is just a plain text, try to convert it to html
1989          if ($.type(content) === "string") {
1990            content = $("<div>")
1991              .append($.trim(content))
1992              .contents();
1993  
1994            // If we have text node, then add wrapping element to make vertical alignment work
1995            if (content[0].nodeType === 3) {
1996              content = $("<div>").html(content);
1997            }
1998          }
1999  
2000          // If "filter" option is provided, then filter content
2001          if (slide.opts.filter) {
2002            content = $("<div>")
2003              .html(content)
2004              .find(slide.opts.filter);
2005          }
2006        }
2007  
2008        slide.$slide.one("onReset", function() {
2009          // Pause all html5 video/audio
2010          $(this)
2011            .find("video,audio")
2012            .trigger("pause");
2013  
2014          // Put content back
2015          if (slide.$placeholder) {
2016            slide.$placeholder.after(content.hide()).remove();
2017  
2018            slide.$placeholder = null;
2019          }
2020  
2021          // Remove custom close button
2022          if (slide.$smallBtn) {
2023            slide.$smallBtn.remove();
2024  
2025            slide.$smallBtn = null;
2026          }
2027  
2028          // Remove content and mark slide as not loaded
2029          if (!slide.hasError) {
2030            $(this).empty();
2031  
2032            slide.isLoaded = false;
2033          }
2034        });
2035  
2036        $(content).appendTo(slide.$slide);
2037  
2038        if ($(content).is("video,audio")) {
2039          $(content).addClass("fancybox-video");
2040  
2041          $(content).wrap("<div></div>");
2042  
2043          slide.contentType = "video";
2044  
2045          slide.opts.width = slide.opts.width || $(content).attr("width");
2046          slide.opts.height = slide.opts.height || $(content).attr("height");
2047        }
2048  
2049        slide.$content = slide.$slide
2050          .children()
2051          .filter("div,form,main,video,audio")
2052          .first()
2053          .addClass("fancybox-content");
2054  
2055        slide.$slide.addClass("fancybox-slide--" + slide.contentType);
2056  
2057        this.afterLoad(slide);
2058      },
2059  
2060      // Display error message
2061      // =====================
2062  
2063      setError: function(slide) {
2064        slide.hasError = true;
2065  
2066        slide.$slide
2067          .trigger("onReset")
2068          .removeClass("fancybox-slide--" + slide.contentType)
2069          .addClass("fancybox-slide--error");
2070  
2071        slide.contentType = "html";
2072  
2073        this.setContent(slide, this.translate(slide, slide.opts.errorTpl));
2074  
2075        if (slide.pos === this.currPos) {
2076          this.isAnimating = false;
2077        }
2078      },
2079  
2080      // Show loading icon inside the slide
2081      // ==================================
2082  
2083      showLoading: function(slide) {
2084        var self = this;
2085  
2086        slide = slide || self.current;
2087  
2088        if (slide && !slide.$spinner) {
2089          slide.$spinner = $(self.translate(self, self.opts.spinnerTpl)).appendTo(slide.$slide);
2090        }
2091      },
2092  
2093      // Remove loading icon from the slide
2094      // ==================================
2095  
2096      hideLoading: function(slide) {
2097        var self = this;
2098  
2099        slide = slide || self.current;
2100  
2101        if (slide && slide.$spinner) {
2102          slide.$spinner.remove();
2103  
2104          delete slide.$spinner;
2105        }
2106      },
2107  
2108      // Adjustments after slide content has been loaded
2109      // ===============================================
2110  
2111      afterLoad: function(slide) {
2112        var self = this;
2113  
2114        if (self.isClosing) {
2115          return;
2116        }
2117  
2118        slide.isLoading = false;
2119        slide.isLoaded = true;
2120  
2121        self.trigger("afterLoad", slide);
2122  
2123        self.hideLoading(slide);
2124  
2125        if (slide.pos === self.currPos) {
2126          self.updateCursor();
2127        }
2128  
2129        if (slide.opts.smallBtn && (!slide.$smallBtn || !slide.$smallBtn.length)) {
2130          slide.$smallBtn = $(self.translate(slide, slide.opts.btnTpl.smallBtn)).prependTo(slide.$content);
2131        }
2132  
2133        if (slide.opts.protect && slide.$content && !slide.hasError) {
2134          // Disable right click
2135          slide.$content.on("contextmenu.fb", function(e) {
2136            if (e.button == 2) {
2137              e.preventDefault();
2138            }
2139  
2140            return true;
2141          });
2142  
2143          // Add fake element on top of the image
2144          // This makes a bit harder for user to select image
2145          if (slide.type === "image") {
2146            $('<div class="fancybox-spaceball"></div>').appendTo(slide.$content);
2147          }
2148        }
2149  
2150        self.revealContent(slide);
2151      },
2152  
2153      // Make content visible
2154      // This method is called right after content has been loaded or
2155      // user navigates gallery and transition should start
2156      // ============================================================
2157  
2158      revealContent: function(slide) {
2159        var self = this,
2160          $slide = slide.$slide,
2161          end = false,
2162          start = false,
2163          effect,
2164          effectClassName,
2165          duration,
2166          opacity;
2167  
2168        effect = slide.opts[self.firstRun ? "animationEffect" : "transitionEffect"];
2169        duration = slide.opts[self.firstRun ? "animationDuration" : "transitionDuration"];
2170  
2171        duration = parseInt(slide.forcedDuration === undefined ? duration : slide.forcedDuration, 10);
2172  
2173        // Do not animate if revealing the same slide
2174        if (slide.pos === self.currPos) {
2175          if (slide.isComplete) {
2176            effect = false;
2177          } else {
2178            self.isAnimating = true;
2179          }
2180        }
2181  
2182        if (slide.isMoved || slide.pos !== self.currPos || !duration) {
2183          effect = false;
2184        }
2185  
2186        // Check if can zoom
2187        if (effect === "zoom") {
2188          if (slide.pos === self.currPos && duration && slide.type === "image" && !slide.hasError && (start = self.getThumbPos(slide))) {
2189            end = self.getFitPos(slide);
2190          } else {
2191            effect = "fade";
2192          }
2193        }
2194  
2195        // Zoom animation
2196        // ==============
2197        if (effect === "zoom") {
2198          end.scaleX = end.width / start.width;
2199          end.scaleY = end.height / start.height;
2200  
2201          // Check if we need to animate opacity
2202          opacity = slide.opts.zoomOpacity;
2203  
2204          if (opacity == "auto") {
2205            opacity = Math.abs(slide.width / slide.height - start.width / start.height) > 0.1;
2206          }
2207  
2208          if (opacity) {
2209            start.opacity = 0.1;
2210            end.opacity = 1;
2211          }
2212  
2213          // Draw image at start position
2214          $.fancybox.setTranslate(slide.$content.removeClass("fancybox-is-hidden"), start);
2215  
2216          forceRedraw(slide.$content);
2217  
2218          // Start animation
2219          $.fancybox.animate(slide.$content, end, duration, function() {
2220            self.isAnimating = false;

2535        self.updateCursor();
2536  
2537        // Check if possible to zoom-out
2538        if (
2539          effect === "zoom" &&
2540          !(e !== true && $content && duration && current.type === "image" && !current.hasError && (end = self.getThumbPos(current)))
2541        ) {
2542          effect = "fade";
2543        }
2544  
2545        if (effect === "zoom") {
2546          $.fancybox.stop($content);
2547  
2548          domRect = $.fancybox.getTranslate($content);
2549  
2550          start = {
2551            top: domRect.top,
2552            left: domRect.left,
2553            scaleX: domRect.width / end.width,
2554            scaleY: domRect.height / end.height,
2555            width: end.width,
2556            height: end.height
2557          };
2558  
2559          // Check if we need to animate opacity
2560          opacity = current.opts.zoomOpacity;
2561  
2562          if (opacity == "auto") {
2563            opacity = Math.abs(current.width / current.height - end.width / end.height) > 0.1;
2564          }
2565  
2566          if (opacity) {
2567            end.opacity = 0;
2568          }
2569  
2570          $.fancybox.setTranslate($content, start);
2571  
2572          forceRedraw($content);
2573  
2574          $.fancybox.animate($content, end, duration, done);
2575  
2576          return true;
2577        }
2578  
2579        if (effect && duration) {
2580          // If skip animation
2581          if (e === true) {
2582            setTimeout(done, duration);
2583          } else {
2584            $.fancybox.animate(
2585              current.$slide.removeClass("fancybox-slide--current"),
2586              "fancybox-animated fancybox-slide--previous fancybox-fx-" + effect,
2587              duration,
2588              done
2589            );
2590          }
2591        } else {
2592          done();
2593        }
2594  
2595        return true;
2596      },
2597  
2598      // Final adjustments after removing the instance
2599      // =============================================
2600  
2601      cleanUp: function(e) {
2602        var self = this,
2603          $body = $("body"),
2604          instance,
2605          scrollTop;
2606  
2607        self.current.$slide.trigger("onReset");
2608  
2609        self.$refs.container.empty().remove();
2610  
2611        self.trigger("afterClose", e);
2612  
2613        // Place back focus
2614        if (self.$lastFocus && !!self.current.opts.backFocus) {
2615          self.$lastFocus.trigger("focus");
2616        }
2617  
2618        self.current = null;
2619  
2620        // Check if there are other instances
2621        instance = $.fancybox.getInstance();
2622  
2623        if (instance) {
2624          instance.activate();
2625        } else {
2626          $body.removeClass("fancybox-active compensate-for-scrollbar");
2627  
2628          $("#fancybox-style-noscroll").remove();
2629        }
2630      },
2631  
2632      // Call callback and trigger an event
2633      // ==================================
2634  
2635      trigger: function(name, slide) {
2636        var args = Array.prototype.slice.call(arguments, 1),
2637          self = this,
2638          obj = slide && slide.opts ? slide : self.current,
2639          rez;
2640  
2641        if (obj) {
2642          args.unshift(obj);
2643        } else {
2644          obj = self;
2645        }
2646  
2647        args.unshift(self);
2648  
2649        if ($.isFunction(obj.opts[name])) {
2650          rez = obj.opts[name].apply(obj, args);
2651        }
2652  
2653        if (rez === false) {
2654          return rez;
2655        }
2656  
2657        if (name === "afterClose" || !self.$refs) {
2658          $D.trigger(name + ".fb", args);
2659        } else {
2660          self.$refs.container.trigger(name + ".fb", args);
2661        }
2662      },
2663  
2664      // Update infobar values, navigation button states and reveal caption
2665      // ==================================================================
2666  
2667      updateControls: function(force) {
2668        var self = this,
2669          current = self.current,
2670          index = current.index,
2671          caption = current.opts.caption,
2672          $container = self.$refs.container,
2673          $caption = self.$refs.caption;
2674  
2675        // Recalculate content dimensions
2676        current.$slide.trigger("refresh");
2677  
2678        self.$caption = caption && caption.length ? $caption.html(caption) : null;
2679  
2680        if (!self.isHiddenControls && !self.isIdle) {
2681          self.showControls();
2682        }
2683  
2684        // Update info and navigation elements
2685        $container.find("[data-fancybox-count]").html(self.group.length);
2686        $container.find("[data-fancybox-index]").html(index + 1);
2687  
2688        $container.find("[data-fancybox-prev]").toggleClass("disabled", !current.opts.loop && index <= 0);
2689        $container.find("[data-fancybox-next]").toggleClass("disabled", !current.opts.loop && index >= self.group.length - 1);
2690  
2691        if (current.type === "image") {
2692          // Re-enable buttons; update download button source
2693          $container
2694            .find("[data-fancybox-zoom]")
2695            .show()
2696            .end()
2697            .find("[data-fancybox-download]")
2698            .attr("href", current.opts.image.src || current.src)
2699            .show();
2700        } else if (current.opts.toolbar) {
2701          $container.find("[data-fancybox-download],[data-fancybox-zoom]").hide();
2702        }
2703      },
2704  
2705      // Hide toolbar and caption
2706      // ========================
2707  
2708      hideControls: function() {
2709        this.isHiddenControls = true;
2710  
2711        this.$refs.container.removeClass("fancybox-show-infobar fancybox-show-toolbar fancybox-show-caption fancybox-show-nav");
2712      },
2713  
2714      showControls: function() {
2715        var self = this,
2716          opts = self.current ? self.current.opts : self.opts,
2717          $container = self.$refs.container;
2718  
2719        self.isHiddenControls = false;
2720        self.idleSecondsCounter = 0;
2721  
2722        $container
2723          .toggleClass("fancybox-show-toolbar", !!(opts.toolbar && opts.buttons))
2724          .toggleClass("fancybox-show-infobar", !!(opts.infobar && self.group.length > 1))
2725          .toggleClass("fancybox-show-nav", !!(opts.arrows && self.group.length > 1))
2726          .toggleClass("fancybox-is-modal", !!opts.modal);
2727  
2728        if (self.$caption) {
2729          $container.addClass("fancybox-show-caption ");
2730        } else {
2731          $container.removeClass("fancybox-show-caption");
2732        }
2733      },
2734  
2735      // Toggle toolbar and caption
2736      // ==========================
2737  
2738      toggleControls: function() {
2739        if (this.isHiddenControls) {
2740          this.showControls();
2741        } else {
2742          this.hideControls();
2743        }
2744      }
2745    });
2746  
2747    $.fancybox = {
2748      version: "3.3.5",
2749      defaults: defaults,
2750  
2751      // Get current instance and execute a command.
2752      //
2753      // Examples of usage:
2754      //
2755      //   $instance = $.fancybox.getInstance();
2756      //   $.fancybox.getInstance().jumpTo( 1 );
2757      //   $.fancybox.getInstance( 'jumpTo', 1 );
2758      //   $.fancybox.getInstance( function() {
2759      //       console.info( this.currIndex );
2760      //   });
2761      // ======================================================
2762  
2763      getInstance: function(command) {
2764        var instance = $('.fancybox-container:not(".fancybox-is-closing"):last').data("FancyBox"),
2765          args = Array.prototype.slice.call(arguments, 1);
2766  
2767        if (instance instanceof FancyBox) {
2768          if ($.type(command) === "string") {
2769            instance[command].apply(instance, args);
2770          } else if ($.type(command) === "function") {
2771            command.apply(instance, args);
2772          }
2773  
2774          return instance;
2775        }
2776  
2777        return false;
2778      },
2779  
2780      // Create new instance
2781      // ===================
2782  
2783      open: function(items, opts, index) {
2784        return new FancyBox(items, opts, index);
2785      },
2786  
2787      // Close current or all instances
2788      // ==============================
2789  
2790      close: function(all) {
2791        var instance = this.getInstance();
2792  
2793        if (instance) {
2794          instance.close();
2795  
2796          // Try to find and close next instance
2797  
2798          if (all === true) {
2799            this.close();
2800          }
2801        }
2802      },
2803  
2804      // Close all instances and unbind all events
2805      // =========================================
2806  
2807      destroy: function() {
2808        this.close(true);
2809  
2810        $D.add("body").off("click.fb-start", "**");
2811      },
2812  
2813      // Try to detect mobile devices
2814      // ============================
2815  
2816      isMobile:
2817        document.createTouch !== undefined && /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
2818  
2819      // Detect if 'translate3d' support is available
2820      // ============================================
2821  
2822      use3d: (function() {
2823        var div = document.createElement("div");
2824  
2825        return (
2826          window.getComputedStyle &&
2827          window.getComputedStyle(div) &&
2828          window.getComputedStyle(div).getPropertyValue("transform") &&
2829          !(document.documentMode && document.documentMode < 11)
2830        );
2831      })(),
2832  
2833      // Helper function to get current visual state of an element
2834      // returns array[ top, left, horizontal-scale, vertical-scale, opacity ]
2835      // =====================================================================
2836  
2837      getTranslate: function($el) {
2838        var domRect;
2839  
2840        if (!$el || !$el.length) {
2841          return false;
2842        }
2843  
2844        domRect = $el[0].getBoundingClientRect();
2845  
2846        return {
2847          top: domRect.top || 0,
2848          left: domRect.left || 0,
2849          width: domRect.width,
2850          height: domRect.height,
2851          opacity: parseFloat($el.css("opacity"))
2852        };
2853      },
2854  
2855      // Shortcut for setting "translate3d" properties for element
2856      // Can set be used to set opacity, too
2857      // ========================================================
2858  
2859      setTranslate: function($el, props) {
2860        var str = "",
2861          css = {};
2862  
2863        if (!$el || !props) {
2864          return;
2865        }
2866  
2867        if (props.left !== undefined || props.top !== undefined) {
2868          str =
2869            (props.left === undefined ? $el.position().left : props.left) +
2870            "px, " +
2871            (props.top === undefined ? $el.position().top : props.top) +
2872            "px";
2873  
2874          if (this.use3d) {
2875            str = "translate3d(" + str + ", 0px)";
2876          } else {
2877            str = "translate(" + str + ")";
2878          }
2879        }
2880  
2881        if (props.scaleX !== undefined && props.scaleY !== undefined) {
2882          str = (str.length ? str + " " : "") + "scale(" + props.scaleX + ", " + props.scaleY + ")";
2883        }
2884  
2885        if (str.length) {
2886          css.transform = str;
2887        }
2888  
2889        if (props.opacity !== undefined) {
2890          css.opacity = props.opacity;
2891        }
2892  
2893        if (props.width !== undefined) {
2894          css.width = props.width;
2895        }
2896  
2897        if (props.height !== undefined) {
2898          css.height = props.height;
2899        }
2900  
2901        return $el.css(css);
2902      },
2903  
2904      // Simple CSS transition handler
2905      // =============================
2906  
2907      animate: function($el, to, duration, callback, leaveAnimationName) {
2908        var final = false;