Skip to content

Commit

Permalink
Build update
Browse files Browse the repository at this point in the history
  • Loading branch information
@feimosi
feimosi committed Jul 14, 2024
1 parent 096a3cd commit 81b69d9
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 97 deletions.
229 changes: 134 additions & 95 deletions dist/baguetteBox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,48 +16,55 @@
z-index: 1000000;
background-color: #222;
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease; }
#baguetteBox-overlay.visible {
opacity: 1; }
#baguetteBox-overlay .full-image {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
text-align: center; }
#baguetteBox-overlay .full-image figure {
display: inline;
margin: 0;
height: 100%; }
#baguetteBox-overlay .full-image img {
display: inline-block;
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
#baguetteBox-overlay .full-image figcaption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
line-height: 1.8;
white-space: normal;
color: #ccc;
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
font-family: sans-serif; }
#baguetteBox-overlay .full-image:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px; }
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
#baguetteBox-overlay.visible {
opacity: 1;
}
#baguetteBox-overlay .full-image {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
text-align: center;
}
#baguetteBox-overlay .full-image figure {
display: inline;
margin: 0;
height: 100%;
}
#baguetteBox-overlay .full-image img {
display: inline-block;
width: auto;
height: auto;
max-height: 100%;
max-width: 100%;
vertical-align: middle;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
#baguetteBox-overlay .full-image figcaption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
line-height: 1.8;
white-space: normal;
color: #ccc;
background-color: #000;
background-color: rgba(0, 0, 0, 0.6);
font-family: sans-serif;
}
#baguetteBox-overlay .full-image:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px;
}

#baguetteBox-slider {
position: absolute;
Expand All @@ -66,54 +73,71 @@
height: 100%;
width: 100%;
white-space: nowrap;
-webkit-transition: left .4s ease, -webkit-transform .4s ease;
transition: left .4s ease, -webkit-transform .4s ease;
transition: left .4s ease, transform .4s ease;
transition: left .4s ease, transform .4s ease, -webkit-transform .4s ease, -moz-transform .4s ease; }
#baguetteBox-slider.bounce-from-right {
-webkit-animation: bounceFromRight .4s ease-out;
animation: bounceFromRight .4s ease-out; }
#baguetteBox-slider.bounce-from-left {
-webkit-animation: bounceFromLeft .4s ease-out;
animation: bounceFromLeft .4s ease-out; }
-webkit-transition: left 0.4s ease, -webkit-transform 0.4s ease;
transition: left 0.4s ease, -webkit-transform 0.4s ease;
transition: left 0.4s ease, transform 0.4s ease;
transition: left 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease, -moz-transform 0.4s ease;
}
#baguetteBox-slider.bounce-from-right {
-webkit-animation: bounceFromRight 0.4s ease-out;
animation: bounceFromRight 0.4s ease-out;
}
#baguetteBox-slider.bounce-from-left {
-webkit-animation: bounceFromLeft 0.4s ease-out;
animation: bounceFromLeft 0.4s ease-out;
}

@-webkit-keyframes bounceFromRight {
0% {
margin-left: 0; }
margin-left: 0;
}
50% {
margin-left: -30px; }
margin-left: -30px;
}
100% {
margin-left: 0; } }
margin-left: 0;
}
}

@keyframes bounceFromRight {
0% {
margin-left: 0; }
margin-left: 0;
}
50% {
margin-left: -30px; }
margin-left: -30px;
}
100% {
margin-left: 0; } }

margin-left: 0;
}
}
@-webkit-keyframes bounceFromLeft {
0% {
margin-left: 0; }
margin-left: 0;
}
50% {
margin-left: 30px; }
margin-left: 30px;
}
100% {
margin-left: 0; } }

margin-left: 0;
}
}
@keyframes bounceFromLeft {
0% {
margin-left: 0; }
margin-left: 0;
}
50% {
margin-left: 30px; }
margin-left: 30px;
}
100% {
margin-left: 0; } }

.baguetteBox-button#next-button, .baguetteBox-button#previous-button {
margin-left: 0;
}
}
.baguetteBox-button#previous-button, .baguetteBox-button#next-button {
top: 50%;
top: calc(50% - 30px);
width: 44px;
height: 60px; }
height: 60px;
}

.baguetteBox-button {
position: absolute;
Expand All @@ -128,24 +152,30 @@
background-color: rgba(50, 50, 50, 0.5);
color: #ddd;
font: 1.6em sans-serif;
-webkit-transition: background-color .4s ease;
transition: background-color .4s ease; }
.baguetteBox-button:focus, .baguetteBox-button:hover {
background-color: rgba(50, 50, 50, 0.9); }
.baguetteBox-button#next-button {
right: 2%; }
.baguetteBox-button#previous-button {
left: 2%; }
.baguetteBox-button#close-button {
top: 20px;
right: 2%;
right: calc(2% + 6px);
width: 30px;
height: 30px; }
.baguetteBox-button svg {
position: absolute;
left: 0;
top: 0; }
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.baguetteBox-button:focus, .baguetteBox-button:hover {
background-color: rgba(50, 50, 50, 0.9);
}
.baguetteBox-button#next-button {
right: 2%;
}
.baguetteBox-button#previous-button {
left: 2%;
}
.baguetteBox-button#close-button {
top: 20px;
right: 2%;
right: calc(2% + 6px);
width: 30px;
height: 30px;
}
.baguetteBox-button svg {
position: absolute;
left: 0;
top: 0;
}

/*
Preloader
Expand All @@ -159,7 +189,8 @@
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px; }
margin-left: -20px;
}

.baguetteBox-double-bounce1,
.baguetteBox-double-bounce2 {
Expand All @@ -168,31 +199,39 @@
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #fff;
opacity: .6;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2s infinite ease-in-out;
animation: bounce 2s infinite ease-in-out; }
animation: bounce 2s infinite ease-in-out;
}

.baguetteBox-double-bounce2 {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
animation-delay: -1s;
}

@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1); } }
transform: scale(1);
}
}

@keyframes bounce {
0%, 100% {
-webkit-transform: scale(0);
-moz-transform: scale(0);
transform: scale(0); }
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1); } }
transform: scale(1);
}
}
11 changes: 10 additions & 1 deletion dist/baguetteBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,10 @@
afterShow: null,
afterHide: null,
onChange: null,
overlayBackgroundColor: 'rgba(0,0,0,.8)'
overlayBackgroundColor: 'rgba(0,0,0,.8)',
closeX: closeX,
leftArrow: leftArrow,
rightArrow: rightArrow,
};
// Object containing information about features compatibility
var supports = {};
Expand Down Expand Up @@ -398,6 +401,12 @@
}
// Set buttons style to hide or display them
previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none');
// Set custom markup for buttons
closeButton.innerHTML = options.closeX;
if (options.buttons) {
previousButton.innerHTML = options.leftArrow;
nextButton.innerHTML = options.rightArrow;
}
// Set overlay color
try {
overlay.style.backgroundColor = options.overlayBackgroundColor;
Expand Down
Loading

0 comments on commit 81b69d9

Please sign in to comment.