From 42d6aabb1fabde66c97711cf0a15409751da5a0e Mon Sep 17 00:00:00 2001 From: Janis Skarnelis Date: Sat, 29 Sep 2018 15:53:35 +0300 Subject: [PATCH] Updated to v3.5.0 - New option `preventCaptionOverlap` enabled by default for desktop only; - HTML5 video now uses thumbnail image as poster; - Caption is now centered and without top border; caption does not hide when idling and `preventCaptionOverlap` is enabled; - It is now easier to set content height in % (especially for iframes), there is not need to adjust bottom margin and max-height as it is done automatically using JS - Fixed thumnbail visisbility detection (now works better with sliders); - Fixed share modal not closing on clicking outside content area; - Fixed iframe support for iOS --- dist/jquery.fancybox.css | 67 ++- dist/jquery.fancybox.js | 782 +++++++++++++++++++++-------------- dist/jquery.fancybox.min.css | 2 +- dist/jquery.fancybox.min.js | 8 +- docs/index.html | 155 +++---- package.json | 2 +- src/css/core.css | 74 ++-- src/css/thumbs.css | 2 +- src/js/core.js | 676 ++++++++++++++++++------------ src/js/guestures.js | 73 ++-- src/js/thumbs.js | 29 +- 11 files changed, 1109 insertions(+), 761 deletions(-) diff --git a/dist/jquery.fancybox.css b/dist/jquery.fancybox.css index c5f28e13..6c7d768f 100644 --- a/dist/jquery.fancybox.css +++ b/dist/jquery.fancybox.css @@ -13,7 +13,6 @@ body.compensate-for-scrollbar { .fancybox-container { -webkit-backface-visibility: hidden; - backface-visibility: hidden; height: 100%; left: 0; outline: none; @@ -52,7 +51,7 @@ body.compensate-for-scrollbar { transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } .fancybox-is-open .fancybox-bg { - opacity: .87; + opacity: .9; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .fancybox-infobar, @@ -115,7 +114,7 @@ body.compensate-for-scrollbar { outline: none; overflow: auto; -webkit-overflow-scrolling: touch; - padding: 44px 44px 0 44px; + padding: 44px; position: absolute; text-align: center; top: 0; @@ -140,23 +139,20 @@ body.compensate-for-scrollbar { .fancybox-slide--next { display: block; } -.fancybox-slide--next { - z-index: 99995; } - .fancybox-slide--image { overflow: hidden; - padding: 44px 0 0 0; } + padding: 44px 0; } .fancybox-slide--image::before { display: none; } .fancybox-slide--html { - padding: 6px 6px 0 6px; } + padding: 6px; } .fancybox-content { background: #fff; display: inline-block; - margin: 0 0 44px 0; + margin: 0; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; @@ -190,9 +186,6 @@ body.compensate-for-scrollbar { user-select: none; z-index: 99995; } -.fancybox-slide--html .fancybox-content { - margin: 0 0 6px 0; } - .fancybox-can-zoomOut .fancybox-content { cursor: -webkit-zoom-out; cursor: zoom-out; } @@ -237,7 +230,7 @@ body.compensate-for-scrollbar { .fancybox-slide--video .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--iframe .fancybox-content { - height: calc(100% - 44px); + height: 100%; overflow: visible; padding: 0; width: 100%; } @@ -260,9 +253,14 @@ body.compensate-for-scrollbar { margin: 0; overflow: hidden; padding: 0; - vertical-align: top; width: 100%; } +/* Fix iOS */ +.fancybox-iframe { + left: 0; + position: absolute; + top: 0; } + .fancybox-error { background: #fff; cursor: default; @@ -308,14 +306,16 @@ body.compensate-for-scrollbar { .fancybox-button.fancybox-focus { outline: 1px dotted; } -.fancybox-button.disabled, -.fancybox-button.disabled:hover, .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; outline: none; } +/* Fix IE11 */ +.fancybox-button div { + height: 100%; } + .fancybox-button svg { display: block; height: 100%; @@ -378,23 +378,23 @@ body.compensate-for-scrollbar { right: 0; top: 0; } +.fancybox-slide--image.fancybox-is-scaling .fancybox-content { + overflow: hidden; } + .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small { display: none; } /* Navigation arrows */ .fancybox-navigation .fancybox-button { - background: transparent; + background-clip: content-box; height: 100px; - margin: 0; opacity: 0; position: absolute; top: calc(50% - 50px); width: 70px; } .fancybox-navigation .fancybox-button div { - background: rgba(30, 30, 30, 0.6); - height: 100%; padding: 7px; } .fancybox-navigation .fancybox-button--arrow_left { @@ -408,16 +408,18 @@ body.compensate-for-scrollbar { /* Caption */ .fancybox-caption { bottom: 0; - color: #fff; + color: #eee; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 25px 44px 25px 44px; - right: 0; } + right: 0; + text-align: center; + z-index: 99996; } .fancybox-caption::before { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAD6CAQAAADKSeXYAAAAYklEQVQoz42RwQ3AMAgDjfcfup8WoRykfBAK5mQHKSz5rbXJPis1hjiV3CIqgG0hLZPkVkA4p4x5oR1bVeDrdCLrW2Q0D5bcwY3TGMHbdw3mPRuOtaspYP1w//G1OIcW148H0DMCqI/3mMMAAAAASUVORK5CYII=); background-repeat: repeat-x; background-size: contain; bottom: 0; @@ -427,18 +429,9 @@ body.compensate-for-scrollbar { pointer-events: none; position: absolute; right: 0; - top: -25px; + top: -44px; z-index: -1; } -.fancybox-caption::after { - border-bottom: 1px solid rgba(255, 255, 255, 0.3); - content: ''; - display: block; - left: 44px; - position: absolute; - right: 44px; - top: 0; } - .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { @@ -572,13 +565,13 @@ body.compensate-for-scrollbar { /* Styling for Small-Screen Devices */ @media all and (max-height: 576px) { + .fancybox-caption { + padding: 12px; } .fancybox-slide { padding-left: 6px; padding-right: 6px; } .fancybox-slide--image { - padding: 6px 0 0 0; } - .fancybox-slide--image .fancybox-content { - margin-bottom: 6px; } + padding: 6px 0; } .fancybox-slide--image .fancybox-close-small { background: #4e4e4e; color: #f2f4f6; @@ -766,7 +759,7 @@ body.compensate-for-scrollbar { opacity: 1; } /* Styling for Small-Screen Devices */ -@media all and (max-width: 768px) { +@media all and (max-width: 576px) { .fancybox-thumbs { width: 110px; } .fancybox-show-thumbs .fancybox-inner { diff --git a/dist/jquery.fancybox.js b/dist/jquery.fancybox.js index e456d124..d4a0ca7a 100644 --- a/dist/jquery.fancybox.js +++ b/dist/jquery.fancybox.js @@ -1,5 +1,5 @@ // ================================================== -// fancyBox v3.4.2 +// fancyBox v3.5.0 // // Licensed GPLv3 for open source use // or fancyBox Commercial License for commercial use @@ -48,6 +48,9 @@ // Enable keyboard navigation keyboard: true, + // Should allow caption to overlap the content + preventCaptionOverlap: true, + // Should display navigation arrows at the screen edges arrows: true, @@ -108,7 +111,7 @@ iframe: { // Iframe template tpl: - '', + '', // Preload iframe before displaying it // This allows to calculate iframe content width and height @@ -128,9 +131,9 @@ // For HTML5 video only video: { tpl: - '