use bootstrap 4 theme since there are submenus

content/extra/jquery.mousewheel.min.js

@@ -0,0 +1,8 @@
+/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Version: 3.1.12
+ *
+ * Requires: jQuery 1.2.2+
+ */
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});

content/extra/lg-autoplay.js

@@ -0,0 +1,216 @@
+/**!
+ * lg-autoplay.js | 1.0.0 | October 5th 2016
+ * http://sachinchoolur.github.io/lg-autoplay.js
+ * Copyright (c) 2016 Sachin N; 
+ * @license GPLv3 
+ */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgAutoplay = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define([], factory);
+    } else if (typeof exports !== "undefined") {
+        factory();
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory();
+        global.lgAutoplay = mod.exports;
+    }
+})(this, function () {
+    'use strict';
+
+    var _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            for (var key in source) {
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    };
+
+    var autoplayDefaults = {
+        autoplay: false,
+        pause: 5000,
+        progressBar: true,
+        fourceAutoplay: false,
+        autoplayControls: true,
+        appendAutoplayControlsTo: '.lg-toolbar'
+    };
+
+    /**
+     * Creates the autoplay plugin.
+     * @param {object} element - lightGallery element
+     */
+    var Autoplay = function Autoplay(element) {
+
+        this.el = element;
+
+        this.core = window.lgData[this.el.getAttribute('lg-uid')];
+
+        // Execute only if items are above 1
+        if (this.core.items.length < 2) {
+            return false;
+        }
+
+        this.core.s = _extends({}, autoplayDefaults, this.core.s);
+        this.interval = false;
+
+        // Identify if slide happened from autoplay
+        this.fromAuto = true;
+
+        // Identify if autoplay canceled from touch/drag
+        this.canceledOnTouch = false;
+
+        // save fourceautoplay value
+        this.fourceAutoplayTemp = this.core.s.fourceAutoplay;
+
+        // do not allow progress bar if browser does not support css3 transitions
+        if (!this.core.doCss()) {
+            this.core.s.progressBar = false;
+        }
+
+        this.init();
+
+        return this;
+    };
+
+    Autoplay.prototype.init = function () {
+        var _this = this;
+
+        // append autoplay controls
+        if (_this.core.s.autoplayControls) {
+            _this.controls();
+        }
+
+        // Create progress bar
+        if (_this.core.s.progressBar) {
+            _this.core.outer.querySelector('.lg').insertAdjacentHTML('beforeend', '<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
+        }
+
+        // set progress
+        _this.progress();
+
+        // Start autoplay
+        if (_this.core.s.autoplay) {
+            _this.startlAuto();
+        }
+
+        // cancel interval on touchstart and dragstart
+        utils.on(_this.el, 'onDragstart.lgtm touchstart.lgtm', function () {
+            if (_this.interval) {
+                _this.cancelAuto();
+                _this.canceledOnTouch = true;
+            }
+        });
+
+        // restore autoplay if autoplay canceled from touchstart / dragstart
+        utils.on(_this.el, 'onDragend.lgtm touchend.lgtm onSlideClick.lgtm', function () {
+            if (!_this.interval && _this.canceledOnTouch) {
+                _this.startlAuto();
+                _this.canceledOnTouch = false;
+            }
+        });
+    };
+
+    Autoplay.prototype.progress = function () {
+
+        var _this = this;
+        var _progressBar;
+        var _progress;
+
+        utils.on(_this.el, 'onBeforeSlide.lgtm', function () {
+
+            // start progress bar animation
+            if (_this.core.s.progressBar && _this.fromAuto) {
+                _progressBar = _this.core.outer.querySelector('.lg-progress-bar');
+                _progress = _this.core.outer.querySelector('.lg-progress');
+                if (_this.interval) {
+                    _progress.removeAttribute('style');
+                    utils.removeClass(_progressBar, 'lg-start');
+                    setTimeout(function () {
+                        utils.setVendor(_progress, 'Transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
+                        utils.addClass(_progressBar, 'lg-start');
+                    }, 20);
+                }
+            }
+
+            // Remove setinterval if slide is triggered manually and fourceautoplay is false
+            if (!_this.fromAuto && !_this.core.s.fourceAutoplay) {
+                _this.cancelAuto();
+            }
+
+            _this.fromAuto = false;
+        });
+    };
+
+    // Manage autoplay via play/stop buttons
+    Autoplay.prototype.controls = function () {
+        var _this = this;
+        var _html = '<span class="lg-autoplay-button lg-icon"></span>';
+
+        // Append autoplay controls
+        _this.core.outer.querySelector(this.core.s.appendAutoplayControlsTo).insertAdjacentHTML('beforeend', _html);
+
+        utils.on(_this.core.outer.querySelector('.lg-autoplay-button'), 'click.lg', function () {
+            if (utils.hasClass(_this.core.outer, 'lg-show-autoplay')) {
+                _this.cancelAuto();
+                _this.core.s.fourceAutoplay = false;
+            } else {
+                if (!_this.interval) {
+                    _this.startlAuto();
+                    _this.core.s.fourceAutoplay = _this.fourceAutoplayTemp;
+                }
+            }
+        });
+    };
+
+    // Autostart gallery
+    Autoplay.prototype.startlAuto = function () {
+        var _this = this;
+
+        utils.setVendor(_this.core.outer.querySelector('.lg-progress'), 'Transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
+        utils.addClass(_this.core.outer, 'lg-show-autoplay');
+        utils.addClass(_this.core.outer.querySelector('.lg-progress-bar'), 'lg-start');
+
+        _this.interval = setInterval(function () {
+            if (_this.core.index + 1 < _this.core.items.length) {
+                _this.core.index++;
+            } else {
+                _this.core.index = 0;
+            }
+
+            _this.fromAuto = true;
+            _this.core.slide(_this.core.index, false, false);
+        }, _this.core.s.speed + _this.core.s.pause);
+    };
+
+    // cancel Autostart
+    Autoplay.prototype.cancelAuto = function () {
+        clearInterval(this.interval);
+        this.interval = false;
+        if (this.core.outer.querySelector('.lg-progress')) {
+            this.core.outer.querySelector('.lg-progress').removeAttribute('style');
+        }
+
+        utils.removeClass(this.core.outer, 'lg-show-autoplay');
+        utils.removeClass(this.core.outer.querySelector('.lg-progress-bar'), 'lg-start');
+    };
+
+    Autoplay.prototype.destroy = function () {
+
+        this.cancelAuto();
+        if (this.core.outer.querySelector('.lg-progress-bar')) {
+            this.core.outer.querySelector('.lg-progress-bar').parentNode.removeChild(this.core.outer.querySelector('.lg-progress-bar'));
+        }
+    };
+
+    window.lgModules.autoplay = Autoplay;
+});
+
+},{}]},{},[1])(1)
+});

content/extra/lg-fullscreen.js

@@ -0,0 +1,131 @@
+/**!
+ * lg-fullscreen.js | 1.1.0 | February 23rd 2019
+ * http://sachinchoolur.github.io/lg-fullscreen.js
+ * Copyright (c) 2016 Sachin N; 
+ * @license GPLv3 
+ */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgFullscreen = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define([], factory);
+    } else if (typeof exports !== "undefined") {
+        factory();
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory();
+        global.lgFullscreen = mod.exports;
+    }
+})(this, function () {
+    'use strict';
+
+    var _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            for (var key in source) {
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    };
+
+    var fullscreenDefaults = {
+        fullScreen: true
+    };
+
+    function isFullScreen() {
+        return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+    }
+
+    var Fullscreen = function Fullscreen(element) {
+
+        this.el = element;
+
+        this.core = window.lgData[this.el.getAttribute('lg-uid')];
+        this.core.s = _extends({}, fullscreenDefaults, this.core.s);
+
+        this.init();
+
+        return this;
+    };
+
+    Fullscreen.prototype.init = function () {
+        var fullScreen = '';
+        if (this.core.s.fullScreen) {
+
+            // check for fullscreen browser support
+            if (!document.fullscreenEnabled && !document.webkitFullscreenEnabled && !document.mozFullScreenEnabled && !document.msFullscreenEnabled) {
+                return;
+            } else {
+                fullScreen = '<span class="lg-fullscreen lg-icon"></span>';
+                this.core.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', fullScreen);
+                this.fullScreen();
+            }
+        }
+    };
+
+    Fullscreen.prototype.requestFullscreen = function () {
+        var el = document.documentElement;
+        if (el.requestFullscreen) {
+            el.requestFullscreen();
+        } else if (el.msRequestFullscreen) {
+            el.msRequestFullscreen();
+        } else if (el.mozRequestFullScreen) {
+            el.mozRequestFullScreen();
+        } else if (el.webkitRequestFullscreen) {
+            el.webkitRequestFullscreen();
+        }
+    };
+
+    Fullscreen.prototype.exitFullscreen = function () {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+    };
+
+    // https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
+    Fullscreen.prototype.fullScreen = function () {
+        var _this = this;
+
+        utils.on(document, 'fullscreenchange.lgfullscreen webkitfullscreenchange.lgfullscreen mozfullscreenchange.lgfullscreen MSFullscreenChange.lgfullscreen', function () {
+            if (utils.hasClass(_this.core.outer, 'lg-fullscreen-on')) {
+                utils.removeClass(_this.core.outer, 'lg-fullscreen-on');
+            } else {
+                utils.addClass(_this.core.outer, 'lg-fullscreen-on');
+            }
+        });
+
+        utils.on(this.core.outer.querySelector('.lg-fullscreen'), 'click.lg', function () {
+            if (isFullScreen()) {
+                _this.exitFullscreen();
+            } else {
+                _this.requestFullscreen();
+            }
+        });
+    };
+
+    Fullscreen.prototype.destroy = function () {
+
+        // exit from fullscreen if activated
+        if (isFullScreen()) {
+            this.exitFullscreen();
+        }
+
+        utils.off(document, '.lgfullscreen');
+    };
+
+    window.lgModules.fullscreen = Fullscreen;
+});
+
+},{}]},{},[1])(1)
+});

content/extra/lg-hash.js

