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

Commit 48c7be6

Browse files
committed
Updated to v3.4.2
- Updated slideshow 1) now waits for yt, vimeo video to end 2) added progressbar - Revised transitions - Slightly updated visuals - Fixed IE11 issues
1 parent a829fab commit 48c7be6

13 files changed

+992
-739
lines changed

dist/jquery.fancybox.css

+43-32
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
body.compensate-for-scrollbar {
2-
overflow: hidden;
3-
-ms-overflow-style: none; }
2+
overflow: hidden; }
43

54
.fancybox-active {
65
height: auto; }
@@ -100,16 +99,16 @@ body.compensate-for-scrollbar {
10099
.fancybox-stage {
101100
direction: ltr;
102101
overflow: visible;
103-
-webkit-transform: translate3d(0, 0, 0);
104-
transform: translate3d(0, 0, 0);
102+
-webkit-transform: translateZ(0);
103+
transform: translateZ(0);
105104
z-index: 99994; }
106105

107106
.fancybox-is-open .fancybox-stage {
108107
overflow: hidden; }
109108

110109
.fancybox-slide {
111110
-webkit-backface-visibility: hidden;
112-
backface-visibility: hidden;
111+
/* Using without prefix would break IE11 */
113112
display: none;
114113
height: 100%;
115114
left: 0;
@@ -145,11 +144,9 @@ body.compensate-for-scrollbar {
145144
z-index: 99995; }
146145

147146
.fancybox-slide--image {
147+
overflow: hidden;
148148
padding: 44px 0 0 0; }
149149

150-
.fancybox-slide--image {
151-
overflow: visible; }
152-
153150
.fancybox-slide--image::before {
154151
display: none; }
155152

@@ -172,7 +169,6 @@ body.compensate-for-scrollbar {
172169
-webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
173170
animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1);
174171
-webkit-backface-visibility: hidden;
175-
backface-visibility: hidden;
176172
background: transparent;
177173
background-repeat: no-repeat;
178174
background-size: 100% 100%;
@@ -286,11 +282,13 @@ body.compensate-for-scrollbar {
286282
background: rgba(30, 30, 30, 0.6);
287283
border: 0;
288284
border-radius: 0;
285+
box-shadow: none;
289286
cursor: pointer;
290287
display: inline-block;
291288
height: 44px;
292289
margin: 0;
293290
padding: 10px;
291+
position: relative;
294292
transition: color .2s;
295293
vertical-align: top;
296294
visibility: inherit;
@@ -337,6 +335,25 @@ body.compensate-for-scrollbar {
337335
.fancybox-button--fsexit svg:nth-child(1) {
338336
display: none; }
339337

338+
.fancybox-progress {
339+
background: #ff5268;
340+
height: 2px;
341+
left: 0;
342+
position: absolute;
343+
right: 0;
344+
top: 0;
345+
-webkit-transform: scaleX(0);
346+
-ms-transform: scaleX(0);
347+
transform: scaleX(0);
348+
-webkit-transform-origin: 0;
349+
-ms-transform-origin: 0;
350+
transform-origin: 0;
351+
transition-property: -webkit-transform;
352+
transition-property: transform;
353+
transition-property: transform, -webkit-transform;
354+
transition-timing-function: linear;
355+
z-index: 99998; }
356+
340357
/* Close button on the top right corner of html content */
341358
.fancybox-close-small {
342359
background: transparent;
@@ -434,37 +451,31 @@ body.compensate-for-scrollbar {
434451

435452
/* Loading indicator */
436453
.fancybox-loading {
437-
-webkit-animation: fancybox-rotate .8s infinite linear;
438-
animation: fancybox-rotate .8s infinite linear;
454+
-webkit-animation: fancybox-rotate 1s linear infinite;
455+
animation: fancybox-rotate 1s linear infinite;
439456
background: transparent;
440-
border: 6px solid rgba(100, 100, 100, 0.5);
441-
border-radius: 100%;
442-
border-top-color: #fff;
443-
height: 60px;
457+
border: 4px solid #888;
458+
border-bottom-color: #fff;
459+
border-radius: 50%;
460+
height: 50px;
444461
left: 50%;
445-
margin: -30px 0 0 -30px;
446-
opacity: .6;
462+
margin: -25px 0 0 -25px;
463+
opacity: .7;
447464
padding: 0;
448465
position: absolute;
449466
top: 50%;
450-
width: 60px;
467+
width: 50px;
451468
z-index: 99999; }
452469

453470
@-webkit-keyframes fancybox-rotate {
454-
from {
455-
-webkit-transform: rotate(0deg);
456-
transform: rotate(0deg); }
457-
to {
458-
-webkit-transform: rotate(359deg);
459-
transform: rotate(359deg); } }
471+
100% {
472+
-webkit-transform: rotate(360deg);
473+
transform: rotate(360deg); } }
460474

461475
@keyframes fancybox-rotate {
462-
from {
463-
-webkit-transform: rotate(0deg);
464-
transform: rotate(0deg); }
465-
to {
466-
-webkit-transform: rotate(359deg);
467-
transform: rotate(359deg); } }
476+
100% {
477+
-webkit-transform: rotate(360deg);
478+
transform: rotate(360deg); } }
468479

469480
/* Transition effects */
470481
.fancybox-animated {
@@ -664,7 +675,7 @@ body.compensate-for-scrollbar {
664675

665676
/* Thumbs */
666677
.fancybox-thumbs {
667-
background: #fff;
678+
background: #ddd;
668679
bottom: 0;
669680
display: none;
670681
margin: 0;
@@ -737,7 +748,7 @@ body.compensate-for-scrollbar {
737748
width: 100px; }
738749

739750
.fancybox-thumbs__list a::before {
740-
border: 4px solid #4ea7f9;
751+
border: 6px solid #ff5268;
741752
bottom: 0;
742753
content: '';
743754
left: 0;

0 commit comments

Comments
 (0)