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