Skip to content
This repository was archived by the owner on Feb 23, 2023. It is now read-only.

Commit 5f7dd47

Browse files
fancyappsfancyapps
committed
Updated to v3.5.2
- Fixed #2122 - Focusable HTML5 video - Fixed #2128 - Missing smallBtn on mobile - Fixed #2096 - autoStart fullscreen AND slideshow - Fixed #2097 - German translation - Fixed #2132 - Youtube fullscreen - Captions now have linear-gradient background (instead of background image for pseudo element) and can have max-height and vertical scrollbar - Improved design for phones having the notch (https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
1 parent 920b3e4 commit 5f7dd47

File tree

10 files changed

+112
-102
lines changed

10 files changed

+112
-102
lines changed

‎dist/jquery.fancybox.css

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -400,38 +400,32 @@ body.compensate-for-scrollbar {
400400

401401
.fancybox-navigation .fancybox-button--arrow_left {
402402
left: 0;
403+
left: env(safe-area-inset-left);
403404
padding: 31px 26px 31px 6px; }
404405

405406
.fancybox-navigation .fancybox-button--arrow_right {
406407
padding: 31px 6px 31px 26px;
407-
right: 0; }
408+
right: 0;
409+
right: env(safe-area-inset-right); }
408410

409411
/* Caption */
410412
.fancybox-caption {
413+
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent 100%);
411414
bottom: 0;
412415
color: #eee;
413416
font-size: 14px;
414417
font-weight: 400;
415418
left: 0;
416419
line-height: 1.5;
417-
padding: 25px 44px 25px 44px;
420+
overflow: auto;
421+
padding: 50px 44px 25px 44px;
418422
right: 0;
419423
text-align: center;
420424
z-index: 99996; }
421425

422-
.fancybox-caption::before {
423-
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAD6CAQAAADKSeXYAAAAYklEQVQoz42RwQ3AMAgDjfcfup8WoRykfBAK5mQHKSz5rbXJPis1hjiV3CIqgG0hLZPkVkA4p4x5oR1bVeDrdCLrW2Q0D5bcwY3TGMHbdw3mPRuOtaspYP1w//G1OIcW148H0DMCqI/3mMMAAAAASUVORK5CYII=);
424-
background-repeat: repeat-x;
425-
background-size: contain;
426-
bottom: 0;
427-
content: '';
428-
display: block;
429-
left: 0;
430-
pointer-events: none;
431-
position: absolute;
432-
right: 0;
433-
top: -44px;
434-
z-index: -1; }
426+
.fancybox-caption--separate {
427+
margin-top: -25px;
428+
max-height: 50vh; }
435429

436430
.fancybox-caption a,
437431
.fancybox-caption a:link,
@@ -567,7 +561,8 @@ body.compensate-for-scrollbar {
567561
/* Styling for Small-Screen Devices */
568562
@media all and (max-height: 576px) {
569563
.fancybox-caption {
570-
padding: 12px; }
564+
padding-left: 12px;
565+
padding-right: 12px; }
571566
.fancybox-slide {
572567
padding-left: 6px;
573568
padding-right: 6px; }
@@ -585,6 +580,11 @@ body.compensate-for-scrollbar {
585580
top: 0;
586581
width: 36px; } }
587582

583+
/* Using calc to trick sass */
584+
@supports (padding: 0px) {
585+
.fancybox-caption {
586+
padding: 50px calc(max(12px, env(safe-area-inset-right))) calc(max(12px, env(safe-area-inset-bottom))) calc(max(25px, env(safe-area-inset-left))); } }
587+
588588
/* Share */
589589
.fancybox-share {
590590
background: #f4f4f4;

‎dist/jquery.fancybox.js

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// ==================================================
2-
// fancyBox v3.5.2
2+
// fancyBox v3.5.3
33
//
44
// Licensed GPLv3 for open source use
55
// or fancyBox Commercial License for commercial use
@@ -111,7 +111,7 @@
111111
iframe: {
112112
// Iframe template
113113
tpl:
114-
'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen allow="autoplay; fullscreen" src=""></iframe>',
114+
'<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen" src=""></iframe>',
115115

116116
// Preload iframe before displaying it
117117
// This allows to calculate iframe content width and height
@@ -394,17 +394,17 @@
394394
ZOOM: "Zoom"
395395
},
396396
de: {
397-
CLOSE: "Schliessen",
397+
CLOSE: "Schlie&szlig;en",
398398
NEXT: "Weiter",
399-
PREV: "Zurück",
400-
ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.",
399+
PREV: "Zur&uuml;ck",
400+
ERROR: "Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es sp&auml;ter nochmal.",
401401
PLAY_START: "Diaschau starten",
402402
PLAY_STOP: "Diaschau beenden",
403403
FULL_SCREEN: "Vollbild",
404404
THUMBS: "Vorschaubilder",
405405
DOWNLOAD: "Herunterladen",
406406
SHARE: "Teilen",
407-
ZOOM: "Maßstab"
407+
ZOOM: "Vergr&ouml;&szlig;ern"
408408
}
409409
}
410410
};
@@ -645,13 +645,7 @@
645645
var arr = obj.opts.i18n[obj.opts.lang] || obj.opts.i18n.en;
646646