@@ -0,0 +1,97 @@
+/**!
+ * lg-hash.js | 1.0.0 | October 5th 2016
+ * http://sachinchoolur.github.io/lg-hash.js
+ * Copyright (c) 2016 Sachin N; 
+ * @license GPLv3 
+ */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgHash = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define([], factory);
+    } else if (typeof exports !== "undefined") {
+        factory();
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory();
+        global.lgHash = mod.exports;
+    }
+})(this, function () {
+    'use strict';
+
+    var _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            for (var key in source) {
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    };
+
+    var hashDefaults = {
+        hash: true
+    };
+    var Hash = function Hash(element) {
+        this.el = element;
+        this.core = window.lgData[this.el.getAttribute('lg-uid')];
+        this.core.s = _extends({}, hashDefaults, this.core.s);
+        if (this.core.s.hash) {
+            this.oldHash = window.location.hash;
+            this.init();
+        }
+
+        return this;
+    };
+
+    Hash.prototype.init = function () {
+        var _this = this;
+        var _hash;
+
+        // Change hash value on after each slide transition
+        utils.on(_this.core.el, 'onAfterSlide.lgtm', function (event) {
+            window.location.hash = 'lg=' + _this.core.s.galleryId + '&slide=' + event.detail.index;
+        });
+
+        // Listen hash change and change the slide according to slide value
+        utils.on(window, 'hashchange.lghash', function () {
+            _hash = window.location.hash;
+            var _idx = parseInt(_hash.split('&slide=')[1], 10);
+
+            // it galleryId doesn't exist in the url close the gallery
+            if (_hash.indexOf('lg=' + _this.core.s.galleryId) > -1) {
+                _this.core.slide(_idx, false, false);
+            } else if (_this.core.lGalleryOn) {
+                _this.core.destroy();
+            }
+        });
+    };
+
+    Hash.prototype.destroy = function () {
+        if (!this.core.s.hash) {
+            return;
+        }
+
+        // Reset to old hash value
+        if (this.oldHash && this.oldHash.indexOf('lg=' + this.core.s.galleryId) < 0) {
+            window.location.hash = this.oldHash;
+        } else {
+            if (history.pushState) {
+                history.pushState('', document.title, window.location.pathname + window.location.search);
+            } else {
+                window.location.hash = '';
+            }
+        }
+
+        utils.off(this.core.el, '.lghash');
+    };
+
+    window.lgModules.hash = Hash;
+});
+
+},{}]},{},[1])(1)
+});

content/extra/lg-pager.js

@@ -0,0 +1,120 @@
+/**!
+ * lg-pager.js | 1.0.0 | October 5th 2016
+ * http://sachinchoolur.github.io/lg-pager.js
+ * Copyright (c) 2016 Sachin N; 
+ * @license GPLv3 
+ */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgPager = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define([], factory);
+    } else if (typeof exports !== "undefined") {
+        factory();
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory();
+        global.lgPager = mod.exports;
+    }
+})(this, function () {
+    'use strict';
+
+    var _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            for (var key in source) {
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    };
+
+    var pagerDefaults = {
+        pager: false
+    };
+
+    var Pager = function Pager(element) {
+
+        this.el = element;
+
+        this.core = window.lgData[this.el.getAttribute('lg-uid')];
+        this.core.s = _extends({}, pagerDefaults, this.core.s);
+
+        if (this.core.s.pager && this.core.items.length > 1) {
+            this.init();
+        }
+
+        return this;
+    };
+
+    Pager.prototype.init = function () {
+        var _this = this;
+        var pagerList = '';
+        var $pagerCont;
+        var $pagerOuter;
+        var timeout;
+
+        _this.core.outer.querySelector('.lg').insertAdjacentHTML('beforeend', '<div class="lg-pager-outer"></div>');
+
+        if (_this.core.s.dynamic) {
+            for (var j = 0; j < _this.core.s.dynamicEl.length; j++) {
+                pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + _this.core.s.dynamicEl[j].thumb + '" /></div></span>';
+            }
+        } else {
+            for (var i = 0; i < _this.core.items.length; i++) {
+                if (!_this.core.s.exThumbImage) {
+                    pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + _this.core.items[i].querySelector('img').getAttribute('src') + '" /></div></span>';
+                } else {
+                    pagerList += '<span class="lg-pager-cont"> <span class="lg-pager"></span><div class="lg-pager-thumb-cont"><span class="lg-caret"></span> <img src="' + _this.core.items[i].getAttribute(_this.core.s.exThumbImage) + '" /></div></span>';
+                }
+            }
+        }
+
+        $pagerOuter = _this.core.outer.querySelector('.lg-pager-outer');
+
+        $pagerOuter.innerHTML = pagerList;
+
+        $pagerCont = _this.core.outer.querySelectorAll('.lg-pager-cont');
+        for (var k = 0; k < $pagerCont.length; k++) {
+
+            /*jshint loopfunc: true */
+            (function (index) {
+                utils.on($pagerCont[index], 'click.lg touchend.lg', function () {
+                    _this.core.index = index;
+                    _this.core.slide(_this.core.index, false, false);
+                });
+            })(k);
+        }
+
+        utils.on($pagerOuter, 'mouseover.lg', function () {
+            clearTimeout(timeout);
+            utils.addClass($pagerOuter, 'lg-pager-hover');
+        });
+
+        utils.on($pagerOuter, 'mouseout.lg', function () {
+            timeout = setTimeout(function () {
+                utils.removeClass($pagerOuter, 'lg-pager-hover');
+            });
+        });
+
+        utils.on(_this.core.el, 'onBeforeSlide.lgtm', function (e) {
+            for (var n = 0; n < $pagerCont.length; n++) {
+                utils.removeClass($pagerCont[n], 'lg-pager-active');
+                if (e.detail.index === n) {
+                    utils.addClass($pagerCont[n], 'lg-pager-active');
+                }
+            }
+        });
+    };
+
+    Pager.prototype.destroy = function () {};
+
+    window.lgModules.pager = Pager;
+});
+
+},{}]},{},[1])(1)
+});

content/extra/lg-share.js

@@ -0,0 +1,134 @@
+/**!
+ * lg-share.js | 1.2.2 | January 14th 2018
+ * http://sachinchoolur.github.io/lg-share.js
+ * Copyright (c) 2016 Sachin N; 
+ * @license GPLv3 
+ */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgShare = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define([], factory);
+    } else if (typeof exports !== "undefined") {
+        factory();
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory();
+        global.lgShare = mod.exports;
+    }
+})(this, function () {
+    'use strict';
+
+    var _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            for (var key in source) {
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    };
+
+    var shareSefaults = {
+        share: true,
+        facebook: true,
+        facebookDropdownText: 'Facebook',
+        twitter: true,
+        twitterDropdownText: 'Twitter',
+        googlePlus: true,
+        googlePlusDropdownText: 'GooglePlus',
+        pinterest: true,
+        pinterestDropdownText: 'Pinterest'
+    };
+
+    function toCamelCase(input) {
+        return input.toLowerCase().replace(/-(.)/g, function (match, group1) {
+            return group1.toUpperCase();
+        });
+    }
+
+    var Share = function Share(element) {
+
+        this.el = element;
+
+        this.core = window.lgData[this.el.getAttribute('lg-uid')];
+        this.core.s = _extends({}, shareSefaults, this.core.s);
+
+        if (this.core.s.share) {
+            this.init();
+        }
+
+        return this;
+    };
+
+    Share.prototype.init = function () {
+        var _this = this;
+        var shareHtml = '<span id="lg-share" class="lg-icon">' + '<ul class="lg-dropdown" style="position: absolute;">';
+        shareHtml += _this.core.s.facebook ? '<li><a id="lg-share-facebook" target="_blank"><span class="lg-icon"></span><span class="lg-dropdown-text">' + this.core.s.facebookDropdownText + '</span></a></li>' : '';
+        shareHtml += _this.core.s.twitter ? '<li><a id="lg-share-twitter" target="_blank"><span class="lg-icon"></span><span class="lg-dropdown-text">' + this.core.s.twitterDropdownText + '</span></a></li>' : '';
+        shareHtml += _this.core.s.googlePlus ? '<li><a id="lg-share-googleplus" target="_blank"><span class="lg-icon"></span><span class="lg-dropdown-text">' + this.core.s.googlePlusDropdownText + '</span></a></li>' : '';
+        shareHtml += _this.core.s.pinterest ? '<li><a id="lg-share-pinterest" target="_blank"><span class="lg-icon"></span><span class="lg-dropdown-text">' + this.core.s.pinterestDropdownText + '</span></a></li>' : '';
+        shareHtml += '</ul></span>';
+
+        this.core.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', shareHtml);
+        this.core.outer.querySelector('.lg').insertAdjacentHTML('beforeend', '<div id="lg-dropdown-overlay"></div>');
+        utils.on(document.getElementById('lg-share'), 'click.lg', function () {
+            if (utils.hasClass(_this.core.outer, 'lg-dropdown-active')) {
+                utils.removeClass(_this.core.outer, 'lg-dropdown-active');
+            } else {
+                utils.addClass(_this.core.outer, 'lg-dropdown-active');
+            }
+        });
+
+        utils.on(document.getElementById('lg-dropdown-overlay'), 'click.lg', function () {
+            utils.removeClass(_this.core.outer, 'lg-dropdown-active');
+        });
+
+        utils.on(_this.core.el, 'onAfterSlide.lgtm', function (event) {
+
+            setTimeout(function () {
+                if (_this.core.s.facebook) {
+                    document.getElementById('lg-share-facebook').setAttribute('href', 'https://www.facebook.com/sharer/sharer.php?u=' + _this.getSharePropsUrl(event.detail.index, 'data-facebook-share-url'));
+                }
+                if (_this.core.s.twitter) {
+                    document.getElementById('lg-share-twitter').setAttribute('href', 'https://twitter.com/intent/tweet?text=' + _this.getShareProps(event.detail.index, 'data-tweet-text') + '&url=' + _this.getSharePropsUrl(event.detail.index, 'data-twitter-share-url'));
+                }
+                if (_this.core.s.googlePlus) {
+                    document.getElementById('lg-share-googleplus').setAttribute('href', 'https://plus.google.com/share?url=' + _this.getSharePropsUrl(event.detail.index, 'data-googleplus-share-url'));
+                }
+                if (_this.core.s.pinterest) {
+                    document.getElementById('lg-share-pinterest').setAttribute('href', 'http://www.pinterest.com/pin/create/button/?url=' + _this.getSharePropsUrl(event.detail.index, 'data-pinterest-share-url') + '&media=' + encodeURIComponent(_this.getShareProps(event.detail.index, 'href') || _this.getShareProps(event.detail.index, 'data-src')) + '&description=' + _this.getShareProps(event.detail.index, 'data-pinterest-text'));
+                }
+            }, 100);
+        });
+    };
+
+    Share.prototype.getSharePropsUrl = function (index, prop) {
+        var shareProp = this.getShareProps(index, prop);
+        if (!shareProp) {
+            shareProp = window.location.href;
+        }
+        return encodeURIComponent(shareProp);
+    };
+
+    Share.prototype.getShareProps = function (index, prop) {
+        var shareProp = '';
+        if (this.core.s.dynamic) {
+            shareProp = this.core.items[index][toCamelCase(prop.replace('data-', ''))];
+        } else if (this.core.items[index].getAttribute(prop)) {
+            shareProp = this.core.items[index].getAttribute(prop);
+        }
+        return shareProp;
+    };
+
+    Share.prototype.destroy = function () {};
+
+    window.lgModules.share = Share;
+});
+
+},{}]},{},[1])(1)
+});

