1!function(t){var e={};function i(a){if(e[a])return e[a].exports;var n=e[a]={i:a,l:!1,exports:{}};return t[a].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=t,i.c=e,i.d=function(t,e,a){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:a})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(a,n,function(e){return t[e]}.bind(null,n));return a},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){i(1),i(2),t.exports=i(4)},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},n=function(){function t(t,e){for(var i=0;i<e.length;i++){var a=e[i];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(t,a.key,a)}}return function(e,i,a){return i&&t(e.prototype,i),a&&t(e,a),e}}();var r=function(t){var e="ekkoLightbox",i=t.fn[e],r={title:"",footer:"",gallerySelector:null,maxWidth:9999,maxHeight:9999,showArrows:!0,wrapping:!0,type:null,alwaysShowClose:!1,loadingMessage:'<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>',navOverlay:'<div class="ekko-lightbox-nav-overlay"></div>',leftArrow:"<span>❮</span>",rightArrow:"<span>❯</span>",leftArrowClass:"",rightArrowClass:"",strings:{close:"Close",fail:"Failed to load image:",type:"Could not detect remote target type. Force the type using data-type"},doc:document,onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){},onNavigate:function(){},onContentLoaded:function(){},detectType:{image:function(t){return t&&t.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},youtube:function(t){return t&&t.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i)},vimeo:function(t){return t&&t.match(/(?:www\.)?vimeo\.com\/(?:clip:)?(\d+)/i)},instagram:function(t){return!!(t&&t.indexOf("instagram")>0)&&t},media:function(t){return t&&t.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i)}},renderType:{image:function(t,e){this._preloadImage(t,e),this._preloadImageByIndex(this._galleryIndex,3)},youtube:function(t,e){this._showYoutubeVideo(t,e)},vimeo:function(t,e){var i=/(?:www\.)?vimeo\.com\/(?:clip:)?(\d+)/i.exec(t);this._showVimeoVideo(i[1],e)},instagram:function(t,e){this._showInstagramVideo(this._getInstagramId(t),e)},media:function(t,e){this._showHtml5Media(t,e)},url:function(t,e){this._loadRemoteContent(t,e)}},template:function(){var e='<h4 class="modal-title">'+(this._config.title||" ")+"</h4>",i='<button type="button" class="close" data-dismiss="modal" aria-label="'+this._config.strings.close+'"><span aria-hidden="true">×</span></button>',a='<div class="modal-header'+(this._config.title||this._config.alwaysShowClose?"":" hide")+'">'+(this._isBootstrap3?i+e:e+i)+"</div>",n='<div class="modal-footer'+(this._config.footer?"":" hide")+'">'+(this._config.footer||" ")+"</div>";return t('<div class="modal-dialog" role="document"><div class="modal-content">'+a+'<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>'+n+"</div></div>")},templateSelectors:{dialog:".modal-dialog",content:".modal-content",body:".modal-body",header:".modal-header",footer:".modal-footer",title:".modal-title",lightboxContainer:".ekko-lightbox-container",lightboxNavContainer:"",lightboxBodyOne:"> div:first-child",lightboxBodyTwo:"> div:last-child",lightboxNavOverlay:".ekko-lightbox-nav-overlay",lightboxNavLeftArrow:"a:first-child",lightboxNavRightArrow:"a:last-child",lightboxLoader:"ekko-lightbox-loader"}},o=function(){function i(e,a){var n=this;if(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,i),this._config=t.extend({},r,a),this._$modalArrows=null,this._galleryIndex=0,this._galleryName=null,this._padding=null,this._border=null,this._titleIsShown=!1,this._footerIsShown=!1,this._wantedWidth=0,this._wantedHeight=0,this._touchstartX=0,this._touchendX=0,a.detectType&&(this._config.detectType=t.extend({},r.detectType,a.detectType)),a.renderType&&(this._config.renderType=t.extend({},r.renderType,a.renderType)),a.templateSelectors&&(this._config.templateSelectors=t.extend({},r.templateSelectors,a.templateSelectors)),this._modalId="ekkoLightbox-"+Math.floor(1e3*Math.random()+1),this._$element=e instanceof jQuery?e:t(e),this._isBootstrap3=3==t.fn.modal.Constructor.VERSION[0],this._setTemplate(),this._border=this._calculateBorders(),this._padding=this._calculatePadding(),this._galleryName=this._$element.data("gallery"),this._galleryName?this._$galleryItems=t(document.body).find('*[data-gallery="'+this._galleryName+'"]'):this._config.gallerySelector&&(this._$galleryItems=t(document.body).find(this._config.gallerySelector)),this._$galleryItems&&(this._galleryIndex=this._$galleryItems.index(this._$element),t(document).on("keydown.ekkoLightbox",this._navigationalBinder.bind(this)),this._config.showArrows&&this._$galleryItems.length>1)){var o=t(this._config.navOverlay);o.append('<a href="#"'+(this._config.leftArrowClass?' class="'+this._config.leftArrowClass+'"':"")+">"+this._config.leftArrow+'</a><a href="#"'+(this._config.rightArrowClass?' class="'+this._config.rightArrowClass+'"':"")+">"+this._config.rightArrow+"</a>"),this._$lightboxNavContainer.append(o),this._$modalArrows=this._$lightboxNavContainer.find(this._config.templateSelectors.lightboxNavOverlay).first(),this._$lightboxNavContainer.on("click",this._config.templateSelectors.lightboxNavLeftArrow,function(t){return t.preventDefault(),n.navigateLeft()}),this._$lightboxNavContainer.on("click",this._config.templateSelectors.lightboxNavRightArrow,function(t){return t.preventDefault(),n.navigateRight()}),this.updateNavigation()}this._$modal.on("show.bs.modal",this._config.onShow.bind(this)).on("shown.bs.modal",function(){return n._toggleLoading(!0),n._handle(),n._config.onShown.call(n)}).on("hide.bs.modal",this._config.onHide.bind(this)).on("hidden.bs.modal",function(){return(n._galleryName||n._config.gallerySelector)&&(t(document).off("keydown.ekkoLightbox"),t(window).off("resize.ekkoLightbox")),n._$modal.remove(),n._config.onHidden.call(n)}).modal(this._config),t(window).on("resize.ekkoLightbox",function(){n._resize(n._wantedWidth,n._wantedHeight)}),this._$lightboxContainer.on("touchstart",function(){n._touchstartX=event.changedTouches[0].screenX}).on("touchend",function(){n._touchendX=event.changedTouches[0].screenX,n._swipeGesure()})}return n(i,null,[{key:"Default",get:function(){return r}}]),n(i,[{key:"element",value:function(){return this._$element}},{key:"modal",value:function(){return this._$modal}},{key:"navigateTo",value:function(e){if(e<0||e>this._$galleryItems.length-1)return this;this._galleryIndex=e,this.updateNavigation(),this._$element=t(this._$galleryItems.get(this._galleryIndex)),this._handle()}},{key:"navigateLeft",value:function(){if(this._$galleryItems&&1!==this._$galleryItems.length){if(0===this._galleryIndex){if(!this._config.wrapping)return;this._galleryIndex=this._$galleryItems.length-1}else this._galleryIndex--;return this._config.onNavigate.call(this,"left",this._galleryIndex),this.navigateTo(this._galleryIndex)}}},{key:"navigateRight",value:function(){if(this._$galleryItems&&1!==this._$galleryItems.length){if(this._galleryIndex===this._$galleryItems.length-1){if(!this._config.wrapping)return;this._galleryIndex=0}else this._galleryIndex++;return this._config.onNavigate.call(this,"right",this._galleryIndex),this.navigateTo(this._galleryIndex)}}},{key:"updateNavigation",value:function(){if(!this._config.wrapping){var t=this._$lightboxNavContainer.find(this._config.templateSelectors.lightboxNavOverlay);0===this._galleryIndex?t.find(this._config.templateSelectors.lightboxNavLeftArrow).addClass("disabled"):t.find(this._config.templateSelectors.lightboxNavLeftArrow).removeClass("disabled"),this._galleryIndex===this._$galleryItems.length-1?t.find(this._config.templateSelectors.lightboxNavRightArrow).addClass("disabled"):t.find(this._config.templateSelectors.lightboxNavRightArrow).removeClass("disabled")}}},{key:"close",value:function(){return this._$modal.modal("hide")}},{key:"_setTemplate",value:function(){var e=this,i=this._config.template,a=void 0;if(i instanceof jQuery)a=i.clone();else if("string"==typeof i){var n={title:this._config.title||" ",footer:this._config.footer||" "};i=(i=(i=(i=i.replace(/{config\.strings\.(.+?)}/g,function(t,i){return e._config.strings[i]})).replace(/{config\.(.+?)}/g,function(t,e){return n[e]})).replace("{class.hideHeader}",this._config.title||this._config.alwaysShowClose?"":" hide")).replace("{class.hideFooter}",this._config.footer?"":" hide"),a=t(i)}else a=this._config.template.call(this);a.find(this._config.templateSelectors.title).text(this._config.title||" "),a.find(this._config.templateSelectors.footer).text(this._config.footer||" "),this._config_footer||a.find(this._config.templateSelectors.footer).addClass("hide"),this._config.title||this._config.alwaysShowClose||a.find(this._config.templateSelectors.header).addClass("hide");var r=t('<div id="'+this._modalId+'" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true"></div>');r.append(a),t(this._config.doc.body).append(r),this._$modal=t("#"+this._modalId,this._config.doc),this._$modalDialog=this._$modal.find(this._config.templateSelectors.dialog).first(),this._$modalContent=this._$modal.find(this._config.templateSelectors.content).first(),this._$modalBody=this._$modal.find(this._config.templateSelectors.body).first(),this._$modalHeader=this._$modal.find(this._config.templateSelectors.header).first(),this._$modalFooter=this._$modal.find(this._config.templateSelectors.footer).first(),this._$lightboxContainer=this._$modalBody.find(this._config.templateSelectors.lightboxContainer).first(),this._$lightboxNavContainer=this._$modal.find(this._config.templateSelectors.lightboxNavContainer||this._config.templateSelectors.lightboxContainer).first(),this._$lightboxBodyOne=this._$lightboxContainer.find(this._config.templateSelectors.lightboxBodyOne).first(),this._$lightboxBodyTwo=this._$lightboxContainer.find(this._config.templateSelectors.lightboxBodyTwo).first()}},{key:"_navigationalBinder",value:function(t){return 39===(t=t||window.event).keyCode?this.navigateRight():37===t.keyCode?this.navigateLeft():void 0}},{key:"_detectRemoteType",value:function(t,e){e=e||!1;var i=Object.keys(this._config.detectType);if(!e)for(var a=0;a<i.length;a++)if(this._config.detectType[i[a]](t)){e=i[a];break}return"audio"!==e&&"video"!==e||(e="media"),(!e||i.indexOf(e)<0)&&(e="url"),e}},{key:"_getRemoteContentType",value:function(e){return t.ajax({type:"HEAD",url:e,async:!1}).getResponseHeader("Content-Type")}},{key:"_isImage",value:function(t){return t&&t.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)}},{key:"_isMedia",value:function(t){return t&&t.match(/(\.(mp3|mp4|ogg|webm|wav)((\?|#).*)?$)/i)}},{key:"_containerToUse",value:function(){var t=this,e=this._$lightboxBodyTwo,i=this._$lightboxBodyOne;return this._$lightboxBodyTwo.hasClass("in")&&(e=this._$lightboxBodyOne,i=this._$lightboxBodyTwo),i.removeClass("in show"),setTimeout(function(){t._$lightboxBodyTwo.hasClass("in")||t._$lightboxBodyTwo.empty(),t._$lightboxBodyOne.hasClass("in")||t._$lightboxBodyOne.empty()},500),e.addClass("in show"),e}},{key:"_handle",value:function(){var t=this._containerToUse();this._updateTitleAndFooter();var e=this._$element.attr("data-remote")||this._$element.attr("href"),i=this._detectRemoteType(e,this._$element.attr("data-type")||!1),a=Object.keys(this._config.renderType);return a.push("url"),a.indexOf(i)<0?this._error(this._config.strings.type):(this._config.renderType[i].call(this,e,t),this)}},{key:"_getYoutubeId",value:function(t){if(!t)return!1;var e=t.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);return!(!e||11!==e[2].length)&&e[2]}},{key:"_getVimeoId",value:function(t){return!!(t&&t.indexOf("vimeo")>0)&&t}},{key:"_getInstagramId",value:function(t){return!!(t&&t.indexOf("instagram")>0)&&t}},{key:"_toggleLoading",value:function(e){return(e=e||!1)?(this._$modalDialog.css("display","none"),this._$modal.removeClass("in show"),t(".modal-backdrop").append(this._config.loadingMessage)):(this._$modalDialog.css("display","block"),this._$modal.addClass("in show"),t(".modal-backdrop").find(this._config.templateSelectors.lightboxLoader).remove()),this}},{key:"_calculateBorders",value:function(){return{top:this._totalCssByAttribute("border-top-width"),right:this._totalCssByAttribute("border-right-width"),bottom:this._totalCssByAttribute("border-bottom-width"),left:this._totalCssByAttribute("border-left-width")}}},{key:"_calculatePadding",value:function(){return{top:this._totalCssByAttribute("padding-top"),right:this._totalCssByAttribute("padding-right"),bottom:this._totalCssByAttribute("padding-bottom"),left:this._totalCssByAttribute("padding-left")}}},{key:"_totalCssByAttribute",value:function(t){return parseInt(this._$modalDialog.css(t),10)+parseInt(this._$modalContent.css(t),10)+parseInt(this._$modalBody.css(t),10)}},{key:"_updateTitleAndFooter",value:function(){var t=this._$element.data("title")||"",e=this._$element.data("footer")||"";return this._titleIsShown=!1,t||this._config.alwaysShowClose?(this._titleIsShown=!0,this._$modalHeader.css("display","").find(this._config.templateSelectors.title).html(t||" ")):this._$modalHeader.css("display","none"),this._footerIsShown=!1,e?(this._footerIsShown=!0,this._$modalFooter.css("display","").html(e)):this._$modalFooter.css("display","none"),this}},{key:"_showYoutubeVideo",value:function(t,e){var i=this._getYoutubeId(t),a=t.indexOf("&")>0?t.substr(t.indexOf("&")):"",n=this._$element.data("width")||560,r=this._$element.data("height")||n/(560/315);return this._showVideoIframe("//www.youtube.com/embed/"+i+"?badge=0&autoplay=1&html5=1"+a,n,r,e)}},{key:"_showVimeoVideo",value:function(t,e){var i=this._$element.data("width")||500,a=this._$element.data("height")||i/(560/315);return this._showVideoIframe(t+"?autoplay=1",i,a,e)}},{key:"_showInstagramVideo",value:function(t,e){var i=this._$element.data("width")||612,a=i+80;return t="/"!==t.substr(-1)?t+"/":t,e.html('<iframe width="'+i+'" height="'+a+'" src="'+t+'embed/" frameborder="0" allowfullscreen></iframe>'),this._resize(i,a),this._config.onContentLoaded.call(this),this._$modalArrows&&this._$modalArrows.css("display","none"),this._toggleLoading(!1),this}}
1,{key:"_showVideoIframe",value:function(t,e,i,a){return i=i||e,a.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="'+e+'" height="'+i+'" src="'+t+'" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>'),this._resize(e,i),this._config.onContentLoaded.call(this),this._$modalArrows&&this._$modalArrows.css("display","none"),this._toggleLoading(!1),this}},{key:"_showHtml5Media",value:function(t,e){var i=this._getRemoteContentType(t);if(!i)return this._error(this._config.strings.type);var a="";a=i.indexOf("audio")>0?"audio":"video";var n=this._$element.data("width")||560,r=this._$element.data("height")||n/(560/315);return e.html('<div class="embed-responsive embed-responsive-16by9"><'+a+' width="'+n+'" height="'+r+'" preload="auto" autoplay controls class="embed-responsive-item"><source src="'+t+'" type="'+i+'">'+this._config.strings.type+"</"+a+"></div>"),this._resize(n,r),this._config.onContentLoaded.call(this),this._$modalArrows&&this._$modalArrows.css("display","none"),this._toggleLoading(!1),this}},{key:"_loadRemoteContent",value:function(e,i){var a=this,n=this._$element.data("width")||560,r=this._$element.data("height")||560,o=this._$element.data("disableExternalCheck")||!1;return this._toggleLoading(!1),o||this._isExternal(e)?(i.html('<iframe src="'+e+'" frameborder="0" allowfullscreen></iframe>'),this._config.onContentLoaded.call(this)):i.load(e,t.proxy(function(){return a._$element.trigger("loaded.bs.modal")})),this._$modalArrows&&this._$modalArrows.css("display","none"),this._resize(n,r),this}},{key:"_isExternal",value:function(t){var e=t.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);return"string"==typeof e[1]&&e[1].length>0&&e[1].toLowerCase()!==location.protocol||"string"==typeof e[2]&&e[2].length>0&&e[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"),"")!==location.host}},{key:"_error",value:function(t){return console.error(t),this._containerToUse().html(t),this._resize(300,300),this}},{key:"_preloadImageByIndex",value:function(e,i){if(this._$galleryItems){var a=t(this._$galleryItems.get(e),!1);if(void 0!==a){var n=a.attr("data-remote")||a.attr("href");return("image"===a.attr("data-type")||this._isImage(n))&&this._preloadImage(n,!1),i>0?this._preloadImageByIndex(e+1,i-1):void 0}}}},{key:"_preloadImage",value:function(e,i){var a=this;i=i||!1;var n=new Image;if(i){var r=setTimeout(function(){i.append(a._config.loadingMessage)},200);n.onload=function(){r&&clearTimeout(r),r=null;var e=t("<img />");return e.attr("src",n.src),e.addClass("img-fluid"),e.css("width","100%"),i.html(e),a._$modalArrows&&a._$modalArrows.css("display",""),a._resize(n.width,n.height),a._toggleLoading(!1),a._config.onContentLoaded.call(a)},n.onerror=function(){return a._toggleLoading(!1),a._error(a._config.strings.fail+" "+e)}}return n.src=e,n}},{key:"_swipeGesure",value:function(){return this._touchendX<this._touchstartX?this.navigateRight():this._touchendX>this._touchstartX?this.navigateLeft():void 0}},{key:"_resize",value:function(e,i){i=i||e,this._wantedWidth=e,this._wantedHeight=i;var a=e/i,n=this._padding.left+this._padding.right+this._border.left+this._border.right,r=this._config.doc.body.clientWidth>575?20:0,o=this._config.doc.body.clientWidth>575?0:20,l=Math.min(e+n,this._config.doc.body.clientWidth-r,this._config.maxWidth);e+n>l?(i=(l-n-o)/a,e=l):e+=n;var s=0,d=0;this._footerIsShown&&(d=this._$modalFooter.outerHeight(!0)||55),this._titleIsShown&&(s=this._$modalHeader.outerHeight(!0)||67);var h=this._padding.top+this._padding.bottom+this._border.bottom+this._border.top,c=parseFloat(this._$modalDialog.css("margin-top"))+parseFloat(this._$modalDialog.css("margin-bottom")),g=Math.min(i,t(window).height()-h-c-s-d,this._config.maxHeight-h-s-d);i>g&&(e=Math.ceil(g*a)+n),this._$lightboxContainer.css("height",g),this._$modalDialog.css("flex",1).css("maxWidth",e);var m=this._$modal.data("bs.modal");if(m)try{m._handleUpdate()}catch(t){m.handleUpdate()}return this}}],[{key:"_jQueryInterface",value:function(){var n=this,o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},l=t.extend({},i.Default,t.fn[e].defaults);return t.fn[e].defaults.detectType&&(l.detectType=t.extend({},r.detectType,t.fn[e].defaults.detectType)),t.fn[e].defaults.renderType&&(l.renderType=t.extend({},r.renderType,t.fn[e].defaults.renderType)),t.fn[e].defaults.templateSelectors&&(l.templateSelectors=t.extend({},r.templateSelectors,t.fn[e].defaults.templateSelectors)),this.each(function(){var e=t(n),r=t.extend({},l,e.data(),"object"===(void 0===o?"undefined":a(o))&&o);new i(n,r)})}}]),i}();return t.fn[e]=o._jQueryInterface,t.fn[e].Constructor=o,t.fn[e].noConflict=function(){return t.fn[e]=i,o._jQueryInterface},t.fn[e].defaults={},o}(jQuery);e.default=r}
1,function(t,e,i){},,function(t,e){t.exports='<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <title>Bootstrap Lightbox</title>\r\n\r\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n\r\n <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">\r\n <link href="main.css" rel="stylesheet">\r\n\r\n \x3c!-- for documentation only --\x3e\r\n <style type="text/css">\r\n div.row > div > div.row {\r\n margin-bottom: 15px;\r\n }\r\n\r\n html {\r\n background-color: #02709e;\r\n }\r\n body {\r\n background: #fefefe;\r\n padding-bottom: 50px;\r\n }\r\n\r\n div.top-container {\r\n padding-top:100px;\r\n background-color: #02709e;\r\n color:#ccc;\r\n }\r\n div.top-container h1 {\r\n color:white;\r\n }\r\n div.top-container a {\r\n color:#ccc;\r\n border-bottom:1px dotted white;\r\n }\r\n div.top-container a:hover {\r\n color: white;\r\n cursor:pointer;\r\n border-bottom:1px solid white;\r\n text-decoration: none;\r\n }\r\n div.top-header {\r\n margin-bottom:100px;\r\n }\r\n\r\n h2 {\r\n background-color:#02709e;\r\n color:white;\r\n display:inline-block;\r\n padding:6px;\r\n margin-top:100px;\r\n }\r\n\r\n h3 {\r\n padding-bottom:5px;\r\n margin-bottom:10px;\r\n border-bottom:1px solid #f2f2f2;\r\n margin-top: 50px;\r\n }\r\n\r\n h4:not(.modal-title) {\r\n margin-top:25px;\r\n }\r\n\r\n figure {\r\n position: relative;\r\n }\r\n\r\n figure figcaption {\r\n font-size: 22px;\r\n color: #fff;\r\n text-decoration: none;\r\n bottom: 10px;\r\n right: 20px;\r\n position: absolute;\r\n background-color: #000;\r\n }\r\n\t\t\tcode[data-code], code.block-code {\r\n display:block;\r\n overflow:scroll;\r\n font-size:12px;\r\n\t\t\t\twhite-space: pre;\r\n\t\t\t}\r\n\r\n table {\r\n font-size:12px;\r\n }\r\n .footer {\r\n text-align: center;\r\n }\r\n .footer span {\r\n margin-top:100px;\r\n font-size:12px;\r\n background-color:#02709e;\r\n color:white;\r\n display:inline-block;\r\n padding:6px;\r\n }\r\n .footer span a {\r\n color:#ccc;\r\n border-bottom:1px dotted white;\r\n }\r\n .footer span a:hover {\r\n cursor:pointer;\r\n color: white;\r\n border-bottom:1px solid white;\r\n text-decoration: none;\r\n }\r\n a.anchorjs-link {\r\n color:black;\r\n }\r\n a.anchorjs-link:hover {\r\n color:#02709e;\r\n text-decoration: none;\r\n }\r\n </style>\r\n </head>\r\n <body>\r\n\r\n <div class="top-container">\r\n\r\n <div class="container">\r\n <div class="row justify-content-center">\r\n <div class="col-md-10">\r\n\r\n <div class="top-header">\r\n <h1>Lightbox for Bootstrap</h1>\r\n <p class="lead">Utilizes Bootstraps modal plugin to implement a lightbox gallery - <a href="https://github.com/ashleydw/lightbox">GitHub</a></p>\r\n <div class="text-center">\r\n <iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100\t" height="20"></iframe>\r\n <iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>\r\n <iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="160" height="20"></iframe>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class="container">\r\n <div class="row justify-content-center">\r\n <div class="col-md-10">\r\n\r\n <h2>Install</h2>\r\n <p>Grab the latest CSS / JS files from the CDN: <a href="https://cdnjs.com/libraries/ekko-lightbox">https://cdnjs.com/libraries/ekko-lightbox</a>.</p>\r\n <p>Or, with bower: <code>bower install ekko-lightbox --save</code></p>\r\n <p>Or, download the files directly: <a href="https://github.com/ashleydw/lightbox/tree/master/dist">https://github.com/ashleydw/lightbox/tree/master/dist</a></p>\r\n <br /><br />\r\n <p>Place this near on your page, probably near the end of the body section:</p>\r\n<code class="block-code">$(document).on(\'click\', \'[data-toggle="lightbox"]\', function(event) {\r\n event.preventDefault();\r\n $(this).ekkoLightbox();\r\n});</code>\r\n <br /><br />\r\n <p>Then simply add <code>data-toggle</code> to your anchor tags.</p>\r\n<code class="block-code"><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">\r\n <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">\r\n</a>\r\n</code>\r\n <br /><br />\r\n <p>Obviously, you need Bootstrap. Made for Bootstrap v4 but *should* work with v3.</p>\r\n\r\n <h2>Options</h2>\r\n <p>Options are passed down to the modal object so you can also use any of the <a href="http://getbootstrap.com/javascript/#modals-usage">original modal options</a>.</p>\r\n <p>Pass the options to the calling function as an object, or set defaults using <code>$.fn.ekkoLightbox.defaults</code> (excluding modal default options, notable: title, footer, remote)</p>\r\n <div class="table-responsive">\r\n <table class="table table-bordered">\r\n <thead>\r\n <tr>\r\n <th>
1Name</th>\r\n <th>type</th>\r\n <th>default</th>\r\n <th>description</th>\r\n <th>data-*</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>leftArrow / rightArrow</td>\r\n <td>html</td>\r\n <td><code>❮</code> / <code>❯</code></td>\r\n <td>HTML for the arrows</td>\r\n <td></td>\r\n </tr>\r\n <tr>\r\n <td>wrapping</td>\r\n <td>boolean</td>\r\n <td><code>true</code></td>\r\n <td>Whether the gallery should loop or not</td>\r\n <td></td>\r\n </tr>\r\n <tr>\r\n <td>width / height</td>\r\n <td>integer</td>\r\n <td></td>\r\n <td>Force the width / height</td>\r\n <td><code>data-(width|height)="[0-9]+"</code></td>\r\n </tr>\r\n <tr>\r\n <td>maxWidth / maxHeight</td>\r\n <td>integer</td>\r\n <td>9999</td>\r\n <td>Limit the container width / height</td>\r\n <td><code>data-(max-width|max-height)="[0-9]+"</code></td>\r\n </tr>\r\n <tr>\r\n <td>alwaysShowClose</td>\r\n <td>boolean</td>\r\n <td><code>false</code></td>\r\n <td>Always show the close button, even if no title is present</td>\r\n <td></td>\r\n </tr>\r\n <tr>\r\n <td>loadingMessage</td>\r\n <td>html</td>\r\n <td>A fancy loader</td>\r\n <td>HTML injected for loading</td>\r\n <td></td>\r\n </tr>\r\n <tr>\r\n <td>showArrows</td>\r\n <td>bool</td>\r\n <td>true</td>\r\n <td>Disable the navigation overlay</td>\r\n <td></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <code class="block-code">$(this).ekkoLightbox({\r\n alwaysShowClose: true,\r\n onShown: function() {\r\n console.log(\'Checking our the events huh?\');\r\n },\r\n onNavigate: function(direction, itemIndex)\r\n console.log(\'Navigating \'+direction+\'. Current item: \'+itemIndex);\r\n }\r\n ...\r\n});</code>\r\n <br /><br />\r\n <p>The following options are specified per element.</p>\r\n <div class="table-responsive">\r\n <table class="table table-bordered">\r\n <thead>\r\n <tr>\r\n <th>Name</th>\r\n <th>Description</th>\r\n <th>Example</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>remote</td>\r\n <td>If you can\'t/don\'t want to set the href property of an element</td>\r\n <td><code>data-remote="http://www...."</code></td>\r\n </tr>\r\n <tr>\r\n <td>gallery</td>\r\n <td>For grouping elements</td>\r\n <td><code>data-gallery="gallery-name"</code></td>\r\n </tr>\r\n <tr>\r\n <td>type</td>\r\n <td>Force the lightbox into image/YouTube mode.</td>\r\n <td><code>data-type="(image|youtube|vimeo)"</code></td>\r\n </tr>\r\n <tr>\r\n <td>disable-external-check</td>\r\n <td>Force the lightbox loading into an iframe.</td>\r\n <td><code>data-disable-external-check="(true|false)"</code></td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n <code class="block-code"><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" data-type="image">\r\n <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">\r\n</a></code>\r\n\r\n <h2>Events</h2>\r\n <p>Events can be hooked into, set the the same as options above.</p>\r\n <div class="table-responsive">\r\n <table class="table table-bordered">\r\n <thead>\r\n <tr>\r\n <th>
1Name</th>\r\n <th>Description</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr>\r\n <td>onContentLoaded</td>\r\n <td>Fired when content (image/video/remote page etc) has been fully loaded.</td>\r\n </tr>\r\n <tr>\r\n <td>onNavigate</td>\r\n <td>Fired before navigating a gallery.</td>\r\n </tr>\r\n <tr>\r\n <td>onShow/onShown/onHide/onHidden</td>\r\n <td>Inherited from the bootstrap modal.</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n\r\n <h2>Examples</h2>\r\n <p>Thanks to <a href="https://unsplash.it/">https://unsplash.it/</a> for the images.</p>\r\n <ul>\r\n <li><a href="#single-image">Single Image</a></li>\r\n <li><a href="#image-gallery">Image Gallery</a></li>\r\n <li><a href="#limit-size">Limit Image Size</a></li>\r\n <li><a href="#videos">Videos</a></li>\r\n <li><a href="#videos-gallery">Gallery of Videos</a></li>\r\n <li><a href="#mixed-gallery">Mixed gallery</a></li>\r\n <li><a href="#programatically-call">Programmatically call</a></li>\r\n <li><a href="#data-remote">Via <code>data-remote</code></a></li>\r\n <li><a href="#force-type">Force type</a></li>\r\n <li><a href="#hidden-elements">Hidden elements</a></li>\r\n <li><a href="#remote-content">Remote content</a></li>\r\n <li><a href="#no-wrapping">Disable wrapping</a></li>\r\n <li><a href="#template">Template</a></li>\r\n </ul>\r\n\r\n <h3 id="single-image">Single Image</h3>\r\n <p>Note: uses modal plugin title option via <code>data-title</code>, and the custom footer tag using <code>data-footer</code></p>\r\n <div class="row justify-content-center">\r\n <div class="col-sm-3" data-code="example-1">\r\n <a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" data-title="A random title" data-footer="A custom footer text">\r\n <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n <code class="html" data-code="example-1"></code>\r\n\r\n <h3 id="image-gallery">Image Gallery</h3>\r\n <p>Galleries are created by adding the <code>data-gallery</code> attribute.</p>\r\n <div data-code="example-2">\r\n <div class="row justify-content-center">\r\n <div class="col-md-8">\r\n <div class="row">\r\n <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">\r\n </a>\r\n </div>\r\n <div class="row">\r\n <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <code class="html" data-code="example-2"></code>\r\n\r\n <h3 id="limit-size">Limit Image Size</h3>\r\n <p>Note: uses modal plugin limiting via <code>data-max-width</code> (or <code>data-max-height</code>)</p>\r\n <div class="row justify-content-center">\r\n <div class="col-sm-3" data-code="example-10">\r\n <a href="https://unsplash.it/1200/768.jpg?image=250" data-toggle="lightbox" data-max-width="600">\r\n <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n <code class="html" data-code="example-10"></code>\r\n\r\n <h3 id="videos">Videos</h3>\r\n <h4>YouTube</h4>\r\n <p>You can use various YouTube URL formats, the regex used is: <code>/^.*(youtu.be\\/|v\\/|u\\/\\w\\/|embed\\/|watch\\?v=|\\&v=)([^#\\&\\?]*).*/</code></p>\r\n <div data-code="example-3">\r\n <p><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" data-toggle="lightbox">Justin Bieber - Love Yourself</a></p>\r\n <p><a href="http://youtu.be/b0jqPvpn3sY" data-toggle="lightbox">Tame Impala - Elephant (using youtu.be link)</a></p>\r\n <p><a href="https://www.youtube.com/watch?v=oyEuk8j8imI&rel=0" data-toggle="lightbox">Justin Bieber - Love Yourself</a> (suppress related videos with <code>&rel=0</code>)</p>\r\n </div>\r\n <code data-code="example-3" data-trim="all"></code>\r\n <h4>Vimeo</h4>\r\n <p>You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.</p>\r\n <div data-code="example-3-b">\r\n <p><a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox">
1City Lights - from Colin Rich (using embed link)</a></p>\r\n <p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with reccommended <code>data-remote</code> setting)</p>\r\n </div>\r\n <code data-code="example-3-b" data-trim="all"></code>\r\n <h4>Instagram</h4>\r\n <p></p>\r\n <div data-code="example-3-c">\r\n <p><a href="http://instagram.com/p/BRCYe_wD9pV/" data-toggle="lightbox" data-title="Plug for our new service">Instagram</a></p>\r\n <p>This also works with photos: <a href="//instagram.com/p/BRCdyxnjBsA/" data-toggle="lightbox">Instagram</a></p>\r\n </div>\r\n <code data-code="example-3-c" data-trim="all"></code>\r\n <h4>Forcing width</h4>\r\n <p>Set the width of the video</p>\r\n <div data-code="example-3-d">\r\n <p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox">Taylor Swift - Blank Space (standard)</a></p>\r\n <p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox" data-width="640">Taylor Swift - Blank Space (640 x 360)</a></p>\r\n <p><a href="https://www.youtube.com/watch?v=e-ORhEE9VVg" data-toggle="lightbox" data-width="1280">Taylor Swift - Blank Space (1280 x 780)</a></p>\r\n </div>\r\n <code data-code="example-3-d" data-trim="all"></code>\r\n\r\n \x3c!-- i hope your coworkers think you\'re listening to some justin and taylor --\x3e\r\n\r\n <h3 id="videos-gallery">Gallery of Videos</h3>\r\n <div class="row justify-content-center">\r\n <div class="col-md-10">\r\n <div class="row" data-code="example-4">\r\n <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">\r\n <img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">\r\n </a>\r\n <a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">\r\n <img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">\r\n </a>\r\n <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">\r\n <img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n <code data-code="example-4"></code>\r\n\r\n <h3 id="mixed-gallery">Mixed gallery</h3>\r\n <div class="row justify-content-center">\r\n <div class="col-md-10">\r\n <div class="row flex-items-xs-center" data-code="example-5">\r\n <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">\r\n <img src="http://i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=257" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=257" class="img-fluid">\r\n </a>\r\n <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">\r\n <img src="http://b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n <code data-code="example-5"></code>\r\n\r\n <h3 id="programatically-call">Programmatically call</h3>\r\n <p>These two examples are opened via the JavaScript at the bottom of the source.</p>\r\n <div class="row justify-content-center">\r\n <div class="col-md-10">\r\n <div class="row" data-code="example-6">\r\n <a href="https://unsplash.it/1200/768.jpg?image=258" id="open-image" class="col-6">\r\n <img src="https://unsplash.it/600.jpg?image=258" class="img-fluid">\r\n </a>\r\n <a href="http://youtu.be/iQ4D273C7Ac" id="open-youtube" class="col-6">\r\n <img src="http://i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n <code data-code="example-6"></code>\r\n <code class="block-code">$('#open-image').click(function (e) {\r\n e.preventDefault();\r\n $(this).ekkoLightbox();\r\n});\r\n$('#open-youtube').click(function (e) {\r\n e.preventDefault();\r\n $(this).ekkoLightbox();\r\n});</code>\r\n\r\n <h3 id="data-remote">Via <code>data-remote</code></h3>\r\n <p>Neither of these are <code><a /></code> tags, so both rely on the <code>data-remote</code> attribute.</p>\r\n <div class="row justify-content-center">\r\n <div class="col-md-10">\r\n <div class="row" data-code="example-7" style="height:240px">\r\n <img src="https://unsplash.it/600.jpg?image=259" data-toggle="lightbox" data-remote="https://unsplash.it/1200/768.jpg?image=259" class="img-fluid col-6">\r\n <img src="http://i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" data-toggle="lightbox" data-remote="https://www.youtube.com/embed/b0jqPvpn3sY" class="img-fluid col-6">\r\n </div>\r\n </div>\r\n </div>\r\n <code data-code="example-7"></code>\r\n\r\n <h3 id="force-type">Force type</h3>\r\n <p>If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what <code>data-type</code> it is.</p>\r\n <p>Current allowed types are: <code>[\'image\', \'youtube\', \'vimeo\', \'instagram\', \'video\', \'url\']</code></p>\r\n <div data-code="example-8">\r\n <p><a href="https://unsplash.it/1200/768?image=260" data-title="Force image display" data-footer="The remote of this modal has no extension (https://unsplash.it/1200/768?image=260) but works because the type is forced." data-toggle="lightbox" data-type="image">Click here for an image, but with no extension.</a></p>\r\n <p><a href="https://unsplash.it/1200/768?image=261" data-footer="Without the type forced, the lightbox will remote load the content" data-toggle="lightbox">This link is missing the type attribute, and will iframe the image.</a></p>\r\n <p><a href="http://www.youtube.com/watch?v=b0jqPvpn3sY" data-toggle="lightbox" data-type="image">This link is linking to a YouTube video, but forcing an image.</a></p>\r\n </div>\r\n <code data-code="example-8"></code>\r\n\r\n <h3 id="hidden-elements">Hidden elements</h3>\r\n <p>Facebook style, only show a few images but have a large gallery</p>\r\n <div class="row justify-content-center" data-code="example-9">\r\n <a href="https://unsplash.it/1200/768.jpg?image=263" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">\r\n <img src="https://unsplash.it/600.jpg?image=263" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=264" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">\r\n <img src="https://unsplash.it/600.jpg?image=264" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=265" data-toggle="lightbox" data-gallery="hidden-images" class="col-4">\r\n <img src="https://unsplash.it/600.jpg?image=265" class="img-fluid">\r\n </a>\r\n \x3c!-- elements not showing, use data-remote --\x3e\r\n <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=264" data-title="Hidden item 1"></div>\r\n <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>\r\n <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=265" data-title="Hidden item 3"></div>\r\n <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=266" data-title="Hidden item 4"></div>\r\n <div data-toggle="lightbox" data-gallery="hidden-images" data-remote="https://unsplash.it/1200/768.jpg?image=267" data-title="Hidden item 5"></div>\r\n </div>\r\n <code data-code="example-9"></code>\r\n\r\n <h3 id="remote-content">Remote content</h3>\r\n\t\t\t\t\t<p>Given a URL, that is not an image or video (including unforced types), load the content using an iFrame.</p>\r\n\t\t\t\t\t<div class="row justify-content-center">\r\n <div class="col-md-10" data-code="example-10">\r\n <div class="row">\r\n <p class="col-sm-3"><a href="http://getbootstrap.com" data-title="Bootstrap" data-width="1200" data-toggle="lightbox" data-gallery="remoteload">Bootstrap Docs</a></p>\r\n </div>\r\n </div>\r\n </div>\r\n <code data-code="example-10"></code>\r\n\r\n\r\n <h3 id="no-wrapping">Disable wrapping</h3>\r\n <p>To disable wrapping, set `wrapping` to false when creating a gallery.</p>\r\n <div>\r\n <div class="row justify-content-center">\r\n <div class="col-md-8">\r\n <div class="row">\r\n <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery-11" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery-11" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery-11" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">\r\n </a>\r\n </div>\r\n <div class="row">\r\n <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery-11" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery-11" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery-11" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <code class="html" data-code>$(this).ekkoLightbox({ wrapping: false });</code>\r\n \r\n <h3 id="template">Templates</h3>\r\n <p>You can define a template for the lightbox programmatically.</p>\r\n <div>\r\n <div class="row justify-content-center">\r\n <div class="col-md-8">\r\n <div class="row">\r\n <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery-12" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery-12" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery-12" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">\r\n </a>\r\n </div>\r\n <div class="row">\r\n <a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery-12" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery-12" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">\r\n </a>\r\n <a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery-12" class="col-sm-4">\r\n <img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <code class="html" data-code>$(this).ekkoLightbox({\r\n templat
1e: function() {\r\n var h4 = \'<div class="h4 modal-title">\' + (this._config.title || " ") + \'</div>\'\r\n var btn = \'<button type="button" class="close" data-dismiss="modal" aria-label="\' + this._config.strings.close + \'"><span aria-hidden="true">×</span></button>\'\r\n\r\n var header = \'<div class="modal-header\' + (this._config.title || this._config.alwaysShowClose ? \'\' : \' hide\') + \'">\'\r\n header+= (this._isBootstrap3 ? btn+h4 : h4+btn) + \'</div>\'\r\n var footer = \'<div class="modal-footer\' + (this._config.footer ? \'\' : \' hide\') + \'">\' + (this._config.footer || " ") + \'</div>\'\r\n var body = \'<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>\'\r\n var dialog = \'<div class="modal-dialog" role="document"><div class="modal-content">\' + header + body + footer + \'</div></div>\'\r\n return $(dialog)\r\n }\r\n});</code>\r\n\r\n <p class="footer"><span>Built by me, <a href="https://ashleyd.ws">ashleydw</a></span></p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"><\/script>\r\n <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"><\/script>\r\n <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"><\/script>\r\n <script src="main.js"><\/script>\r\n\r\n \x3c!-- for documentation only --\x3e\r\n <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"><\/script>\r\n <script type="text/javascript">\r\n $(document).ready(function ($) {\r\n // delegate calls to data-toggle="lightbox"\r\n $(document).on(\'click\', \'[data-toggle="lightbox"]:not([data-gallery="navigateTo"]):not([data-gallery="example-gallery-11"]):not([data-gallery="example-gallery-12"])\', function(event) {\r\n event.preventDefault();\r\n return $(this).ekkoLightbox({\r\n onShown: function() {\r\n if (window.console) {\r\n return console.log(\'Checking our the events huh?\');\r\n }\r\n },\r\n\t\t\t\t\t\tonNavigate: function(direction, itemIndex) {\r\n if (window.console) {\r\n return console.log(\'Navigating \'+direction+\'. Current item: \'+itemIndex);\r\n }\r\n\t\t\t\t\t\t}\r\n });\r\n });\r\n\r\n // disable wrapping\r\n $(document).on(\'click\', \'[data-toggle="lightbox"][data-gallery="example-gallery-11"]\', function(event) {\r\n event.preventDefault();\r\n return $(this).ekkoLightbox({\r\n wrapping: false\r\n });\r\n });\r\n \r\n // templates\r\n $(document).on(\'click\', \'[data-toggle="lightbox"][data-gallery="example-gallery-12"]\', function(event) {\r\n event.preventDefault();\r\n return $(this).ekkoLightbox({\r\n template: function() {\r\n var h4 = \'<div class="h4 modal-title">\' + (this._config.title || " ") + \'</div>\'\r\n var btn = \'<button type="button" class="close" data-dismiss="modal" aria-label="\' + this._config.strings.close + \'"><span aria-hidden="true">×</span></button>\'\r\n\r\n var header = \'<div class="modal-header\' + (this._config.title || this._config.alwaysShowClose ? \'\' : \' hide\') + \'">\'\r\n header+= (this._isBootstrap3 ? btn+h4 : h4+btn) + \'</div>\'\r\n var footer = \'<div class="modal-footer\' + (this._config.footer ? \'\' : \' hide\') + \'">\' + (this._config.footer || " ") + \'</div>\'\r\n var body = \'<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>\'\r\n var dialog = \'<div class="modal-dialog" role="document"><div class="modal-content">\' + header + body + footer + \'</div></div>\'\r\n return $(dialog)\r\n }\r\n });\r\n });\r\n\r\n //Programmatically call\r\n $(\'#open-image\').click(function (e) {\r\n e.preventDefault();\r\n $(this).ekkoLightbox();\r\n });\r\n $(\'#open-youtube\').click(function (e) {\r\n e.preventDefault();\r\n $(this).ekkoLightbox();\r\n });\r\n\r\n\t\t\t\t// navigateTo\r\n $(document).on(\'click\', \'[data-toggle="lightbox"][data-gallery="navigateTo"]\', function(event) {\r\n event.preventDefault();\r\n\r\n return $(this).ekkoLightbox({\r\n onShown: function() {\r\n\r\n\t\t\t\t\t\t\tthis.modal().on(\'click\', \'.modal-footer a\', function(e) {\r\n\r\n\t\t\t\t\t\t\t\te.preventDefault();\r\n\t\t\t\t\t\t\t\tthis.navigateTo(2);\r\n\r\n }.bind(this));\r\n\r\n }\r\n });\r\n });\r\n\r\n\r\n /**\r\n * Documentation specific - ignore this\r\n */\r\n anchors.options.placement = \'left\';\r\n anchors.add(\'h3\');\r\n $(\'code[data-code]\').each(function() {\r\n\r\n var $code = $(this),\r\n $pair = $(\'div[data-code="\'+$code.data(\'code\')+\'"]\');\r\n\r\n $code.hide();\r\n var text = $code.text($pair.html()).html().trim().split("\\n");\r\n var indentLength = text[text.length - 1].match(/^\\s+/)\r\n indentLength = indentLength ? indentLength[0].length : 24;\r\n var indent = \'\';\r\n for(var i = 0; i < indentLength; i++)\r\n indent += \' \';\r\n if($code.data(\'trim\') == \'all\') {\r\n for (var i = 0; i < text.length; i++)\r\n text[i] = text[i].trim();\r\n } else {\r\n for (var i = 0; i < text.length; i++)\r\n text[i] = text[i].replace(indent, \' \').replace(\' \', \'\');\r\n }\r\n text = text.join("\\n");\r\n $code.html(text).show();\r\n\r\n });\r\n });\r\n <\/script>\r\n </body>\r\n</html>\r\n'}]); 2//# sourceMappingURL=ekko-lightbox.min.js
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.