647647
return str.replace(/\{\{(\w+)\}\}/g, function(match, n) {
648-
var value = arr[n];
649-
650-
if (value === undefined) {
651-
return match;
652-
}
653-
654-
return value;
648+
return arr[n] === undefined ? match : arr[n];
655649
});
656650
},
657651

@@ -922,11 +916,14 @@
922916
self.$refs.stage.hide();
923917
}
924918

925-
setTimeout(function() {
926-
self.$refs.stage.show();
919+
setTimeout(
920+
function() {
921+
self.$refs.stage.show();
927922

928-
self.update(e);
929-
}, $.fancybox.isMobile ? 600 : 250);
923+
self.update(e);
924+
},
925+
$.fancybox.isMobile ? 600 : 250
926+
);
930927
}
931928
});
932929

@@ -949,7 +946,7 @@
949946
// Enable keyboard navigation
950947
// ==========================
951948

952-
if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input") || $(e.target).is("textarea")) {
949+
if (!current.opts.keyboard || e.ctrlKey || e.altKey || e.shiftKey || $(e.target).is("input,textarea,video,audio")) {
953950
return;
954951
}
955952

@@ -1325,7 +1322,7 @@
13251322
scaleX: scaleX,
13261323
scaleY: scaleY
13271324
},
1328-
duration || 330,
1325+
duration || 366,
13291326
function() {
13301327
self.isAnimating = false;
13311328
}
@@ -1366,7 +1363,7 @@
13661363
scaleX: end.width / $content.width(),
13671364
scaleY: end.height / $content.height()
13681365
},
1369-
duration || 330,
1366+
duration || 366,
13701367
function() {
13711368
self.isAnimating = false;
13721369
}
@@ -1986,11 +1983,6 @@
19861983
$slide = slide.$slide,
19871984
$iframe;
19881985

1989-
// Fix responsive iframes on iOS (along with `position:absolute;` for iframe element)
1990-
if ($.fancybox.isMobile) {
1991-
opts.css.overflow = "scroll";
1992-
}
1993-
19941986
slide.$content = $('<div class="fancybox-content' + (opts.preload ? " fancybox-is-hidden" : "") + '"></div>')
19951987
.css(opts.css)
19961988
.appendTo($slide);
@@ -2034,7 +2026,7 @@
20342026
$body = $contents.find("body");
20352027
} catch (ignore) {}
20362028

2037-
// Calculate contnet dimensions if it is accessible
2029+
// Calculate content dimensions, if it is accessible
20382030
if ($body && $body.length && $body.children().length) {
20392031
// Avoid scrolling to top (if multiple instances)
20402032
$slide.css("overflow", "visible");
@@ -2312,9 +2304,12 @@
23122304
current = slide || self.current,
23132305
caption = current.opts.caption,
23142306
$caption = self.$refs.caption,
2315-
captionH = false;
2307+
captionH = false,
2308+
preventOverlap = current.opts.preventCaptionOverlap;
2309+
2310+
$caption.toggleClass("fancybox-caption--separate", preventOverlap);
23162311

2317-
if (current.opts.preventCaptionOverlap && caption && caption.length) {
2312+
if (preventOverlap && caption && caption.length) {
23182313
if (current.pos !== self.currPos) {
23192314
$caption = $caption
23202315
.clone()
@@ -2649,6 +2644,8 @@
26492644
"iframe",
26502645
"object",
26512646
"embed",
2647+
"video",
2648+
"audio",
26522649
"[contenteditable]",
26532650
'[tabindex]:not([tabindex^="-"])'
26542651
].join(","),
@@ -3041,7 +3038,7 @@
30413038
});
30423039

30433040
$.fancybox = {
3044-
version: "3.5.2",
3041+
version: "3.5.3",
30453042
defaults: defaults,
30463043

30473044
// Get current instance and execute a command.
@@ -3445,8 +3442,8 @@
34453442
},
34463443
paramPlace: 8,
34473444
type: "iframe",
3448-
url: "//www.youtube-nocookie.com/embed/$4",
3449-
thumb: "//img.youtube.com/vi/$4/hqdefault.jpg"
3445+
url: "https://www.youtube-nocookie.com/embed/$4",
3446+
thumb: "https://img.youtube.com/vi/$4/hqdefault.jpg"
34503447
},
34513448

34523449
vimeo: {
@@ -4450,7 +4447,7 @@
44504447
newPos.width = self.contentStartPos.width;
44514448
newPos.height = self.contentStartPos.height;
44524449

4453-
$.fancybox.animate(self.$content, newPos, 330);
4450+
$.fancybox.animate(self.$content, newPos, 366);
44544451
};
44554452

44564453
Guestures.prototype.endZooming = function() {
@@ -4944,11 +4941,13 @@
49444941
if (instance) {
49454942
// If image is zooming, then force to stop and reposition properly
49464943
if (instance.current && instance.current.type === "image" && instance.isAnimating) {
4947-
instance.current.$content.css("transition", "none");
4948-
49494944
instance.isAnimating = false;
49504945

49514946
instance.update(true, true, 0);
4947+
4948+
if (!instance.isComplete) {
4949+
instance.complete();
4950+
}
49524951
}
49534952

49544953
instance.trigger("onFullscreenChange", isFullscreen);

0 commit comments

Comments
 (0)