content/extra/lg-zoom.js

@@ -0,0 +1,568 @@
+/**!
+ * lg-zoom.js | 1.0.1 | December 22nd 2016
+ * http://sachinchoolur.github.io/lg-zoom.js
+ * Copyright (c) 2016 Sachin N; 
+ * @license GPLv3 
+ */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.LgZoom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function (global, factory) {
+    if (typeof define === "function" && define.amd) {
+        define([], factory);
+    } else if (typeof exports !== "undefined") {
+        factory();
+    } else {
+        var mod = {
+            exports: {}
+        };
+        factory();
+        global.lgZoom = mod.exports;
+    }
+})(this, function () {
+    'use strict';
+
+    var _extends = Object.assign || function (target) {
+        for (var i = 1; i < arguments.length; i++) {
+            var source = arguments[i];
+
+            for (var key in source) {
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+
+        return target;
+    };
+
+    var getUseLeft = function getUseLeft() {
+        var useLeft = false;
+        var isChrome = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+        if (isChrome && parseInt(isChrome[2], 10) < 54) {
+            useLeft = true;
+        }
+
+        return useLeft;
+    };
+
+    var zoomDefaults = {
+        scale: 1,
+        zoom: true,
+        actualSize: true,
+        enableZoomAfter: 300,
+        useLeftForZoom: getUseLeft()
+    };
+
+    var Zoom = function Zoom(element) {
+
+        this.el = element;
+
+        this.core = window.lgData[this.el.getAttribute('lg-uid')];
+        this.core.s = _extends({}, zoomDefaults, this.core.s);
+
+        if (this.core.s.zoom && this.core.doCss()) {
+            this.init();
+
+            // Store the zoomable timeout value just to clear it while closing
+            this.zoomabletimeout = false;
+
+            // Set the initial value center
+            this.pageX = window.innerWidth / 2;
+            this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
+        }
+
+        return this;
+    };
+
+    Zoom.prototype.init = function () {
+
+        var _this = this;
+        var zoomIcons = '<span id="lg-zoom-in" class="lg-icon"></span><span id="lg-zoom-out" class="lg-icon"></span>';
+
+        if (_this.core.s.actualSize) {
+            zoomIcons += '<span id="lg-actual-size" class="lg-icon"></span>';
+        }
+
+        if (_this.core.s.useLeftForZoom) {
+            utils.addClass(_this.core.outer, 'lg-use-left-for-zoom');
+        } else {
+            utils.addClass(_this.core.outer, 'lg-use-transition-for-zoom');
+        }
+
+        this.core.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', zoomIcons);
+
+        // Add zoomable class
+        utils.on(_this.core.el, 'onSlideItemLoad.lgtmzoom', function (event) {
+
+            // delay will be 0 except first time
+            var _speed = _this.core.s.enableZoomAfter + event.detail.delay;
+
+            // set _speed value 0 if gallery opened from direct url and if it is first slide
+            if (utils.hasClass(document.body, 'lg-from-hash') && event.detail.delay) {
+
+                // will execute only once
+                _speed = 0;
+            } else {
+
+                // Remove lg-from-hash to enable starting animation.
+                utils.removeClass(document.body, 'lg-from-hash');
+            }
+
+            _this.zoomabletimeout = setTimeout(function () {
+                utils.addClass(_this.core.___slide[event.detail.index], 'lg-zoomable');
+            }, _speed + 30);
+        });
+
+        var scale = 1;
+        /**
+         * @desc Image zoom
+         * Translate the wrap and scale the image to get better user experience
+         *
+         * @param {String} scaleVal - Zoom decrement/increment value
+         */
+        var zoom = function zoom(scaleVal) {
+
+            var image = _this.core.outer.querySelector('.lg-current .lg-image');
+            var _x;
+            var _y;
+
+            // Find offset manually to avoid issue after zoom
+            var offsetX = (window.innerWidth - image.clientWidth) / 2;
+            var offsetY = (window.innerHeight - image.clientHeight) / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
+
+            _x = _this.pageX - offsetX;
+            _y = _this.pageY - offsetY;
+
+            var x = (scaleVal - 1) * _x;
+            var y = (scaleVal - 1) * _y;
+
+            utils.setVendor(image, 'Transform', 'scale3d(' + scaleVal + ', ' + scaleVal + ', 1)');
+            image.setAttribute('data-scale', scaleVal);
+
+            if (_this.core.s.useLeftForZoom) {
+                image.parentElement.style.left = -x + 'px';
+                image.parentElement.style.top = -y + 'px';
+            } else {
+                utils.setVendor(image.parentElement, 'Transform', 'translate3d(-' + x + 'px, -' + y + 'px, 0)');
+            }
+
+            image.parentElement.setAttribute('data-x', x);
+            image.parentElement.setAttribute('data-y', y);
+        };
+
+        var callScale = function callScale() {
+            if (scale > 1) {
+                utils.addClass(_this.core.outer, 'lg-zoomed');
+            } else {
+                _this.resetZoom();
+            }
+
+            if (scale < 1) {
+                scale = 1;
+            }
+
+            zoom(scale);
+        };
+
+        var actualSize = function actualSize(event, image, index, fromIcon) {
+            var w = image.clientWidth;
+            var nw;
+            if (_this.core.s.dynamic) {
+                nw = _this.core.s.dynamicEl[index].width || image.naturalWidth || w;
+            } else {
+                nw = _this.core.items[index].getAttribute('data-width') || image.naturalWidth || w;
+            }
+
+            var _scale;
+
+            if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
+                scale = 1;
+            } else {
+                if (nw > w) {
+                    _scale = nw / w;
+                    scale = _scale || 2;
+                }
+            }
+
+            if (fromIcon) {
+                _this.pageX = window.innerWidth / 2;
+                _this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
+            } else {
+                _this.pageX = event.pageX || event.targetTouches[0].pageX;
+                _this.pageY = event.pageY || event.targetTouches[0].pageY;
+            }
+
+            callScale();
+            setTimeout(function () {
+                utils.removeClass(_this.core.outer, 'lg-grabbing');
+                utils.addClass(_this.core.outer, 'lg-grab');
+            }, 10);
+        };
+
+        var tapped = false;
+
+        // event triggered after appending slide content
+        utils.on(_this.core.el, 'onAferAppendSlide.lgtmzoom', function (event) {
+
+            var index = event.detail.index;
+
+            // Get the current element
+            var image = _this.core.___slide[index].querySelector('.lg-image');
+
+            if (!_this.core.isTouch) {
+                utils.on(image, 'dblclick', function (event) {
+                    actualSize(event, image, index);
+                });
+            }
+
+            if (_this.core.isTouch) {
+                utils.on(image, 'touchstart', function (event) {
+                    if (!tapped) {
+                        tapped = setTimeout(function () {
+                            tapped = null;
+                        }, 300);
+                    } else {
+                        clearTimeout(tapped);
+                        tapped = null;
+                        actualSize(event, image, index);
+                    }
+
+                    event.preventDefault();
+                });
+            }
+        });
+
+        // Update zoom on resize and orientationchange
+        utils.on(window, 'resize.lgzoom scroll.lgzoom orientationchange.lgzoom', function () {
+            _this.pageX = window.innerWidth / 2;
+            _this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
+            zoom(scale);
+        });
+
+        utils.on(document.getElementById('lg-zoom-out'), 'click.lg', function () {
+            if (_this.core.outer.querySelector('.lg-current .lg-image')) {
+                scale -= _this.core.s.scale;
+                callScale();
+            }
+        });
+
+        utils.on(document.getElementById('lg-zoom-in'), 'click.lg', function () {
+            if (_this.core.outer.querySelector('.lg-current .lg-image')) {
+                scale += _this.core.s.scale;
+                callScale();
+            }
+        });
+
+        utils.on(document.getElementById('lg-actual-size'), 'click.lg', function (event) {
+            actualSize(event, _this.core.___slide[_this.core.index].querySelector('.lg-image'), _this.core.index, true);
+        });
+
+        // Reset zoom on slide change
+        utils.on(_this.core.el, 'onBeforeSlide.lgtm', function () {
+            scale = 1;
+            _this.resetZoom();
+        });
+
+        // Drag option after zoom
+        if (!_this.core.isTouch) {
+            _this.zoomDrag();
+        }
+
+        if (_this.core.isTouch) {
+            _this.zoomSwipe();
+        }
+    };
+
+    // Reset zoom effect
+    Zoom.prototype.resetZoom = function () {
+        utils.removeClass(this.core.outer, 'lg-zoomed');
+        for (var i = 0; i < this.core.___slide.length; i++) {
+            if (this.core.___slide[i].querySelector('.lg-img-wrap')) {
+                this.core.___slide[i].querySelector('.lg-img-wrap').removeAttribute('style');
+                this.core.___slide[i].querySelector('.lg-img-wrap').removeAttribute('data-x');
+                this.core.___slide[i].querySelector('.lg-img-wrap').removeAttribute('data-y');
+            }
+        }
+
+        for (var j = 0; j < this.core.___slide.length; j++) {
+            if (this.core.___slide[j].querySelector('.lg-image')) {
+                this.core.___slide[j].querySelector('.lg-image').removeAttribute('style');
+                this.core.___slide[j].querySelector('.lg-image').removeAttribute('data-scale');
+            }
+        }
+
+        // Reset pagx pagy values to center
+        this.pageX = window.innerWidth / 2;
+        this.pageY = window.innerHeight / 2 + (document.documentElement.scrollTop || document.body.scrollTop);
+    };
+
+    Zoom.prototype.zoomSwipe = function () {
+        var _this = this;
+        var startCoords = {};
+        var endCoords = {};
+        var isMoved = false;
+
+        // Allow x direction drag
+        var allowX = false;
+
+        // Allow Y direction drag
+        var allowY = false;
+
+        for (var i = 0; i < _this.core.___slide.length; i++) {
+
+            /*jshint loopfunc: true */
+            utils.on(_this.core.___slide[i], 'touchstart.lg', function (e) {
+
+                if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
+                    var image = _this.core.___slide[_this.core.index].querySelector('.lg-object');
+
+                    allowY = image.offsetHeight * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientHeight;
+                    allowX = image.offsetWidth * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientWidth;
+                    if (allowX || allowY) {
+                        e.preventDefault();
+                        startCoords = {
+                            x: e.targetTouches[0].pageX,
+                            y: e.targetTouches[0].pageY
+                        };
+                    }
+                }
+            });
+        }
+
+        for (var j = 0; j < _this.core.___slide.length; j++) {
+
+            /*jshint loopfunc: true */
+            utils.on(_this.core.___slide[j], 'touchmove.lg', function (e) {
+
+                if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
+
+                    var _el = _this.core.___slide[_this.core.index].querySelector('.lg-img-wrap');
+                    var distanceX;
+                    var distanceY;
+
+                    e.preventDefault();
+                    isMoved = true;
+
+                    endCoords = {
+                        x: e.targetTouches[0].pageX,
+                        y: e.targetTouches[0].pageY
+                    };
+
+                    // reset opacity and transition duration
+                    utils.addClass(_this.core.outer, 'lg-zoom-dragging');
+
+                    if (allowY) {
+                        distanceY = -Math.abs(_el.getAttribute('data-y')) + (endCoords.y - startCoords.y);
+                    } else {
+                        distanceY = -Math.abs(_el.getAttribute('data-y'));
+                    }
+
+                    if (allowX) {
+                        distanceX = -Math.abs(_el.getAttribute('data-x')) + (endCoords.x - startCoords.x);
+                    } else {
+                        distanceX = -Math.abs(_el.getAttribute('data-x'));
+                    }
+
+                    if (Math.abs(endCoords.x - startCoords.x) > 15 || Math.abs(endCoords.y - startCoords.y) > 15) {
+
+                        if (_this.core.s.useLeftForZoom) {
+                            _el.style.left = distanceX + 'px';
+                            _el.style.top = distanceY + 'px';
+                        } else {
+                            utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+                        }
+                    }
+                }
+            });
+        }
+
+        for (var k = 0; k < _this.core.___slide.length; k++) {
+
+            /*jshint loopfunc: true */
+            utils.on(_this.core.___slide[k], 'touchend.lg', function () {
+                if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
+                    if (isMoved) {
+                        isMoved = false;
+                        utils.removeClass(_this.core.outer, 'lg-zoom-dragging');
+                        _this.touchendZoom(startCoords, endCoords, allowX, allowY);
+                    }
+                }
+            });
+        }
+    };
+
+    Zoom.prototype.zoomDrag = function () {
+
+        var _this = this;
+        var startCoords = {};
+        var endCoords = {};
+        var isDraging = false;
+        var isMoved = false;
+
+        // Allow x direction drag
+        var allowX = false;
+
+        // Allow Y direction drag
+        var allowY = false;
+
+        for (var i = 0; i < _this.core.___slide.length; i++) {
+
+            /*jshint loopfunc: true */
+            utils.on(_this.core.___slide[i], 'mousedown.lgzoom', function (e) {
+
+                // execute only on .lg-object
+                var image = _this.core.___slide[_this.core.index].querySelector('.lg-object');
+
+                allowY = image.offsetHeight * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientHeight;
+                allowX = image.offsetWidth * image.getAttribute('data-scale') > _this.core.outer.querySelector('.lg').clientWidth;
+
+                if (utils.hasClass(_this.core.outer, 'lg-zoomed')) {
+                    if (utils.hasClass(e.target, 'lg-object') && (allowX || allowY)) {
+                        e.preventDefault();
+                        startCoords = {
+                            x: e.pageX,
+                            y: e.pageY
+                        };
+
+                        isDraging = true;
+
+                        // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+                        _this.core.outer.scrollLeft += 1;
+                        _this.core.outer.scrollLeft -= 1;
+
+                        utils.removeClass(_this.core.outer, 'lg-grab');
+                        utils.addClass(_this.core.outer, 'lg-grabbing');
+                    }
+                }
+            });
+        }
+
+        utils.on(window, 'mousemove.lgzoom', function (e) {
+            if (isDraging) {
+                var _el = _this.core.___slide[_this.core.index].querySelector('.lg-img-wrap');
+                var distanceX;
+                var distanceY;
+
+                isMoved = true;
+                endCoords = {
+                    x: e.pageX,
+                    y: e.pageY
+                };
+
+                // reset opacity and transition duration
+                utils.addClass(_this.core.outer, 'lg-zoom-dragging');
+
+                if (allowY) {
+                    distanceY = -Math.abs(_el.getAttribute('data-y')) + (endCoords.y - startCoords.y);
+                } else {
+                    distanceY = -Math.abs(_el.getAttribute('data-y'));
+                }
+
+                if (allowX) {
+                    distanceX = -Math.abs(_el.getAttribute('data-x')) + (endCoords.x - startCoords.x);
+                } else {
+                    distanceX = -Math.abs(_el.getAttribute('data-x'));
+                }
+
+                if (_this.core.s.useLeftForZoom) {
+                    _el.style.left = distanceX + 'px';
+                    _el.style.top = distanceY + 'px';
+                } else {
+                    utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+                }
+            }
+        });
+
+        utils.on(window, 'mouseup.lgzoom', function (e) {
+
+            if (isDraging) {
+                isDraging = false;
+                utils.removeClass(_this.core.outer, 'lg-zoom-dragging');
+
+                // Fix for chrome mouse move on click
+                if (isMoved && (startCoords.x !== endCoords.x || startCoords.y !== endCoords.y)) {
+                    endCoords = {
+                        x: e.pageX,
+                        y: e.pageY
+                    };
+                    _this.touchendZoom(startCoords, endCoords, allowX, allowY);
+                }
+
+                isMoved = false;
+            }
+
+            utils.removeClass(_this.core.outer, 'lg-grabbing');
+            utils.addClass(_this.core.outer, 'lg-grab');
+        });
+    };
+
+    Zoom.prototype.touchendZoom = function (startCoords, endCoords, allowX, allowY) {
+
+        var _this = this;
+        var _el = _this.core.___slide[_this.core.index].querySelector('.lg-img-wrap');
+        var image = _this.core.___slide[_this.core.index].querySelector('.lg-object');
+        var distanceX = -Math.abs(_el.getAttribute('data-x')) + (endCoords.x - startCoords.x);
+        var distanceY = -Math.abs(_el.getAttribute('data-y')) + (endCoords.y - startCoords.y);
+        var minY = (_this.core.outer.querySelector('.lg').clientHeight - image.offsetHeight) / 2;
+        var maxY = Math.abs(image.offsetHeight * Math.abs(image.getAttribute('data-scale')) - _this.core.outer.querySelector('.lg').clientHeight + minY);
+        var minX = (_this.core.outer.querySelector('.lg').clientWidth - image.offsetWidth) / 2;
+        var maxX = Math.abs(image.offsetWidth * Math.abs(image.getAttribute('data-scale')) - _this.core.outer.querySelector('.lg').clientWidth + minX);
+
+        if (Math.abs(endCoords.x - startCoords.x) > 15 || Math.abs(endCoords.y - startCoords.y) > 15) {
+            if (allowY) {
+                if (distanceY <= -maxY) {
+                    distanceY = -maxY;
+                } else if (distanceY >= -minY) {
+                    distanceY = -minY;
+                }
+            }
+
+            if (allowX) {
+                if (distanceX <= -maxX) {
+                    distanceX = -maxX;
+                } else if (distanceX >= -minX) {
+                    distanceX = -minX;
+                }
+            }
+
+            if (allowY) {
+                _el.setAttribute('data-y', Math.abs(distanceY));
+            } else {
+                distanceY = -Math.abs(_el.getAttribute('data-y'));
+            }
+
+            if (allowX) {
+                _el.setAttribute('data-x', Math.abs(distanceX));
+            } else {
+                distanceX = -Math.abs(_el.getAttribute('data-x'));
+            }
+
+            if (_this.core.s.useLeftForZoom) {
+                _el.style.left = distanceX + 'px';
+                _el.style.top = distanceY + 'px';
+            } else {
+                utils.setVendor(_el, 'Transform', 'translate3d(' + distanceX + 'px, ' + distanceY + 'px, 0)');
+            }
+        }
+    };
+
+    Zoom.prototype.destroy = function () {
+
+        var _this = this;
+
+        // Unbind all events added by lightGallery zoom plugin
+        utils.off(_this.core.el, '.lgzoom');
+        utils.off(window, '.lgzoom');
+        for (var i = 0; i < _this.core.___slide.length; i++) {
+            utils.off(_this.core.___slide[i], '.lgzoom');
+        }
+
+        utils.off(_this.core.el, '.lgtmzoom');
+        _this.resetZoom();
+        clearTimeout(_this.zoomabletimeout);
+        _this.zoomabletimeout = false;
+    };
+
+    window.lgModules.zoom = Zoom;
+});
+
+},{}]},{},[1])(1)
+});

