diff --git a/dist/baguetteBox.css b/dist/baguetteBox.css
index 5c559904..1fb3dd09 100644
--- a/dist/baguetteBox.css
+++ b/dist/baguetteBox.css
@@ -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;
@@ -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;
@@ -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
@@ -159,7 +189,8 @@
top: 50%;
left: 50%;
margin-top: -20px;
- margin-left: -20px; }
+ margin-left: -20px;
+}
.baguetteBox-double-bounce1,
.baguetteBox-double-bounce2 {
@@ -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);
+ }
+}
\ No newline at end of file
diff --git a/dist/baguetteBox.js b/dist/baguetteBox.js
index 3288636c..3d40a686 100644
--- a/dist/baguetteBox.js
+++ b/dist/baguetteBox.js
@@ -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 = {};
@@ -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;
diff --git a/dist/baguetteBox.min.js b/dist/baguetteBox.min.js
index a6c7b04b..ae347c8b 100644
--- a/dist/baguetteBox.min.js
+++ b/dist/baguetteBox.min.js
@@ -4,4 +4,4 @@
* @version 1.11.1
* @url https://github.com/feimosi/baguetteBox.js
*/
-!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.baguetteBox=t()}(this,function(){"use strict";var r,l,u,c,d,f='',g='',p='',b={},v={captions:!0,buttons:"auto",fullScreen:!1,noScrollbars:!1,bodyClass:"baguetteBox-open",titleTag:!1,async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)"},m={},h=[],o=0,n=!1,i={},a=!1,y=/.+\.(gif|jpe?g|png|webp)/i,w={},k=[],s=null,x=function(e){-1!==e.target.id.indexOf("baguette-img")&&j()},E=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,D()},C=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,X()},B=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,j()},T=function(e){i.count++,1',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n',g='',p='',b={},v={captions:!0,buttons:"auto",fullScreen:!1,noScrollbars:!1,bodyClass:"baguetteBox-open",titleTag:!1,async:!1,preload:2,animation:"slideIn",afterShow:null,afterHide:null,onChange:null,overlayBackgroundColor:"rgba(0,0,0,.8)",closeX:p,leftArrow:f,rightArrow:g},m={},h=[],o=0,n=!1,i={},a=!1,y=/.+\.(gif|jpe?g|png|webp)/i,w={},k=[],r=null,x=function(e){-1!==e.target.id.indexOf("baguette-img")&&X()},E=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,q()},C=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,j()},B=function(e){e.stopPropagation?e.stopPropagation():e.cancelBubble=!0,X()},T=function(e){i.count++,1',b.captions&&r){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=r,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",s),c.alt=a&&a.alt||"",b.titleTag&&r&&(c.title=r),l.appendChild(c),b.async&&n&&n()}}function j(){return D(o+1)}function q(){return D(o-1)}function D(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(Y(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||Y(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||Y(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n