Skip to content

Commit 81b69d9

Browse files
feimosifeimosi
committed
Build update
1 parent 096a3cd commit 81b69d9

3 files changed

Lines changed: 145 additions & 97 deletions

File tree

‎dist/baguetteBox.css‎

Lines changed: 134 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -16,48 +16,55 @@
1616
z-index: 1000000;
1717
background-color: #222;
1818
background-color: rgba(0, 0, 0, 0.8);
19-
-webkit-transition: opacity .5s ease;
20-
transition: opacity .5s ease; }
21-
#baguetteBox-overlay.visible {
22-
opacity: 1; }
23-
#baguetteBox-overlay .full-image {
24-
display: inline-block;
25-
position: relative;
26-
width: 100%;
27-
height: 100%;
28-
text-align: center; }
29-
#baguetteBox-overlay .full-image figure {
30-
display: inline;
31-
margin: 0;
32-
height: 100%; }
33-
#baguetteBox-overlay .full-image img {
34-
display: inline-block;
35-
width: auto;
36-
height: auto;
37-
max-height: 100%;
38-
max-width: 100%;
39-
vertical-align: middle;
40-
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
41-
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
42-
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
43-
#baguetteBox-overlay .full-image figcaption {
44-
display: block;
45-
position: absolute;
46-
bottom: 0;
47-
width: 100%;
48-
text-align: center;
49-
line-height: 1.8;
50-
white-space: normal;
51-
color: #ccc;
52-
background-color: #000;
53-
background-color: rgba(0, 0, 0, 0.6);
54-
font-family: sans-serif; }
55-
#baguetteBox-overlay .full-image:before {
56-
content: "";
57-
display: inline-block;
58-
height: 50%;
59-
width: 1px;
60-
margin-right: -1px; }
19+
-webkit-transition: opacity 0.5s ease;
20+
transition: opacity 0.5s ease;
21+
}
22+
#baguetteBox-overlay.visible {
23+
opacity: 1;
24+
}
25+
#baguetteBox-overlay .full-image {
26+
display: inline-block;
27+
position: relative;
28+
width: 100%;
29+
height: 100%;
30+
text-align: center;
31+
}
32+
#baguetteBox-overlay .full-image figure {
33+
display: inline;
34+
margin: 0;
35+
height: 100%;
36+
}
37+
#baguetteBox-overlay .full-image img {
38+
display: inline-block;
39+
width: auto;
40+
height: auto;
41+
max-height: 100%;
42+
max-width: 100%;
43+
vertical-align: middle;
44+
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
45+
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
46+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
47+
}
48+
#baguetteBox-overlay .full-image figcaption {
49+
display: block;
50+
position: absolute;
51+
bottom: 0;
52+
width: 100%;
53+
text-align: center;
54+
line-height: 1.8;
55+
white-space: normal;
56+
color: #ccc;
57+
background-color: #000;
58+
background-color: rgba(0, 0, 0, 0.6);
59+
font-family: sans-serif;
60+
}
61+
#baguetteBox-overlay .full-image:before {
62+
content: "";
63+
display: inline-block;
64+
height: 50%;
65+
width: 1px;
66+
margin-right: -1px;
67+
}
6168

6269
#baguetteBox-slider {
6370
position: absolute;
@@ -66,54 +73,71 @@
6673
height: 100%;
6774
width: 100%;
6875
white-space: nowrap;
69-
-webkit-transition: left .4s ease, -webkit-transform .4s ease;
70-
transition: left .4s ease, -webkit-transform .4s ease;
71-
transition: left .4s ease, transform .4s ease;
72-
transition: left .4s ease, transform .4s ease, -webkit-transform .4s ease, -moz-transform .4s ease; }
73-
#baguetteBox-slider.bounce-from-right {
74-
-webkit-animation: bounceFromRight .4s ease-out;
75-
animation: bounceFromRight .4s ease-out; }
76-
#baguetteBox-slider.bounce-from-left {
77-
-webkit-animation: bounceFromLeft .4s ease-out;
78-
animation: bounceFromLeft .4s ease-out; }
76+
-webkit-transition: left 0.4s ease, -webkit-transform 0.4s ease;
77+
transition: left 0.4s ease, -webkit-transform 0.4s ease;
78+
transition: left 0.4s ease, transform 0.4s ease;
79+
transition: left 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease, -moz-transform 0.4s ease;
80+
}
81+
#baguetteBox-slider.bounce-from-right {
82+
-webkit-animation: bounceFromRight 0.4s ease-out;
83+
animation: bounceFromRight 0.4s ease-out;
84+
}
85+
#baguetteBox-slider.bounce-from-left {
86+
-webkit-animation: bounceFromLeft 0.4s ease-out;
87+
animation: bounceFromLeft 0.4s ease-out;
88+
}
7989

8090
@-webkit-keyframes bounceFromRight {
8191
0% {
82-
margin-left: 0; }
92+
margin-left: 0;
93+
}
8394
50% {
84-
margin-left: -30px; }
95+
margin-left: -30px;
96+
}
8597
100% {
86-
margin-left: 0; } }
98+
margin-left: 0;
99+
}
100+
}
87101