content/extra/lightgallery.css

@@ -0,0 +1,978 @@
+@font-face {
+  font-family: 'lg';
+  src: url("../fonts/lg.eot?n1z373");
+  src: url("../fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lg.woff?n1z373") format("woff"), url("../fonts/lg.ttf?n1z373") format("truetype"), url("../fonts/lg.svg?n1z373#lg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+.lg-icon {
+  font-family: 'lg';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.lg-actions .lg-next, .lg-actions .lg-prev {
+  background-color: rgba(0, 0, 0, 0.45);
+  border-radius: 2px;
+  color: #999;
+  cursor: pointer;
+  display: block;
+  font-size: 22px;
+  margin-top: -10px;
+  padding: 8px 10px 9px;
+  position: absolute;
+  top: 50%;
+  z-index: 1080;
+}
+.lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
+  color: #FFF;
+}
+.lg-actions .lg-next {
+  right: 20px;
+}
+.lg-actions .lg-next:before {
+  content: "\e095";
+}
+.lg-actions .lg-prev {
+  left: 20px;
+}
+.lg-actions .lg-prev:after {
+  content: "\e094";
+}
+
+@-webkit-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@-moz-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@-ms-keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@keyframes lg-right-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: -30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@-webkit-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@-moz-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@-ms-keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+@keyframes lg-left-end {
+  0% {
+    left: 0;
+  }
+  50% {
+    left: 30px;
+  }
+  100% {
+    left: 0;
+  }
+}
+.lg-outer.lg-right-end .lg-object {
+  -webkit-animation: lg-right-end 0.3s;
+  -o-animation: lg-right-end 0.3s;
+  animation: lg-right-end 0.3s;
+  position: relative;
+}
+.lg-outer.lg-left-end .lg-object {
+  -webkit-animation: lg-left-end 0.3s;
+  -o-animation: lg-left-end 0.3s;
+  animation: lg-left-end 0.3s;
+  position: relative;
+}
+
+.lg-toolbar {
+  z-index: 1082;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.45);
+}
+.lg-toolbar .lg-icon {
+  color: #999;
+  cursor: pointer;
+  float: right;
+  font-size: 24px;
+  height: 47px;
+  line-height: 27px;
+  padding: 10px 0;
+  text-align: center;
+  width: 50px;
+  text-decoration: none !important;
+  outline: medium none;
+  -webkit-transition: color 0.2s linear;
+  -o-transition: color 0.2s linear;
+  transition: color 0.2s linear;
+}
+.lg-toolbar .lg-icon:hover {
+  color: #FFF;
+}
+.lg-toolbar .lg-close:after {
+  content: "\e070";
+}
+.lg-toolbar .lg-download:after {
+  content: "\e0f2";
+}
+
+.lg-sub-html {
+  background-color: rgba(0, 0, 0, 0.45);
+  bottom: 0;
+  color: #EEE;
+  font-size: 16px;
+  left: 0;
+  padding: 10px 40px;
+  position: fixed;
+  right: 0;
+  text-align: center;
+  z-index: 1080;
+}
+.lg-sub-html h4 {
+  margin: 0;
+  font-size: 13px;
+  font-weight: bold;
+}
+.lg-sub-html p {
+  font-size: 12px;
+  margin: 5px 0 0;
+}
+
+#lg-counter {
+  color: #999;
+  display: inline-block;
+  font-size: 16px;
+  padding-left: 20px;
+  padding-top: 12px;
+  vertical-align: middle;
+}
+
+.lg-toolbar, .lg-prev, .lg-next {
+  opacity: 1;
+  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
+  -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
+  -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
+  transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
+}
+
+.lg-hide-items .lg-prev {
+  opacity: 0;
+  -webkit-transform: translate3d(-10px, 0, 0);
+  transform: translate3d(-10px, 0, 0);
+}
+.lg-hide-items .lg-next {
+  opacity: 0;
+  -webkit-transform: translate3d(10px, 0, 0);
+  transform: translate3d(10px, 0, 0);
+}
+.lg-hide-items .lg-toolbar {
+  opacity: 0;
+  -webkit-transform: translate3d(0, -10px, 0);
+  transform: translate3d(0, -10px, 0);
+}
+
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object {
+  -webkit-transform: scale3d(0.5, 0.5, 0.5);
+  transform: scale3d(0.5, 0.5, 0.5);
+  opacity: 0;
+  -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+
+.lg-outer .lg-thumb-outer {
+  background-color: #0D0A0A;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  z-index: 1080;
+  max-height: 350px;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}
+.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+}
+.lg-outer.lg-thumb-open .lg-thumb-outer {
+  -webkit-transform: translate3d(0, 0%, 0);
+  transform: translate3d(0, 0%, 0);
+}
+.lg-outer .lg-thumb {
+  padding: 10px 0;
+  height: 100%;
+  margin-bottom: -5px;
+}
+.lg-outer .lg-thumb-item {
+  border-radius: 5px;
+  cursor: pointer;
+  float: left;
+  overflow: hidden;
+  height: 100%;
+  border: 2px solid #FFF;
+  border-radius: 4px;
+  margin-bottom: 5px;
+}
+@media (min-width: 1025px) {
+  .lg-outer .lg-thumb-item {
+    -webkit-transition: border-color 0.25s ease;
+    -o-transition: border-color 0.25s ease;
+    transition: border-color 0.25s ease;
+  }
+}
+.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
+  border-color: #a90707;
+}
+.lg-outer .lg-thumb-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.lg-outer.lg-has-thumb .lg-item {
+  padding-bottom: 120px;
+}
+.lg-outer.lg-can-toggle .lg-item {
+  padding-bottom: 0;
+}
+.lg-outer.lg-pull-caption-up .lg-sub-html {
+  -webkit-transition: bottom 0.25s ease;
+  -o-transition: bottom 0.25s ease;
+  transition: bottom 0.25s ease;
+}
+.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
+  bottom: 100px;
+}
+.lg-outer .lg-toggle-thumb {
+  background-color: #0D0A0A;
+  border-radius: 2px 2px 0 0;
+  color: #999;
+  cursor: pointer;
+  font-size: 24px;
+  height: 39px;
+  line-height: 27px;
+  padding: 5px 0;
+  position: absolute;
+  right: 20px;
+  text-align: center;
+  top: -39px;
+  width: 50px;
+}
+.lg-outer .lg-toggle-thumb:after {
+  content: "\e1ff";
+}
+.lg-outer .lg-toggle-thumb:hover {
+  color: #FFF;
+}
+
+.lg-outer .lg-video-cont {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 1140px;
+  max-height: 100%;
+  width: 100%;
+  padding: 0 5px;
+}
+.lg-outer .lg-video {
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  position: relative;
+}
+.lg-outer .lg-video .lg-object {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
+.lg-outer .lg-video .lg-video-play {
+  width: 84px;
+  height: 59px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -42px;
+  margin-top: -30px;
+  z-index: 1080;
+  cursor: pointer;
+}
+.lg-outer .lg-has-vimeo .lg-video-play {
+  background: url("../img/vimeo-play.png") no-repeat scroll 0 0 transparent;
+}
+.lg-outer .lg-has-vimeo:hover .lg-video-play {
+  background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent;
+}
+.lg-outer .lg-has-html5 .lg-video-play {
+  background: transparent url("../img/video-play.png") no-repeat scroll 0 0;
+  height: 64px;
+  margin-left: -32px;
+  margin-top: -32px;
+  width: 64px;
+  opacity: 0.8;
+}
+.lg-outer .lg-has-html5:hover .lg-video-play {
+  opacity: 1;
+}
+.lg-outer .lg-has-youtube .lg-video-play {
+  background: url("../img/youtube-play.png") no-repeat scroll 0 0 transparent;
+}
+.lg-outer .lg-has-youtube:hover .lg-video-play {
+  background: url("../img/youtube-play.png") no-repeat scroll 0 -60px transparent;
+}
+.lg-outer .lg-video-object {
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.lg-outer .lg-has-video .lg-video-object {
+  visibility: hidden;
+}
+.lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play {
+  display: none;
+}
+.lg-outer .lg-has-video.lg-video-playing .lg-video-object {
+  visibility: visible;
+}
+
+.lg-progress-bar {
+  background-color: #333;
+  height: 5px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1083;
+  opacity: 0;
+  -webkit-transition: opacity 0.08s ease 0s;
+  -moz-transition: opacity 0.08s ease 0s;
+  -o-transition: opacity 0.08s ease 0s;
+  transition: opacity 0.08s ease 0s;
+}
+.lg-progress-bar .lg-progress {
+  background-color: #a90707;
+  height: 5px;
+  width: 0;
+}
+.lg-progress-bar.lg-start .lg-progress {
+  width: 100%;
+}
+.lg-show-autoplay .lg-progress-bar {
+  opacity: 1;
+}
+
+.lg-autoplay-button:after {
+  content: "\e01d";
+}
+.lg-show-autoplay .lg-autoplay-button:after {
+  content: "\e01a";
+}
+
+.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
+  -webkit-transition-duration: 0s;
+  transition-duration: 0s;
+}
+.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+.lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+  transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
+}
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
+  -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
+  -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
+  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+#lg-zoom-in:after {
+  content: "\e311";
+}
+
+#lg-actual-size {
+  font-size: 20px;
+}
+#lg-actual-size:after {
+  content: "\e033";
+}
+
+#lg-zoom-out {
+  opacity: 0.5;
+  pointer-events: none;
+}
+#lg-zoom-out:after {
+  content: "\e312";
+}
+.lg-zoomed #lg-zoom-out {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.lg-outer .lg-pager-outer {
+  bottom: 60px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  z-index: 1080;
+  height: 10px;
+}
+.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
+  overflow: visible;
+}
+.lg-outer .lg-pager-cont {
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  vertical-align: top;
+  margin: 0 5px;
+}
+.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
+  box-shadow: 0 0 0 2px white inset;
+}
+.lg-outer .lg-pager-thumb-cont {
+  background-color: #fff;
+  color: #FFF;
+  bottom: 100%;
+  height: 83px;
+  left: 0;
+  margin-bottom: 20px;
+  margin-left: -60px;
+  opacity: 0;
+  padding: 5px;
+  position: absolute;
+  width: 120px;
+  border-radius: 3px;
+  -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
+  -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
+  -webkit-transform: translate3d(0, 5px, 0);
+  transform: translate3d(0, 5px, 0);
+}
+.lg-outer .lg-pager-thumb-cont img {
+  width: 100%;
+  height: 100%;
+}
+.lg-outer .lg-pager {
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
+  display: block;
+  height: 12px;
+  -webkit-transition: box-shadow 0.3s ease 0s;
+  -o-transition: box-shadow 0.3s ease 0s;
+  transition: box-shadow 0.3s ease 0s;
+  width: 12px;
+}
+.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
+  box-shadow: 0 0 0 8px white inset;
+}
+.lg-outer .lg-caret {
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+  border-top: 10px dashed;
+  bottom: -10px;
+  display: inline-block;
+  height: 0;
+  left: 50%;
+  margin-left: -5px;
+  position: absolute;
+  vertical-align: middle;
+  width: 0;
+}
+
+.lg-fullscreen:after {
+  content: "\e20c";
+}
+.lg-fullscreen-on .lg-fullscreen:after {
+  content: "\e20d";
+}
+
+.lg-outer #lg-dropdown-overlay {
+  background-color: rgba(0, 0, 0, 0.25);
+  bottom: 0;
+  cursor: default;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1081;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
+}
+.lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay {
+  -webkit-transition-delay: 0s;
+  transition-delay: 0s;
+  -moz-transform: translate3d(0, 0px, 0);
+  -o-transform: translate3d(0, 0px, 0);
+  -ms-transform: translate3d(0, 0px, 0);
+  -webkit-transform: translate3d(0, 0px, 0);
+  transform: translate3d(0, 0px, 0);
+  opacity: 1;
+  visibility: visible;
+}
+.lg-outer.lg-dropdown-active #lg-share {
+  color: #FFF;
+}
+.lg-outer .lg-dropdown {
+  background-color: #fff;
+  border-radius: 2px;
+  font-size: 14px;
+  list-style-type: none;
+  margin: 0;
+  padding: 10px 0;
+  position: absolute;
+  right: 0;
+  text-align: left;
+  top: 50px;
+  opacity: 0;
+  visibility: hidden;
+  -moz-transform: translate3d(0, 5px, 0);
+  -o-transform: translate3d(0, 5px, 0);
+  -ms-transform: translate3d(0, 5px, 0);
+  -webkit-transform: translate3d(0, 5px, 0);
+  transform: translate3d(0, 5px, 0);
+  -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+  transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
+}
+.lg-outer .lg-dropdown:after {
+  content: "";
+  display: block;
+  height: 0;
+  width: 0;
+  position: absolute;
+  border: 8px solid transparent;
+  border-bottom-color: #FFF;
+  right: 16px;
+  top: -16px;
+}
+.lg-outer .lg-dropdown > li:last-child {
+  margin-bottom: 0px;
+}
+.lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon {
+  color: #333;
+}
+.lg-outer .lg-dropdown a {
+  color: #333;
+  display: block;
+  white-space: pre;
+  padding: 4px 12px;
+  font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size: 12px;
+}
+.lg-outer .lg-dropdown a:hover {
+  background-color: rgba(0, 0, 0, 0.07);
+}
+.lg-outer .lg-dropdown .lg-dropdown-text {
+  display: inline-block;
+  line-height: 1;
+  margin-top: -3px;
+  vertical-align: middle;
+}
+.lg-outer .lg-dropdown .lg-icon {
+  color: #333;
+  display: inline-block;
+  float: none;
+  font-size: 20px;
+  height: auto;
+  line-height: 1;
+  margin-right: 8px;
+  padding: 0;
+  vertical-align: middle;
+  width: auto;
+}
+.lg-outer #lg-share {
+  position: relative;
+}
+.lg-outer #lg-share:after {
+  content: "\e80d";
+}
+.lg-outer #lg-share-facebook .lg-icon {
+  color: #3b5998;
+}
+.lg-outer #lg-share-facebook .lg-icon:after {
+  content: "\e901";
+}
+.lg-outer #lg-share-twitter .lg-icon {
+  color: #00aced;
+}
+.lg-outer #lg-share-twitter .lg-icon:after {
+  content: "\e904";
+}
+.lg-outer #lg-share-googleplus .lg-icon {
+  color: #dd4b39;
+}
+.lg-outer #lg-share-googleplus .lg-icon:after {
+  content: "\e902";
+}
+.lg-outer #lg-share-pinterest .lg-icon {
+  color: #cb2027;
+}
+.lg-outer #lg-share-pinterest .lg-icon:after {
+  content: "\e903";
+}
+
+.group {
+  *zoom: 1;
+}
+
+.group:before, .group:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+
+.group:after {
+  clear: both;
+}
+
+.lg-outer {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  opacity: 0;
+  -webkit-transition: opacity 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s;
+}
+.lg-outer * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.lg-outer.lg-visible {
+  opacity: 1;
+}
+.lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current {
+  -webkit-transition-duration: inherit !important;
+  transition-duration: inherit !important;
+  -webkit-transition-timing-function: inherit !important;
+  transition-timing-function: inherit !important;
+}
+.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
+  -webkit-transition-duration: 0s !important;
+  transition-duration: 0s !important;
+  opacity: 1;
+}
+.lg-outer.lg-grab img.lg-object {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: -o-grab;
+  cursor: -ms-grab;
+  cursor: grab;
+}
+.lg-outer.lg-grabbing img.lg-object {
+  cursor: move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: -o-grabbing;
+  cursor: -ms-grabbing;
+  cursor: grabbing;
+}
+.lg-outer .lg {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+.lg-outer .lg-inner {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  white-space: nowrap;
+}
+.lg-outer .lg-item {
+  background: url("/theme/images/loading.gif") no-repeat scroll center center transparent;
+  display: none !important;
+}
+.lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide {
+  display: inline-block !important;
+}
+.lg-outer.lg-css .lg-current {
+  display: inline-block !important;
+}
+.lg-outer .lg-item, .lg-outer .lg-img-wrap {
+  display: inline-block;
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before {
+  content: "";
+  display: inline-block;
+  height: 50%;
+  width: 1px;
+  margin-right: -1px;
+}
+.lg-outer .lg-img-wrap {
+  position: absolute;
+  padding: 0 5px;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.lg-outer .lg-item.lg-complete {
+  background-image: none;
+}
+.lg-outer .lg-item.lg-current {
+  z-index: 1060;
+}
+.lg-outer .lg-image {
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto !important;
+  height: auto !important;
+}
+.lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play {
+  opacity: 0;
+  -webkit-transition: opacity 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s;
+}
+.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play {
+  opacity: 1;
+}
+.lg-outer .lg-empty-html {
+  display: none;
+}
+.lg-outer.lg-hide-download #lg-download {
+  display: none;
+}
+
+.lg-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1040;
+  background-color: #000;
+  opacity: 0;
+  -webkit-transition: opacity 0.15s ease 0s;
+  -o-transition: opacity 0.15s ease 0s;
+  transition: opacity 0.15s ease 0s;
+}
+.lg-backdrop.in {
+  opacity: 1;
+}
+
+.lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current {
+  -webkit-transition: none 0s ease 0s !important;
+  -moz-transition: none 0s ease 0s !important;
+  -o-transition: none 0s ease 0s !important;
+  transition: none 0s ease 0s !important;
+}
+.lg-css3.lg-use-css3 .lg-item {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.lg-css3.lg-use-left .lg-item {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+.lg-css3.lg-fade .lg-item {
+  opacity: 0;
+}
+.lg-css3.lg-fade .lg-item.lg-current {
+  opacity: 1;
+}
+.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
+  -webkit-transition: opacity 0.1s ease 0s;
+  -moz-transition: opacity 0.1s ease 0s;
+  -o-transition: opacity 0.1s ease 0s;
+  transition: opacity 0.1s ease 0s;
+}
+.lg-css3.lg-slide.lg-use-css3 .lg-item {
+  opacity: 0;
+}
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
+}
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
+}
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
+  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}
+.lg-css3.lg-slide.lg-use-left .lg-item {
+  opacity: 0;
+  position: absolute;
+  left: 0;
+}
+.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide {
+  left: -100%;
+}
+.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide {
+  left: 100%;
+}
+.lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
+  left: 0;
+  opacity: 1;
+}
+.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
+  -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+  transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
+}

