diff --git a/dist/baguetteBox.css b/dist/baguetteBox.css new file mode 100644 index 00000000..2b994a58 --- /dev/null +++ b/dist/baguetteBox.css @@ -0,0 +1,197 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.7.0 + * @url https://github.com/feimosi/baguetteBox.js + */ +#baguetteBox-overlay { + display: none; + opacity: 0; + position: fixed; + overflow: hidden; + top: 0; + left: 0; + width: 100%; + height: 100%; + 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; + -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; + left: 0; + top: 0; + 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-keyframes bounceFromRight { + 0% { + margin-left: 0; } + 50% { + margin-left: -30px; } + 100% { + margin-left: 0; } } + +@keyframes bounceFromRight { + 0% { + margin-left: 0; } + 50% { + margin-left: -30px; } + 100% { + margin-left: 0; } } + +@-webkit-keyframes bounceFromLeft { + 0% { + margin-left: 0; } + 50% { + margin-left: 30px; } + 100% { + margin-left: 0; } } + +@keyframes bounceFromLeft { + 0% { + margin-left: 0; } + 50% { + margin-left: 30px; } + 100% { + margin-left: 0; } } + +.baguetteBox-button#next-button, .baguetteBox-button#previous-button { + top: 50%; + top: calc(50% - 30px); + width: 44px; + height: 60px; } + +.baguetteBox-button { + position: absolute; + cursor: pointer; + outline: none; + padding: 0; + margin: 0; + border: 0; + -moz-border-radius: 15%; + border-radius: 15%; + background-color: #323232; + 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; } + +/* + Preloader + Borrowed from http://tobiasahlin.com/spinkit/ +*/ +.baguetteBox-spinner { + width: 40px; + height: 40px; + display: inline-block; + position: absolute; + top: 50%; + left: 50%; + margin-top: -20px; + margin-left: -20px; } + +.baguetteBox-double-bounce1, +.baguetteBox-double-bounce2 { + width: 100%; + height: 100%; + -moz-border-radius: 50%; + border-radius: 50%; + background-color: #fff; + opacity: .6; + position: absolute; + top: 0; + left: 0; + -webkit-animation: bounce 2s infinite ease-in-out; + animation: bounce 2s infinite ease-in-out; } + +.baguetteBox-double-bounce2 { + -webkit-animation-delay: -1s; + animation-delay: -1s; } + +@-webkit-keyframes bounce { + 0%, 100% { + -webkit-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes bounce { + 0%, 100% { + -webkit-transform: scale(0); + -moz-transform: scale(0); + transform: scale(0); } + 50% { + -webkit-transform: scale(1); + -moz-transform: scale(1); + transform: scale(1); } } diff --git a/dist/baguetteBox.js b/dist/baguetteBox.js new file mode 100644 index 00000000..aea08db5 --- /dev/null +++ b/dist/baguetteBox.js @@ -0,0 +1,700 @@ +/*! + * baguetteBox.js + * @author feimosi + * @version 1.7.0 + * @url https://github.com/feimosi/baguetteBox.js + */ + +/* global define, module */ + +(function (root, factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + define(factory); + } else if (typeof exports === 'object') { + module.exports = factory(); + } else { + root.baguetteBox = factory(); + } +}(this, function () { + 'use strict'; + + // SVG shapes used on the buttons + var leftArrow = '' + + '' + + '', + rightArrow = '' + + '' + + '', + closeX = '' + + '' + + '' + + '' + + ''; + // Global options and their defaults + var options = {}, + defaults = { + captions: true, + fullScreen: false, + noScrollbars: false, + titleTag: false, + buttons: 'auto', + async: false, + preload: 2, + animation: 'slideIn', + afterShow: null, + afterHide: null, + // callback when image changes with `currentIndex` and `imagesElements.length` as parameters + onChange: null, + overlayBackgroundColor: 'rgba(0,0,0,.8)' + }; + // Object containing information about features compatibility + var supports = {}; + // DOM Elements references + var overlay, slider, previousButton, nextButton, closeButton; + // An array with all images in the current gallery + var currentGallery = []; + // Current image index inside the slider + var currentIndex = 0; + // Touch event start position (for slide gesture) + var touch = {}; + // If set to true ignore touch events because animation was already fired + var touchFlag = false; + // Regex pattern to match image files + var regex = /.+\.(gif|jpe?g|png|webp)/i; + // Object of all used galleries + var data = {}; + // Array containing temporary images DOM elements + var imagesElements = []; + // The last focused element before opening the overlay + var documentLastFocus = null; + var overlayClickHandler = function(event) { + // Close the overlay when user clicks directly on the background + if (event.target.id.indexOf('baguette-img') !== -1) { + hideOverlay(); + } + }; + var previousButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // jshint ignore:line + showPreviousImage(); + }; + var nextButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // jshint ignore:line + showNextImage(); + }; + var closeButtonClickHandler = function(event) { + event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; // jshint ignore:line + hideOverlay(); + }; + var touchstartHandler = function(event) { + touch.count++; + if (touch.count > 1) { + touch.multitouch = true; + } + // Save x and y axis position + touch.startX = event.changedTouches[0].pageX; + touch.startY = event.changedTouches[0].pageY; + }; + var touchmoveHandler = function(event) { + // If action was already triggered or multitouch return + if (touchFlag || touch.multitouch) { + return; + } + event.preventDefault ? event.preventDefault() : event.returnValue = false; // jshint ignore:line + var touchEvent = event.touches[0] || event.changedTouches[0]; + // Move at least 40 pixels to trigger the action + if (touchEvent.pageX - touch.startX > 40) { + touchFlag = true; + showPreviousImage(); + } else if (touchEvent.pageX - touch.startX < -40) { + touchFlag = true; + showNextImage(); + // Move 100 pixels up to close the overlay + } else if (touch.startY - touchEvent.pageY > 100) { + hideOverlay(); + } + }; + var touchendHandler = function() { + touch.count--; + if (touch.count <= 0) { + touch.multitouch = false; + } + touchFlag = false; + }; + + var trapFocusInsideOverlay = function(event) { + if (overlay.style.display === 'block' && !overlay.contains(event.target)) { + event.stopPropagation(); + initFocus(); + } + }; + + // forEach polyfill for IE8 + // http://stackoverflow.com/a/14827443/1077846 + /* jshint ignore:start */ + if (![].forEach) { + Array.prototype.forEach = function(callback, thisArg) { + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } + }; + } + + // filter polyfill for IE8 + // https://gist.github.com/eliperelman/1031656 + if (![].filter) { + Array.prototype.filter = function(a, b, c, d, e) { + c = this; + d = []; + for (e = 0; e < c.length; e++) + a.call(b, c[e], e, c) && d.push(c[e]); + return d; + }; + } + /* jshint ignore:end */ + + // Script entry point + function run(selector, userOptions) { + // Fill supports object + supports.transforms = testTransformsSupport(); + supports.svg = testSVGSupport(); + + buildOverlay(); + removeFromCache(selector); + bindImageClickListeners(selector, userOptions); + } + + function bindImageClickListeners(selector, userOptions) { + // For each gallery bind a click event to every image inside it + var galleryNodeList = document.querySelectorAll(selector); + var selectorData = { + galleries: [], + nodeList: galleryNodeList + }; + data[selector] = selectorData; + + [].forEach.call(galleryNodeList, function(galleryElement) { + if (userOptions && userOptions.filter) { + regex = userOptions.filter; + } + + // Get nodes from gallery elements or single-element galleries + var tagsNodeList = []; + if (galleryElement.tagName === 'A') { + tagsNodeList = [galleryElement]; + } else { + tagsNodeList = galleryElement.getElementsByTagName('a'); + } + + // Filter 'a' elements from those not linking to images + tagsNodeList = [].filter.call(tagsNodeList, function(element) { + return regex.test(element.href); + }); + if (tagsNodeList.length === 0) { + return; + } + + var gallery = []; + [].forEach.call(tagsNodeList, function(imageElement, imageIndex) { + var imageElementClickHandler = function(event) { + event.preventDefault ? event.preventDefault() : event.returnValue = false; // jshint ignore:line + prepareOverlay(gallery, userOptions); + showOverlay(imageIndex); + }; + var imageItem = { + eventHandler: imageElementClickHandler, + imageElement: imageElement + }; + bind(imageElement, 'click', imageElementClickHandler); + gallery.push(imageItem); + }); + selectorData.galleries.push(gallery); + }); + } + + function clearCachedData() { + for (var selector in data) { + if (data.hasOwnProperty(selector)) { + removeFromCache(selector); + } + } + } + + function removeFromCache(selector) { + if (!data.hasOwnProperty(selector)) { + return; + } + var galleries = data[selector].galleries; + [].forEach.call(galleries, function(gallery) { + [].forEach.call(gallery, function(imageItem) { + unbind(imageItem.imageElement, 'click', imageItem.eventHandler); + }); + + if (currentGallery === gallery) { + currentGallery = []; + } + }); + + delete data[selector]; + } + + function buildOverlay() { + overlay = getByID('baguetteBox-overlay'); + // Check if the overlay already exists + if (overlay) { + slider = getByID('baguetteBox-slider'); + previousButton = getByID('previous-button'); + nextButton = getByID('next-button'); + closeButton = getByID('close-button'); + return; + } + // Create overlay element + overlay = create('div'); + overlay.setAttribute('role', 'dialog'); + overlay.id = 'baguetteBox-overlay'; + document.getElementsByTagName('body')[0].appendChild(overlay); + // Create gallery slider element + slider = create('div'); + slider.id = 'baguetteBox-slider'; + overlay.appendChild(slider); + // Create all necessary buttons + previousButton = create('button'); + previousButton.setAttribute('type', 'button'); + previousButton.id = 'previous-button'; + previousButton.setAttribute('aria-label', 'Previous'); + previousButton.innerHTML = supports.svg ? leftArrow : '<'; + overlay.appendChild(previousButton); + + nextButton = create('button'); + nextButton.setAttribute('type', 'button'); + nextButton.id = 'next-button'; + nextButton.setAttribute('aria-label', 'Next'); + nextButton.innerHTML = supports.svg ? rightArrow : '>'; + overlay.appendChild(nextButton); + + closeButton = create('button'); + closeButton.setAttribute('type', 'button'); + closeButton.id = 'close-button'; + closeButton.setAttribute('aria-label', 'Close'); + closeButton.innerHTML = supports.svg ? closeX : '×'; + overlay.appendChild(closeButton); + + previousButton.className = nextButton.className = closeButton.className = 'baguetteBox-button'; + + bindEvents(); + } + + function keyDownHandler(event) { + switch (event.keyCode) { + case 37: // Left arrow + showPreviousImage(); + break; + case 39: // Right arrow + showNextImage(); + break; + case 27: // Esc + hideOverlay(); + break; + } + } + + function bindEvents() { + bind(overlay, 'click', overlayClickHandler); + bind(previousButton, 'click', previousButtonClickHandler); + bind(nextButton, 'click', nextButtonClickHandler); + bind(closeButton, 'click', closeButtonClickHandler); + bind(overlay, 'touchstart', touchstartHandler); + bind(overlay, 'touchmove', touchmoveHandler); + bind(overlay, 'touchend', touchendHandler); + bind(document, 'focus', trapFocusInsideOverlay, true); + } + + function unbindEvents() { + unbind(overlay, 'click', overlayClickHandler); + unbind(previousButton, 'click', previousButtonClickHandler); + unbind(nextButton, 'click', nextButtonClickHandler); + unbind(closeButton, 'click', closeButtonClickHandler); + unbind(overlay, 'touchstart', touchstartHandler); + unbind(overlay, 'touchmove', touchmoveHandler); + unbind(overlay, 'touchend', touchendHandler); + unbind(document, 'focus', trapFocusInsideOverlay, true); + } + + function prepareOverlay(gallery, userOptions) { + // If the same gallery is being opened prevent from loading it once again + if (currentGallery === gallery) { + return; + } + currentGallery = gallery; + // Update gallery specific options + setOptions(userOptions); + // Empty slider of previous contents (more effective than .innerHTML = "") + while (slider.firstChild) { + slider.removeChild(slider.firstChild); + } + imagesElements.length = 0; + + var imagesFiguresIds = []; + var imagesCaptionsIds = []; + // Prepare and append images containers and populate figure and captions IDs arrays + for (var i = 0, fullImage; i < gallery.length; i++) { + fullImage = create('div'); + fullImage.className = 'full-image'; + fullImage.id = 'baguette-img-' + i; + imagesElements.push(fullImage); + + imagesFiguresIds.push('baguetteBox-figure-' + i); + imagesCaptionsIds.push('baguetteBox-figcaption-' + i); + slider.appendChild(imagesElements[i]); + } + overlay.setAttribute('aria-labelledby', imagesFiguresIds.join(' ')); + overlay.setAttribute('aria-describedby', imagesCaptionsIds.join(' ')); + } + + function setOptions(newOptions) { + if (!newOptions) { + newOptions = {}; + } + // Fill options object + for (var item in defaults) { + options[item] = defaults[item]; + if (typeof newOptions[item] !== 'undefined') { + options[item] = newOptions[item]; + } + } + /* Apply new options */ + // Change transition for proper animation + slider.style.transition = slider.style.webkitTransition = (options.animation === 'fadeIn' ? 'opacity .4s ease' : + options.animation === 'slideIn' ? '' : 'none'); + // Hide buttons if necessary + if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1)) { + options.buttons = false; + } + // Set buttons style to hide or display them + previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none'); + // Set overlay color + try { + overlay.style.backgroundColor = options.overlayBackgroundColor; + } catch (e) {} + } + + function showOverlay(chosenImageIndex) { + if (options.noScrollbars) { + document.documentElement.style.overflowY = 'hidden'; + document.body.style.overflowY = 'scroll'; + } + if (overlay.style.display === 'block') { + return; + } + + bind(document, 'keydown', keyDownHandler); + currentIndex = chosenImageIndex; + touch = { + count: 0, + startX: null, + startY: null + }; + loadImage(currentIndex, function() { + preloadNext(currentIndex); + preloadPrev(currentIndex); + }); + + updateOffset(); + overlay.style.display = 'block'; + if (options.fullScreen) { + enterFullScreen(); + } + // Fade in overlay + setTimeout(function() { + overlay.className = 'visible'; + if (options.afterShow) { + options.afterShow(); + } + }, 50); + if (options.onChange) { + options.onChange(currentIndex, imagesElements.length); + } + documentLastFocus = document.activeElement; + initFocus(); + } + + function initFocus() { + if (options.buttons) { + previousButton.focus(); + } else { + closeButton.focus(); + } + } + + function enterFullScreen() { + if (overlay.requestFullscreen) { + overlay.requestFullscreen(); + } else if (overlay.webkitRequestFullscreen) { + overlay.webkitRequestFullscreen(); + } else if (overlay.mozRequestFullScreen) { + overlay.mozRequestFullScreen(); + } + } + + function exitFullscreen() { + if (document.exitFullscreen) { + document.exitFullscreen(); + } else if (document.mozCancelFullScreen) { + document.mozCancelFullScreen(); + } else if (document.webkitExitFullscreen) { + document.webkitExitFullscreen(); + } + } + + function hideOverlay() { + if (options.noScrollbars) { + document.documentElement.style.overflowY = 'auto'; + document.body.style.overflowY = 'auto'; + } + if (overlay.style.display === 'none') { + return; + } + + unbind(document, 'keydown', keyDownHandler); + // Fade out and hide the overlay + overlay.className = ''; + setTimeout(function() { + overlay.style.display = 'none'; + exitFullscreen(); + if (options.afterHide) { + options.afterHide(); + } + }, 500); + documentLastFocus.focus(); + } + + function loadImage(index, callback) { + var imageContainer = imagesElements[index]; + if (typeof imageContainer === 'undefined') { + return; + } + + // If image is already loaded run callback and return + if (imageContainer.getElementsByTagName('img')[0]) { + if (callback) { + callback(); + } + return; + } + + // Get element reference, optional caption and source path + var imageElement = currentGallery[index].imageElement; + var thumbnailElement = imageElement.getElementsByTagName('img')[0]; + var imageCaption = typeof options.captions === 'function' ? + options.captions.call(currentGallery, imageElement) : + imageElement.getAttribute('data-caption') || imageElement.title; + var imageSrc = getImageSrc(imageElement); + + // Prepare figure element + var figure = create('figure'); + figure.id = 'baguetteBox-figure-' + index; + figure.innerHTML = ''; + // Insert caption if available + if (options.captions && imageCaption) { + var figcaption = create('figcaption'); + figcaption.id = 'baguetteBox-figcaption-' + index; + figcaption.innerHTML = imageCaption; + figure.appendChild(figcaption); + } + imageContainer.appendChild(figure); + + // Prepare gallery img element + var image = create('img'); + image.onload = function() { + // Remove loader element + var spinner = document.querySelector('#baguette-img-' + index + ' .baguetteBox-spinner'); + figure.removeChild(spinner); + if (!options.async && callback) { + callback(); + } + }; + image.setAttribute('src', imageSrc); + image.alt = thumbnailElement ? thumbnailElement.alt || '' : ''; + if (options.titleTag && imageCaption) { + image.title = imageCaption; + } + figure.appendChild(image); + + // Run callback + if (options.async && callback) { + callback(); + } + } + + // Get image source location, mostly used for responsive images + function getImageSrc(image) { + // Set default image path from href + var result = image.href; + // If dataset is supported find the most suitable image + if (image.dataset) { + var srcs = []; + // Get all possible image versions depending on the resolution + for (var item in image.dataset) { + if (item.substring(0, 3) === 'at-' && !isNaN(item.substring(3))) { + srcs[item.replace('at-', '')] = image.dataset[item]; + } + } + // Sort resolutions ascending + var keys = Object.keys(srcs).sort(function(a, b) { + return parseInt(a, 10) < parseInt(b, 10) ? -1 : 1; + }); + // Get real screen resolution + var width = window.innerWidth * window.devicePixelRatio; + // Find the first image bigger than or equal to the current width + var i = 0; + while (i < keys.length - 1 && keys[i] < width) { + i++; + } + result = srcs[keys[i]] || result; + } + return result; + } + + // Return false at the right end of the gallery + function showNextImage() { + var returnValue; + // Check if next image exists + if (currentIndex <= imagesElements.length - 2) { + currentIndex++; + updateOffset(); + preloadNext(currentIndex); + returnValue = true; + } else if (options.animation) { + slider.className = 'bounce-from-right'; + setTimeout(function() { + slider.className = ''; + }, 400); + returnValue = false; + } + if (options.onChange) { + options.onChange(currentIndex, imagesElements.length); + } + return returnValue; + } + + // Return false at the left end of the gallery + function showPreviousImage() { + var returnValue; + // Check if previous image exists + if (currentIndex >= 1) { + currentIndex--; + updateOffset(); + preloadPrev(currentIndex); + returnValue = true; + } else if (options.animation) { + slider.className = 'bounce-from-left'; + setTimeout(function() { + slider.className = ''; + }, 400); + returnValue = false; + } + if (options.onChange) { + options.onChange(currentIndex, imagesElements.length); + } + return returnValue; + } + + function updateOffset() { + var offset = -currentIndex * 100 + '%'; + if (options.animation === 'fadeIn') { + slider.style.opacity = 0; + setTimeout(function() { + /* jshint -W030 */ + supports.transforms ? + slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)' + : slider.style.left = offset; + slider.style.opacity = 1; + }, 400); + } else { + /* jshint -W030 */ + supports.transforms ? + slider.style.transform = slider.style.webkitTransform = 'translate3d(' + offset + ',0,0)' + : slider.style.left = offset; + } + } + + // CSS 3D Transforms test + function testTransformsSupport() { + var div = create('div'); + return typeof div.style.perspective !== 'undefined' || typeof div.style.webkitPerspective !== 'undefined'; + } + + // Inline SVG test + function testSVGSupport() { + var div = create('div'); + div.innerHTML = ''; + return (div.firstChild && div.firstChild.namespaceURI) === 'http://www.w3.org/2000/svg'; + } + + function preloadNext(index) { + if (index - currentIndex >= options.preload) { + return; + } + loadImage(index + 1, function() { + preloadNext(index + 1); + }); + } + + function preloadPrev(index) { + if (currentIndex - index >= options.preload) { + return; + } + loadImage(index - 1, function() { + preloadPrev(index - 1); + }); + } + + function bind(element, event, callback, useCapture) { + if (element.addEventListener) { + element.addEventListener(event, callback, useCapture); + } else { + // IE8 fallback + element.attachEvent('on' + event, callback); + } + } + + function unbind(element, event, callback, useCapture) { + if (element.removeEventListener) { + element.removeEventListener(event, callback, useCapture); + } else { + // IE8 fallback + element.detachEvent('on' + event, callback); + } + } + + function getByID(id) { + return document.getElementById(id); + } + + function create(element) { + return document.createElement(element); + } + + function destroyPlugin() { + unbindEvents(); + clearCachedData(); + unbind(document, 'keydown', keyDownHandler); + document.getElementsByTagName('body')[0].removeChild(document.getElementById('baguetteBox-overlay')); + data = {}; + currentGallery = []; + currentIndex = 0; + } + + return { + run: run, + destroy: destroyPlugin, + showNext: showNextImage, + showPrevious: showPreviousImage + }; + +})); diff --git a/dist/baguetteBox.min.js b/dist/baguetteBox.min.js index f44e449b..7011d74a 100644 --- a/dist/baguetteBox.min.js +++ b/dist/baguetteBox.min.js @@ -4,4 +4,4 @@ * @version 1.7.0 * @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";function e(e,n){D.transforms=k(),D.svg=w(),i(),o(e),t(e,n)}function t(e,t){var n=document.querySelectorAll(e),o={galleries:[],nodeList:n};W[e]=o,[].forEach.call(n,function(e){t&&t.filter&&(U=t.filter);var n=e.getElementsByTagName("a");n=[].filter.call(n,function(e){return U.test(e.href)});var i=[];0!==n.length&&(o.galleries.push(i),[].forEach.call(n,function(e,n){var o=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,u(i,t),c(n)},a={eventHandler:o,imageElement:e};E(e,"click",o),i.push(a)}))})}function n(){for(var e in W)W.hasOwnProperty(e)&&o(e)}function o(e){if(W.hasOwnProperty(e)){var t=W[e].galleries;[].forEach.call(t,function(e){[].forEach.call(e,function(e){B(e.imageElement,"click",e.eventHandler)}),O===e&&(O=[])}),delete W[e]}}function i(){return(S=T("baguetteBox-overlay"))?(P=T("baguetteBox-slider"),F=T("previous-button"),H=T("next-button"),void(L=T("close-button"))):(S=N("div"),S.setAttribute("role","dialog"),S.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(S),P=N("div"),P.id="baguetteBox-slider",S.appendChild(P),F=N("button"),F.setAttribute("type","button"),F.id="previous-button",F.setAttribute("aria-label","Previous"),F.innerHTML=D.svg?j:"<",S.appendChild(F),H=N("button"),H.setAttribute("type","button"),H.id="next-button",H.setAttribute("aria-label","Next"),H.innerHTML=D.svg?M:">",S.appendChild(H),L=N("button"),L.setAttribute("type","button"),L.id="close-button",L.setAttribute("aria-label","Close"),L.innerHTML=D.svg?R:"×",S.appendChild(L),F.className=H.className=L.className="baguetteBox-button",void r())}function a(e){switch(e.keyCode){case 37:v();break;case 39:h();break;case 27:p()}}function r(){E(S,"click",K),E(F,"click",Q),E(H,"click",Z),E(L,"click",$),E(S,"touchstart",_),E(S,"touchmove",ee),E(S,"touchend",te),E(document,"focus",ne,!0)}function l(){B(S,"click",K),B(F,"click",Q),B(H,"click",Z),B(L,"click",$),B(S,"touchstart",_),B(S,"touchmove",ee),B(S,"touchend",te),B(document,"focus",ne,!0)}function u(e,t){if(O!==e){for(O=e,s(t);P.firstChild;)P.removeChild(P.firstChild);G.length=0;for(var n,o=[],i=[],a=0;a