88102
@keyframes bounceFromRight {
89103
0% {
90-
margin-left: 0; }
104+
margin-left: 0;
105+
}
91106
50% {
92-
margin-left: -30px; }
107+
margin-left: -30px;
108+
}
93109
100% {
94-
margin-left: 0; } }
95-
110+
margin-left: 0;
111+
}
112+
}
96113
@-webkit-keyframes bounceFromLeft {
97114
0% {
98-
margin-left: 0; }
115+
margin-left: 0;
116+
}
99117
50% {
100-
margin-left: 30px; }
118+
margin-left: 30px;
119+
}
101120
100% {
102-
margin-left: 0; } }
103-
121+
margin-left: 0;
122+
}
123+
}
104124
@keyframes bounceFromLeft {
105125
0% {
106-
margin-left: 0; }
126+
margin-left: 0;
127+
}
107128
50% {
108-
margin-left: 30px; }
129+
margin-left: 30px;
130+
}
109131
100% {
110-
margin-left: 0; } }
111-
112-
.baguetteBox-button#next-button, .baguetteBox-button#previous-button {
132+
margin-left: 0;
133+
}
134+
}
135+
.baguetteBox-button#previous-button, .baguetteBox-button#next-button {
113136
top: 50%;
114137
top: calc(50% - 30px);
115138
width: 44px;
116-
height: 60px; }
139+
height: 60px;
140+
}
117141

118142
.baguetteBox-button {
119143
position: absolute;
@@ -128,24 +152,30 @@
128152
background-color: rgba(50, 50, 50, 0.5);
129153
color: #ddd;
130154
font: 1.6em sans-serif;
131-
-webkit-transition: background-color .4s ease;
132-
transition: background-color .4s ease; }
133-
.baguetteBox-button:focus, .baguetteBox-button:hover {
134-
background-color: rgba(50, 50, 50, 0.9); }
135-
.baguetteBox-button#next-button {
136-
right: 2%; }
137-
.baguetteBox-button#previous-button {
138-
left: 2%; }
139-
.baguetteBox-button#close-button {
140-
top: 20px;
141-
right: 2%;
142-
right: calc(2% + 6px);
143-
width: 30px;
144-
height: 30px; }
145-
.baguetteBox-button svg {
146-
position: absolute;
147-
left: 0;
148-
top: 0; }
155+
-webkit-transition: background-color 0.4s ease;
156+
transition: background-color 0.4s ease;
157+
}
158+
.baguetteBox-button:focus, .baguetteBox-button:hover {
159+
background-color: rgba(50, 50, 50, 0.9);
160+
}
161+
.baguetteBox-button#next-button {
162+
right: 2%;
163+
}
164+
.baguetteBox-button#previous-button {
165+
left: 2%;
166+
}
167+
.baguetteBox-button#close-button {
168+
top: 20px;
169+
right: 2%;
170+
right: calc(2% + 6px);
171+
width: 30px;
172+
height: 30px;
173+
}
174+
.baguetteBox-button svg {
175+
position: absolute;
176+
left: 0;
177+
top: 0;
178+
}
149179

150180
/*
151181
Preloader
@@ -159,7 +189,8 @@
159189
top: 50%;
160190
left: 50%;
161191
margin-top: -20px;
162-
margin-left: -20px; }
192+
margin-left: -20px;
193+
}
163194

164195
.baguetteBox-double-bounce1,
165196
.baguetteBox-double-bounce2 {
@@ -168,31 +199,39 @@
168199
-moz-border-radius: 50%;
169200
border-radius: 50%;
170201
background-color: #fff;
171-
opacity: .6;
202+
opacity: 0.6;
172203
position: absolute;
173204
top: 0;
174205
left: 0;
175206
-webkit-animation: bounce 2s infinite ease-in-out;
176-
animation: bounce 2s infinite ease-in-out; }
207+
animation: bounce 2s infinite ease-in-out;
208+
}
177209

178210
.baguetteBox-double-bounce2 {
179211
-webkit-animation-delay: -1s;
180-
animation-delay: -1s; }
212+
animation-delay: -1s;
213+
}
181214

182215
@-webkit-keyframes bounce {
183216
0%, 100% {
184217
-webkit-transform: scale(0);
185-
transform: scale(0); }
218+
transform: scale(0);
219+
}
186220
50% {
187221
-webkit-transform: scale(1);
188-
transform: scale(1); } }
222+
transform: scale(1);
223+
}
224+
}
189225

190226
@keyframes bounce {
191227
0%, 100% {
192228
-webkit-transform: scale(0);
193229
-moz-transform: scale(0);
194-
transform: scale(0); }
230+
transform: scale(0);
231+
}
195232
50% {
196233
-webkit-transform: scale(1);
197234
-moz-transform: scale(1);
198-
transform: scale(1); } }
235+
transform: scale(1);
236+
}
237+
}

‎dist/baguetteBox.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@
4848
afterShow: null,
4949
afterHide: null,
5050
onChange: null,
51-
overlayBackgroundColor: 'rgba(0,0,0,.8)'
51+
overlayBackgroundColor: 'rgba(0,0,0,.8)',
52+
closeX: closeX,
53+
leftArrow: leftArrow,
54+
rightArrow: rightArrow,
5255
};
5356
// Object containing information about features compatibility
5457
var supports = {};
@@ -398,6 +401,12 @@
398401
}
399402
// Set buttons style to hide or display them
400403
previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none');
404+
// Set custom markup for buttons
405+
closeButton.innerHTML = options.closeX;
406+
if (options.buttons) {
407+
previousButton.innerHTML = options.leftArrow;
408+
nextButton.innerHTML = options.rightArrow;
409+
}
401410
// Set overlay color
402411
try {
403412
overlay.style.backgroundColor = options.overlayBackgroundColor;

0 commit comments

Comments
 (0)