content/extra/lightgallery_setup.css

@@ -0,0 +1,115 @@
+
+.demo-gallery > ul {
+  margin-bottom: 0;
+}
+.demo-gallery > ul > li {
+  margin-bottom: 15px;
+}
+.demo-gallery > ul > li a {
+  border: 3px solid #FFF;
+  border-radius: 3px;
+  display: block;
+  overflow: hidden;
+  position: relative;
+  float: left;
+}
+.demo-gallery > ul > li a > img {
+  -webkit-transition: -webkit-transform 0.15s ease 0s;
+  -moz-transition: -moz-transform 0.15s ease 0s;
+  -o-transition: -o-transform 0.15s ease 0s;
+  transition: transform 0.15s ease 0s;
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  width: 100%;
+}
+.demo-gallery > ul > li a:hover > img {
+  -webkit-transform: scale3d(1.1, 1.1, 1.1);
+  transform: scale3d(1.1, 1.1, 1.1);
+}
+.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
+  opacity: 1;
+}
+.demo-gallery > ul > li a .demo-gallery-poster {
+  background-color: rgba(0, 0, 0, 0.1);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  -webkit-transition: background-color 0.15s ease 0s;
+  -o-transition: background-color 0.15s ease 0s;
+  transition: background-color 0.15s ease 0s;
+}
+.demo-gallery > ul > li a .demo-gallery-poster > img {
+  left: 50%;
+  margin-left: -10px;
+  margin-top: -10px;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  -webkit-transition: opacity 0.3s ease 0s;
+  -o-transition: opacity 0.3s ease 0s;
+  transition: opacity 0.3s ease 0s;
+}
+.demo-gallery > ul > li a:hover .demo-gallery-poster {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.demo-gallery .justified-gallery > a > img {
+  -webkit-transition: -webkit-transform 0.15s ease 0s;
+  -moz-transition: -moz-transform 0.15s ease 0s;
+  -o-transition: -o-transform 0.15s ease 0s;
+  transition: transform 0.15s ease 0s;
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+  height: 100%;
+  width: 100%;
+}
+.demo-gallery .justified-gallery > a:hover > img {
+  -webkit-transform: scale3d(1.1, 1.1, 1.1);
+  transform: scale3d(1.1, 1.1, 1.1);
+}
+.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
+  opacity: 1;
+}
+.demo-gallery .justified-gallery > a .demo-gallery-poster {
+  background-color: rgba(0, 0, 0, 0.1);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  -webkit-transition: background-color 0.15s ease 0s;
+  -o-transition: background-color 0.15s ease 0s;
+  transition: background-color 0.15s ease 0s;
+}
+.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
+  left: 50%;
+  margin-left: -10px;
+  margin-top: -10px;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  -webkit-transition: opacity 0.3s ease 0s;
+  -o-transition: opacity 0.3s ease 0s;
+  transition: opacity 0.3s ease 0s;
+}
+.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.demo-gallery .video .demo-gallery-poster img {
+  height: 48px;
+  margin-left: -24px;
+  margin-top: -24px;
+  opacity: 0.8;
+  width: 48px;
+}
+.demo-gallery.dark > ul > li a {
+  border: 3px solid #04070a;
+}
+.home .demo-gallery {
+  padding-bottom: 80px;
+}
+#aniimated-thumbnials .demo-gallery a {
+  width: 190px;
+  height: 132px;
+}

