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
',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