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