pelicanconf.py

@@ -17,6 +17,19 @@ STATIC_PATHS = [
 EXTRA_PATH_METADATA = {
     'extra/robots.txt': {'path': 'robots.txt'},
     'extra/favicon.ico': {'path': 'favicon.ico'},
+    'extra/loading.gif': {'path': 'theme/images/loading.gif'},
+    'extra/zoom.png': {'path': 'theme/images/zoom.png'},
+    'extra/jquery.mousewheel.min.js': {'path': 'js/jquery.mousewheel.min.js'},
+    'extra/lg-autoplay.js': {'path': 'js/lg-autoplay.js'},
+    'extra/lg-fullscreen.js': {'path': 'js/lg-fullscreen.js'},
+    'extra/lg-hash.js': {'path': 'js/lg-hash.js'},
+    'extra/lg-pager.js': {'path': 'js/lg-pager.js'},
+    'extra/lg-share.js': {'path': 'js/lg-share.js'},
+    'extra/lg-zoom.js': {'path': 'js/lg-zoom.js'},
+    'extra/lightgallery.js': {'path': 'js/lightgallery.js'},
+
+    'extra/lightgallery_setup.css': {'path': 'css/lightgallery_setup.css'},
+    'extra/lightgallery.css': {'path': 'css/lightgallery.css'},
 }
 
 # Base URL this page is hosted at:
@@ -50,6 +63,7 @@ LOCALE = 'en_US'
 
 # We are using the custom minimal theme:
 THEME = 'themes/minimal'
+THEME = 'themes/bootstrap-4-blog-theme'
 THEME_STATIC_DIR = 'theme'
 
 DELETE_OUTPUT_DIRECTORY = True
@@ -93,7 +107,7 @@ FEED_DOMAIN = SITEURL
 FEED_MAX_ITEMS = 10
 # We only want RSS/ATOM Feeds for all articles, exclude categories:
 FEED_RSS = 'feeds/rss.xml'
-TAG_FEED_RSS = 'feeds/{slug}.rss.xml'
+# TAG_FEED_RSS = 'feeds/{slug}.rss.xml'
 CATEGORY_FEED_RSS = None
 
 # Feed generation is usually not desired when developing
@@ -113,11 +127,15 @@ INDEX_SAVE_AS = 'blog/index.html'
 
 # Navigation menu:
 SECTIONS = [
-    ('Projects', '/category/projects'),
-    ('less plastic', '/category/plasticfree/'),
-    ('Gallery', '/gallery'),
-    ('about', '/about'),
-    ('Impressum', '/impressum'),
+    ('Blog', '/blog/', None),
+    ('Projects', '/category/projects', [
+        ('Projects', 'quadrocopter', '/category/projects/quadrocopter'),
+        ('Projects', '3d Printer', '/category/projects/3d-printer'),
+    ]),
+    ('less plastic', '/category/plasticfree/', None),
+    ('Gallery', '/gallery', None),
+    ('about', '/about', None),
+    ('Impressum', '/impressum', None),
 ]
 
 # Links to display in the footer:

plugins/lightgallery/lightgallery.py

@@ -27,6 +27,10 @@ def process_content(article):
     if (j != i):
         pass
 
+    logger.info('################################\n')
+    logger.info(str(article.title) + '\n')
+    logger.info('################################\n')
+
     for i in range(0, i):
         m = find_between(content, '[lightgallery', 'lightgalleryend]')
 
@@ -87,6 +91,30 @@ def process_content(article):
         replace_text += "</div>"
         content = content.replace('[lightgallery' + m + 'lightgalleryend]', replace_text)
         article._content = content
+
+    article._content += """
+                <script type="text/javascript">
+                    function getElementsById(elementID){
+                            var elementCollection = new Array();
+                            var allElements = document.getElementsByTagName("*");
+                            for(i = 0; i < allElements.length; i++){
+                                        if(allElements[i].id == elementID)
+                                                elementCollection.push(allElements[i]);
+
+                                    }
+                            return elementCollection;
+                    }
+                    var elements = getElementsById('lightgallery');
+                    for(var i=0; i<elements.length; i++) {
+                        lightGallery(elements[i], {
+                                    thumbnail:true,
+                                    animateThumb: true,
+                                    showThumbByDefault: false,
+                                });
+                    }
+                </script>
+                </html>
+                """
     logger.debug("end\n\n")
     pass
 

themes/bootstrap-4-blog-theme/CONTRIBUTING.md

@@ -0,0 +1,10 @@
+# Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -m 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+
+*Remember that we have a pre-push hook with steps that analyzes and prevents mistakes.*
+
+**After your pull request is merged**, you can safely delete your branch.

themes/bootstrap-4-blog-theme/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License
+
+Copyright 2018 - Ronald Theodoro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

themes/bootstrap-4-blog-theme/README.md

@@ -0,0 +1,11 @@
+# Bootstrap 4 blog theme
+
+A simple boostrap template
+
+![home page](screenshots/01.png)
+
+![post page](screenshots/02.png)
+
+![about me page](screenshots/03.png)
+
+![tags page](screenshots/04.png)

themes/bootstrap-4-blog-theme/static/css/main.css

@@ -0,0 +1,30 @@
+* {
+  font-family: 'Lato', sans-serif;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.site-name {
+  font-size: 1.5em;
+}
+
+.box {
+  flex: 1 0 auto;
+}
+
+.social-icons {
+  font-size: 2em;
+  text-align: center;
+}
+
+.social-icons a {
+  margin: 1%
+}

themes/bootstrap-4-blog-theme/templates/archives.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block title %}{{ SITENAME }} - Archive{% endblock %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">Archives</h1>
+  {% endblock %}
+
+  {% include "summary.html" %}
+{% endblock %}

themes/bootstrap-4-blog-theme/templates/article.html

@@ -0,0 +1,103 @@
+{% extends "base.html" %}
+
+{% block head %}
+  {{ super() }}
+
+  {% if article.description %}
+    <meta name="description" content="{{ article.description }}" />
+  {% endif %}
+
+  {% for tag in article.tags %}
+    <meta name="tags" content="{{ tag }}" />
+  {% endfor %}
+
+{% endblock %}
+
+{% block title %}{{ SITENAME }} - {{ article.title }}{% endblock %}
+
+{% block content %}
+  <h1 class="my-4">
+    <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
+      title="Permalink to {{ article.title|striptags }}">
+      {{ article.title }}
+    </a>
+  </h1>
+
+  <p>
+    {% if article.authors %}
+      By {% for author in article.authors %}
+        <a href="{{ SITEURL }}/{{ author.url }}">{{ author }} </a>
+      {% endfor %}
+    {% endif %}
+  </p>
+
+  <hr/>
+
+  <time datetime="{{ article.date.isoformat() }}">
+    {% if article.modified %}
+      Updated: {{ article.locale_modified }}
+    {% else %}
+      Published: {{ article.locale_date }}
+    {% endif %}
+  </time>
+
+  <hr/>
+
+  <div>
+    {{ article.content }}
+  </div>
+
+  <div class="card-footer text-muted">
+    <p>
+      In <a href="{{ SITEURL }}/{{ article.category.url }}">
+        {{ article.category }}
+      </a>
+    </p>
+    {% include "taglist.html" %}
+  </div>
+
+  <div class="card my-4">
+    {% if article.related_posts %}
+      <h3 class="card-header">Related posts</h3>
+      <div class="card-body">
+        <div class="row">
+          <div class="col-auto">
+            <ul class="list-unstyled mb-0">
+              {% for related_post in article.related_posts %}
+                <li>
+                  <a href="{{ SITEURL }}/{{ related_post.url }}">
+                    {{ related_post.title }}
+                  </a>
+                </li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+
+  <div id="disqus_thread"></div>
+  <script>
+    /**
+    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
+    /*
+    var disqus_config = function () {
+    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
+    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+    };
+    */
+    (function() { // DON'T EDIT BELOW THIS LINE
+    var d = document, s = d.createElement('script');
+    s.src = 'https://http-ronaldtheodoro-github-io.disqus.com/embed.js';
+    s.setAttribute('data-timestamp', +new Date());
+    (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>
+    Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+  </noscript>
+
+  <script id="dsq-count-scr" src="//http-ronaldtheodoro-github-io.disqus.com/count.js" async></script>
+{% endblock %}

themes/bootstrap-4-blog-theme/templates/author.html

@@ -0,0 +1,8 @@
+{% extends "index.html" %}
+
+{% block title %}{{ SITENAME }} - Articles by {{ author }}{% endblock %}
+
+{% block content_title %}
+  <h1 class="my-4">Articles by {{ author }}</h1>
+{% endblock %}
+

themes/bootstrap-4-blog-theme/templates/authors.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% from 'macros/list_items_page.html' import list_items_page %}
+
+{% block title %}{{ SITENAME }} - Authors{% endblock %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">Authors</h1>
+  {% endblock %}
+
+  {{ list_items_page(authors) }}
+{% endblock %}

themes/bootstrap-4-blog-theme/templates/base.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="{{ DEFAULT_LANG }}">
+<head>
+  {% block head %}
+    <title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
+    <meta charset="utf-8" />
+    {% if FEED_ALL_ATOM %}
+      <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" />
+    {% endif %}
+
+    {% if FEED_ALL_RSS %}
+      <link href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" />
+    {% endif %}
+
+    {% if FEED_ATOM %}
+      <link href="{{ FEED_DOMAIN }}/{%if FEED_ATOM_URL %}{{ FEED_ATOM_URL }}{% else %}{{ FEED_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
+    {% endif %}
+
+    {% if FEED_RSS %}
+      <link href="{{ FEED_DOMAIN }}/{% if FEED_RSS_URL %}{{ FEED_RSS_URL }}{% else %}{{ FEED_RSS }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
+    {% endif %}
+
+    {% if CATEGORY_FEED_ATOM and category %}
+      <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_ATOM_URL %}{{ CATEGORY_FEED_ATOM_URL|format(category.slug) }}{% else %}{{ CATEGORY_FEED_ATOM|format(category.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Categories Atom Feed" />
+    {% endif %}
+
+    {% if CATEGORY_FEED_RSS and category %}
+      <link href="{{ FEED_DOMAIN }}/{% if CATEGORY_FEED_RSS_URL %}{{ CATEGORY_FEED_RSS_URL|format(category.slug) }}{% else %}{{ CATEGORY_FEED_RSS|format(category.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" />
+    {% endif %}
+
+    {% if TAG_FEED_ATOM and tag %}
+      <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_ATOM_URL %}{{ TAG_FEED_ATOM_URL|format(tag.slug) }}{% else %}{{ TAG_FEED_ATOM|format(tag.slug) }}{% endif %}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" />
+    {% endif %}
+
+    {% if TAG_FEED_RSS and tag %}
+      <link href="{{ FEED_DOMAIN }}/{% if TAG_FEED_RSS_URL %}{{ TAG_FEED_RSS_URL|format(tag.slug) }}{% else %}{{ TAG_FEED_RSS|format(tag.slug) }}{% endif %}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" />
+    {% endif %}
+
+    {% if META_TAGS %}
+      {% for tag in META_TAGS %}
+        <meta name="{{ tag['name'] }}" content="{{ tag['content'] }}">
+      {% endfor %}
+    {% endif %}
+  {% endblock head %}
+    <script src="{{ SITEURL }}/js/lightgallery.js"></script>
+    <script src="{{ SITEURL }}/js/lg-pager.js"></script>
+    <script src="{{ SITEURL }}/js/lg-autoplay.js"></script>
+    <script src="{{ SITEURL }}/js/lg-fullscreen.js"></script>
+    <script src="{{ SITEURL }}/js/lg-zoom.js"></script>
+    <script src="{{ SITEURL }}/js/lg-hash.js"></script>
+    <script src="{{ SITEURL }}/js/lg-share.js"></script>
+    <link href="{{ SITEURL }}/css/lightgallery.css" rel="stylesheet">
+    <link href="{{ SITEURL }}/css/lightgallery_setup.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,700" type="text/css">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  <link href="{{ SITEURL }}/theme/css/main.css" type="text/css" rel="stylesheet">
+</head>
+<body>
+  <header>
+    {% include 'components/navbar.html' %}
+  </header>
+
+  <main class="container box" role="main">
+    {% block content %}
+    {% endblock %}
+  </main>
+
+  <footer class="footer bg-dark">
+    {% include 'components/footer.html' %}
+  </footer>
+
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+</body>
+  <script type="text/javascript">
+    <!-- lightGallery(document.getElementById('lightgallery'), { -->
+    <!--             thumbnail:true, -->
+    <!--             animateThumb: true, -->
+    <!--             showThumbByDefault: false, -->
+    <!--         }); -->
+    function getElementsById(elementID){
+            var elementCollection = new Array();
+            var allElements = document.getElementsByTagName("*");
+            for(i = 0; i < allElements.length; i++){
+                        if(allElements[i].id == elementID)
+                                elementCollection.push(allElements[i]);
+
+                    }
+            return elementCollection;
+    }
+    var elements = getElementsById('lightgallery');
+    for(var i=0; i<elements.length; i++) {
+        lightGallery(elements[i], {
+                    thumbnail:true,
+                    animateThumb: true,
+                    showThumbByDefault: false,
+                });
+    }
+  </script>
+</html>

themes/bootstrap-4-blog-theme/templates/categories.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% from 'macros/list_items_page.html' import list_items_page %}
+
+{% block title %}{{ SITENAME }} - Categories{% endblock %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">Categories</h1>
+  {% endblock %}
+
+  {{ list_items_page(categories) }}
+{% endblock %}

themes/bootstrap-4-blog-theme/templates/category.html

@@ -0,0 +1,8 @@
+{% extends "index.html" %}
+
+{% block title %}{{ SITENAME }} - Articles {{ category }}{% endblock %}
+
+{% block content_title %}
+  <h1 class="my-4">Articles in the {{ category }} category</h1>
+{% endblock %}
+

themes/bootstrap-4-blog-theme/templates/components/footer.html

@@ -0,0 +1,19 @@
+
+<div class="container social-icons">
+    {% for name, link in SOCIAL %}
+        <a href="{{ link }}">
+            <i class="fa fa-{{ name }}"></i>
+        </a>
+    {% endfor %}
+    {% if FEED_ALL_ATOM %}
+        <a href="{{ FEED_DOMAIN }}/{% if FEED_ALL_ATOM_URL %}{{ FEED_ALL_ATOM_URL }}{% else %}{{ FEED_ALL_ATOM }}{% endif %}" type="application/atom+xml" rel="alternate">
+            <i class="fa fa-feed"></i>
+        </a>
+    {% endif %}
+    {% if FEED_ALL_RSS %}
+        <a href="{{ FEED_DOMAIN }}/{% if FEED_ALL_RSS_URL %}{{ FEED_ALL_RSS_URL }}{% else %}{{ FEED_ALL_RSS }}{% endif %}" type="application/rss+xml" rel="alternate">
+            <i class="fa fa-rss"></i>
+        </a>
+    {% endif %}
+</div>
+<p class="m-0 text-center text-white">Copyright © Ronald Theodoro 2018</p>

themes/bootstrap-4-blog-theme/templates/components/navbar.html

@@ -0,0 +1,40 @@
+<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
+  <div class="container">
+    <span class="navbar-text site-name">
+      <a href="/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a>
+    </span>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarResponsive">
+      <ul class="navbar-nav ml-auto">
+        {% for title, link, subsections in SECTIONS %}
+            <li class="nav-item dropdown">
+                <a
+                    href="{{ link }}"
+                {% if subsections %}
+                    class="nav-link dropdown-toggle"
+                    id="navbardrop"
+                    data-toggle="dropdown"
+                {% else %}
+                    class="nav-link"
+                {% endif %}
+                >
+                    {{ title }}
+                </a>
+                {% if subsections %}
+                <div class="dropdown-menu">
+                    {% for parent, title2, link2 in subsections %}
+                        {% if parent == title %}
+                            <a href="{{ link2 }}" class="dropdown-item">{{ title2 }}</a>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+                {% else %}
+                {% endif %}
+            </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</nav>

themes/bootstrap-4-blog-theme/templates/index.html

@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">Home Page</h1>
+  {% endblock %}
+
+  {% for article in articles_page.object_list %}
+    <div class="card mb-4">
+      <div class="card-body">
+        <h2 class="card-title">
+          <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">
+            {{ article.title }}
+          </a>
+        </h2>
+        <p class="card-text">{{ article.summary }}</p>
+      </div>
+
+      <div class="card-footer text-muted">
+        <time datetime="{{ article.date.isoformat() }}">
+          {% if article.modified %}
+            Updated: {{ article.locale_modified }}
+          {% else %}
+            Published: {{ article.locale_date }}
+          {% endif %}
+        </time>
+        By {% for author in article.authors %}
+          <a class="url fn" href="{{ SITEURL }}/{{ author.url }}">
+            {{ author }}
+          </a>
+        {% endfor %}
+      </div>
+    </div>
+  {% endfor %}
+
+  {% if articles_page.has_other_pages() %}
+    {% include 'pagination.html' %}
+  {% endif %}
+{% endblock content %}

themes/bootstrap-4-blog-theme/templates/macros/list_items_page.html

@@ -0,0 +1,9 @@
+{% macro list_items_page(items) %}
+  <ul>
+    {% for item, articles in items %}
+      <li>
+        <a href="/{{ item.url }}">{{ item }}</a> ({{ articles|count }})
+      </li>
+    {% endfor %}
+  </ul>
+{% endmacro %}

themes/bootstrap-4-blog-theme/templates/page.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block title %}{{ SITENAME }} - {{ page.title }}{% endblock %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">{{ page.title }}</h1>
+  {% endblock %}
+
+  {{ page.content }}
+{% endblock %}

themes/bootstrap-4-blog-theme/templates/pagination.html

@@ -0,0 +1,27 @@
+{% if DEFAULT_PAGINATION %}
+  <ul class="pagination justify-content-center mb-4">
+    {% if articles_page.has_previous() %}
+      <li class="page-item">
+        <a class="page-link" href="{{ SITEURL }}/{{ articles_previous_page.url }}">&laquo;</a>
+      </li>
+    {% else %}
+      <li class="page-item disabled">
+        <a class="page-link" href="">&laquo;</a>
+      </li>
+    {% endif %}
+
+    <li class="page-item">
+      Page {{ articles_page.number }} / {{ articles_paginator.num_pages }}
+    </li>
+
+    {% if articles_page.has_next() %}
+      <li class="page-item">
+        <a class="page-link" href="{{ SITEURL }}/{{ articles_next_page.url }}">&raquo;</a>
+      </li>
+    {% else %}
+      <li class="page-item disabled">
+        <a class="page-link" href="">&raquo;</a>
+      </li>
+    {% endif %}
+  </ul>
+{% endif %}

themes/bootstrap-4-blog-theme/templates/period_archives.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block title %}
+    {{ SITENAME }} - Archives for {{ period | reverse | join(' ') }}
+{% endblock %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">Archives for {{ period | reverse | join(' ') }}</h1>
+  {% endblock %}
+
+  {% include "summary.html" %}
+{% endblock %}

themes/bootstrap-4-blog-theme/templates/summary.html

@@ -0,0 +1,10 @@
+{% for article in dates %}
+  <div class="card mb-4">
+    <a class="url fn" href="{{ SITEURL }}/{{ article.url }}">
+      {{ article.title }}
+    </a>
+    <time class="published" datetime="{{ article.date.isoformat() }}">
+      {{ article.locale_date }}
+    </time>
+  </div>
+{% endfor %}

themes/bootstrap-4-blog-theme/templates/tag.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block title %}{{ SITENAME }} - {{ tag }}{% endblock %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">Tag {{ tag }}</h1>
+  {% endblock %}
+
+  {% include "summary.html" %}
+{% endblock %}

themes/bootstrap-4-blog-theme/templates/taglist.html

@@ -0,0 +1,7 @@
+{% if article.tags %}
+  <p>
+    Tags: {% for tag in article.tags %}
+      <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag | escape }}</a>
+    {% endfor %}
+  </p>
+{% endif %}

themes/bootstrap-4-blog-theme/templates/tags.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% from 'macros/list_items_page.html' import list_items_page %}
+
+{% block title %}{{ SITENAME }} - Tags{% endblock %}
+
+{% block content %}
+  {% block content_title %}
+    <h1 class="my-4">Tags</h1>
+  {% endblock %}
+
+  {{ list_items_page(tags) }}
+{% endblock %}

themes/minimal/templates/base.html

@@ -16,6 +16,10 @@
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/lg-zoom.js"></script>
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/lg-hash.js"></script>
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/lg-share.js"></script>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
+
+
     <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/jquery.mousewheel.min.js"></script>
 
     <link href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/lang.css" rel="stylesheet" >