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