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

Commit

Permalink
Updated to v3.5.0
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
fancyapps committed Sep 29, 2018
1 parent 48c7be6 commit 42d6aab
Show file tree
Hide file tree
Showing 11 changed files with 1,109 additions and 761 deletions.
67 changes: 30 additions & 37 deletions dist/jquery.fancybox.css
Expand Up @@ -13,7 +13,6 @@ body.compensate-for-scrollbar {

.fancybox-container {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
left: 0;
outline: none;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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; }
Expand Down Expand Up @@ -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%; }
Expand All @@ -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;
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down

0 comments on commit 42d6aab

Please sign in to comment.