Gzi9|D_!H-K<_y6@y{_nmypyYH-XyYDP|<$q;LG*Uvt+kF54002ov
JPDHLkV1hwmDQo}$
literal 0
HcmV?d00001
diff --git a/static/js/.jscsrc b/static/js/.jscsrc
new file mode 100644
index 0000000..bddd658
--- /dev/null
+++ b/static/js/.jscsrc
@@ -0,0 +1,7 @@
+{
+ "preset": "airbnb",
+ "validateIndentation": 4,
+ "disallowTrailingComma": true,
+ "requireTrailingComma": false,
+ "excludeFiles": ["node_modules/**"]
+}
\ No newline at end of file
diff --git a/static/js/lg-utils.js b/static/js/lg-utils.js
new file mode 100644
index 0000000..d19d1b9
--- /dev/null
+++ b/static/js/lg-utils.js
@@ -0,0 +1,136 @@
+
+var utils = {
+ getAttribute: function(el, label) {
+ return el[label];
+ },
+
+ setAttribute: function(el, label, value) {
+ el[label] = value;
+ },
+ wrap: function(el, className) {
+ if (!el) {
+ return;
+ }
+
+ var wrapper = document.createElement('div');
+ wrapper.className = className;
+ el.parentNode.insertBefore(wrapper, el);
+ el.parentNode.removeChild(el);
+ wrapper.appendChild(el);
+ },
+
+ addClass: function(el, className) {
+ if (!el) {
+ return;
+ }
+
+ if (el.classList) {
+ el.classList.add(className);
+ } else {
+ el.className += ' ' + className;
+ }
+ },
+
+ removeClass: function(el, className) {
+ if (!el) {
+ return;
+ }
+
+ if (el.classList) {
+ el.classList.remove(className);
+ } else {
+ el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+ }
+ },
+
+ hasClass: function(el, className) {
+ if (el.classList) {
+ return el.classList.contains(className);
+ } else {
+ return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
+ }
+ },
+
+ // ex Transform
+ // ex TransitionTimingFunction
+ setVendor: function(el, property, value) {
+ if (!el) {
+ return;
+ }
+
+ el.style[property.charAt(0).toLowerCase() + property.slice(1)] = value;
+ el.style['webkit' + property] = value;
+ el.style['moz' + property] = value;
+ el.style['ms' + property] = value;
+ el.style['o' + property] = value;
+ },
+
+ trigger: function(el, event, detail = null) {
+ if (!el) {
+ return;
+ }
+
+ let customEvent = new CustomEvent(event, {
+ detail: detail
+ });
+ el.dispatchEvent(customEvent);
+ },
+
+ Listener: {
+ uid: 0
+ },
+ on: function(el, events, fn) {
+ if (!el) {
+ return;
+ }
+
+ events.split(' ').forEach(event => {
+ var _id = this.getAttribute(el, 'lg-event-uid') || '';
+ utils.Listener.uid++;
+ _id += '&' + utils.Listener.uid;
+ this.setAttribute(el, 'lg-event-uid', _id);
+ utils.Listener[event + utils.Listener.uid] = fn;
+ el.addEventListener(event.split('.')[0], fn, false);
+ });
+ },
+
+ off: function(el, event) {
+ if (!el) {
+ return;
+ }
+
+ var _id = this.getAttribute(el, 'lg-event-uid');
+ if (_id) {
+ _id = _id.split('&');
+ for (var i = 0; i < _id.length; i++) {
+ if (_id[i]) {
+ var _event = event + _id[i];
+ if (_event.substring(0, 1) === '.') {
+ for (var key in utils.Listener) {
+ if (utils.Listener.hasOwnProperty(key)) {
+ if (key.split('.').indexOf(_event.split('.')[1]) > -1) {
+ el.removeEventListener(key.split('.')[0], utils.Listener[key]);
+ this.setAttribute(el, 'lg-event-uid', this.getAttribute(el, 'lg-event-uid').replace('&' + _id[i], ''));
+ delete utils.Listener[key];
+ }
+ }
+ }
+ } else {
+ el.removeEventListener(_event.split('.')[0], utils.Listener[_event]);
+ this.setAttribute(el, 'lg-event-uid', this.getAttribute(el, 'lg-event-uid').replace('&' + _id[i], ''));
+ delete utils.Listener[_event];
+ }
+ }
+ }
+ }
+ },
+
+ param: function(obj) {
+ return Object.keys(obj).map(function(k) {
+ return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
+ }).join('&');
+ }
+};
+
+export
+default utils;
diff --git a/static/js/lightgallery.js b/static/js/lightgallery.js
new file mode 100644
index 0000000..182f418
--- /dev/null
+++ b/static/js/lightgallery.js
@@ -0,0 +1,1455 @@
+/** Polyfill the CustomEvent() constructor functionality in Internet Explorer 9 and higher */
+(function() {
+
+ if (typeof window.CustomEvent === 'function') {
+ return false;
+ }
+
+ function CustomEvent(event, params) {
+ params = params || {
+ bubbles: false,
+ cancelable: false,
+ detail: undefined
+ };
+ var evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+ return evt;
+ }
+
+ CustomEvent.prototype = window.Event.prototype;
+
+ window.CustomEvent = CustomEvent;
+})();
+
+import utils from './lg-utils';
+window.utils = utils;
+window.lgData = {
+ uid: 0
+};
+
+window.lgModules = {};
+var defaults = {
+
+ mode: 'lg-slide',
+
+ // Ex : 'ease'
+ cssEasing: 'ease',
+
+ //'for jquery animation'
+ easing: 'linear',
+ speed: 600,
+ height: '100%',
+ width: '100%',
+ addClass: '',
+ startClass: 'lg-start-zoom',
+ backdropDuration: 150,
+
+ // Set 0, if u don't want to hide the controls
+ hideBarsDelay: 6000,
+
+ useLeft: false,
+
+ // aria-labelledby attribute fot gallery
+ ariaLabelledby: '',
+
+ //aria-describedby attribute for gallery
+ ariaDescribedby: '',
+
+ closable: true,
+ loop: true,
+ escKey: true,
+ keyPress: true,
+ controls: true,
+ slideEndAnimatoin: true,
+ hideControlOnEnd: false,
+ mousewheel: false,
+
+ getCaptionFromTitleOrAlt: true,
+
+ // .lg-item || '.lg-sub-html'
+ appendSubHtmlTo: '.lg-sub-html',
+
+ subHtmlSelectorRelative: false,
+
+ /**
+ * @desc number of preload slides
+ * will exicute only after the current slide is fully loaded.
+ *
+ * @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th
+ * slide will be loaded in the background after the 4th slide is fully loaded..
+ * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ...
+ *
+ */
+ preload: 1,
+ showAfterLoad: true,
+ selector: '',
+ selectWithin: '',
+ nextHtml: '',
+ prevHtml: '',
+
+ // 0, 1
+ index: false,
+
+ iframeMaxWidth: '100%',
+
+ download: true,
+ counter: true,
+ appendCounterTo: '.lg-toolbar',
+
+ swipeThreshold: 50,
+ enableSwipe: true,
+ enableDrag: true,
+
+ dynamic: false,
+ dynamicEl: [],
+ galleryId: 1,
+ supportLegacyBrowser: true
+};
+
+function Plugin(element, options) {
+
+ // Current lightGallery element
+ this.el = element;
+
+ // lightGallery settings
+ this.s = Object.assign({}, defaults, options);
+
+ // When using dynamic mode, ensure dynamicEl is an array
+ if (this.s.dynamic && this.s.dynamicEl !== 'undefined' && this.s.dynamicEl.constructor === Array && !this.s.dynamicEl.length) {
+ throw ('When using dynamic mode, you must also define dynamicEl as an Array.');
+ }
+
+ // lightGallery modules
+ this.modules = {};
+
+ // false when lightgallery complete first slide;
+ this.lGalleryOn = false;
+
+ this.lgBusy = false;
+
+ // Timeout function for hiding controls;
+ this.hideBartimeout = false;
+
+ // To determine browser supports for touch events;
+ this.isTouch = ('ontouchstart' in document.documentElement);
+
+ // Disable hideControlOnEnd if sildeEndAnimation is true
+ if (this.s.slideEndAnimatoin) {
+ this.s.hideControlOnEnd = false;
+ }
+
+ this.items = [];
+
+ // Gallery items
+ if (this.s.dynamic) {
+ this.items = this.s.dynamicEl;
+ } else {
+ if (this.s.selector === 'this') {
+ this.items.push(this.el);
+ } else if (this.s.selector !== '') {
+ if (this.s.selectWithin) {
+ this.items = document.querySelector(this.s.selectWithin).querySelectorAll(this.s.selector);
+ } else {
+ this.items = this.el.querySelectorAll(this.s.selector);
+ }
+ } else {
+ this.items = this.el.children;
+ }
+ }
+
+ // .lg-item
+
+ this.___slide = '';
+
+ // .lg-outer
+ this.outer = '';
+
+ this.init();
+
+ return this;
+}
+
+Plugin.prototype.init = function() {
+
+ var _this = this;
+
+ // s.preload should not be more than $item.length
+ if (_this.s.preload > _this.items.length) {
+ _this.s.preload = _this.items.length;
+ }
+
+ // if dynamic option is enabled execute immediately
+ var _hash = window.location.hash;
+ if (_hash.indexOf('lg=' + this.s.galleryId) > 0) {
+
+ _this.index = parseInt(_hash.split('&slide=')[1], 10);
+
+ utils.addClass(document.body, 'lg-from-hash');
+ if (!utils.hasClass(document.body, 'lg-on')) {
+ utils.addClass(document.body, 'lg-on');
+ setTimeout(function() {
+ _this.build(_this.index);
+ });
+ }
+ }
+
+ if (_this.s.dynamic) {
+
+ utils.trigger(this.el, 'onBeforeOpen');
+
+ _this.index = _this.s.index || 0;
+
+ // prevent accidental double execution
+ if (!utils.hasClass(document.body, 'lg-on')) {
+ utils.addClass(document.body, 'lg-on');
+ setTimeout(function() {
+ _this.build(_this.index);
+ });
+ }
+ } else {
+
+ for (var i = 0; i < _this.items.length; i++) {
+
+ /*jshint loopfunc: true */
+ (function(index) {
+
+ // Using different namespace for click because click event should not unbind if selector is same object('this')
+ utils.on(_this.items[index], 'click.lgcustom', (e) => {
+
+ e.preventDefault();
+
+ utils.trigger(_this.el, 'onBeforeOpen');
+
+ _this.index = _this.s.index || index;
+
+ if (!utils.hasClass(document.body, 'lg-on')) {
+ _this.build(_this.index);
+ utils.addClass(document.body, 'lg-on');
+ }
+ });
+
+ })(i);
+
+ }
+
+ }
+
+};
+
+Plugin.prototype.build = function(index) {
+
+ var _this = this;
+
+ _this.structure();
+
+ for (var key in window.lgModules) {
+ _this.modules[key] = new window.lgModules[key](_this.el);
+ }
+
+ // initiate slide function
+ _this.slide(index, false, false);
+
+ if (_this.s.keyPress) {
+ _this.keyPress();
+ }
+
+ if (_this.items.length > 1) {
+
+ _this.arrow();
+
+ setTimeout(function() {
+ _this.enableDrag();
+ _this.enableSwipe();
+ }, 50);
+
+ if (_this.s.mousewheel) {
+ _this.mousewheel();
+ }
+ }
+
+ _this.counter();
+
+ _this.closeGallery();
+
+ utils.trigger(_this.el, 'onAfterOpen');
+
+ // Hide controllers if mouse doesn't move for some period
+ if(_this.s.hideBarsDelay > 0) {
+
+ // Hide controls if user doesn't use mouse or touch after opening gallery
+ const initialHideBarTimeout = setTimeout(function() {
+ utils.addClass(_this.outer, 'lg-hide-items');
+ }, _this.s.hideBarsDelay);
+ utils.on(_this.outer, 'mousemove.lg click.lg touchstart.lg', function() {
+
+ // Cancel initalHideBarTimout if user uses mouse or touch events
+ // Before it fires
+ clearTimeout(initialHideBarTimeout);
+
+ utils.removeClass(_this.outer, 'lg-hide-items');
+
+ clearTimeout(_this.hideBartimeout);
+
+ // Timeout will be cleared on each slide movement also
+ _this.hideBartimeout = setTimeout(function() {
+ utils.addClass(_this.outer, 'lg-hide-items');
+ }, _this.s.hideBarsDelay);
+
+ });
+ }
+
+};
+
+Plugin.prototype.structure = function() {
+ var list = '';
+ var controls = '';
+ var i = 0;
+ var subHtmlCont = '';
+ var template;
+ var _this = this;
+
+ document.body.insertAdjacentHTML('beforeend', '');
+ utils.setVendor(document.querySelector('.lg-backdrop'), 'TransitionDuration', this.s.backdropDuration + 'ms');
+
+ // Create gallery items
+ for (i = 0; i < this.items.length; i++) {
+ list += '';
+ }
+
+ // Create controlls
+ if (this.s.controls && this.items.length > 1) {
+ controls = '' +
+ '' +
+ '' +
+ '
';
+ }
+
+ if (this.s.appendSubHtmlTo === '.lg-sub-html') {
+ subHtmlCont = '';
+ }
+
+ var ariaLabelledby = this.s.ariaLabelledby ?
+ 'aria-labelledby="' + this.s.ariaLabelledby + '"' : '';
+ var ariaDescribedby = this.s.ariaDescribedby ?
+ 'aria-describedby="' + this.s.ariaDescribedby + '"' : '';
+
+ template = '' +
+ '
' +
+ '
' + list + '
' +
+ '
' +
+ '' +
+ '
' +
+ controls +
+ subHtmlCont +
+ '
' +
+ '
' + (parseInt(this.index, 10) + 1) + ' / ' + this.items.length + '
');
+ }
+};
+
+/**
+ * @desc add sub-html into the slide
+ * @param {Number} index - index of the slide
+ */
+Plugin.prototype.addHtml = function(index) {
+ var subHtml = null;
+ var currentEle;
+ if (this.s.dynamic) {
+ subHtml = this.s.dynamicEl[index].subHtml;
+ } else {
+ currentEle = this.items[index];
+ subHtml = currentEle.getAttribute('data-sub-html');
+ if (this.s.getCaptionFromTitleOrAlt && !subHtml) {
+ subHtml = currentEle.getAttribute('title');
+ if (subHtml && currentEle.querySelector('img')) {
+ subHtml = currentEle.querySelector('img').getAttribute('alt');
+ }
+ }
+ }
+
+ if (typeof subHtml !== 'undefined' && subHtml !== null) {
+
+ // get first letter of subhtml
+ // if first letter starts with . or # get the html form the jQuery object
+ var fL = subHtml.substring(0, 1);
+ if (fL === '.' || fL === '#') {
+ if (this.s.subHtmlSelectorRelative && !this.s.dynamic) {
+ subHtml = currentEle.querySelector(subHtml).innerHTML;
+ } else {
+ subHtml = document.querySelector(subHtml).innerHTML;
+ }
+ }
+ } else {
+ subHtml = '';
+ }
+
+ if (this.s.appendSubHtmlTo === '.lg-sub-html') {
+ this.outer.querySelector(this.s.appendSubHtmlTo).innerHTML = subHtml;
+ } else {
+ this.___slide[index].insertAdjacentHTML('beforeend', subHtml);
+ }
+
+ // Add lg-empty-html class if title doesn't exist
+ if (typeof subHtml !== 'undefined' && subHtml !== null) {
+ if (subHtml === '') {
+ utils.addClass(this.outer.querySelector(this.s.appendSubHtmlTo), 'lg-empty-html');
+ } else {
+ utils.removeClass(this.outer.querySelector(this.s.appendSubHtmlTo), 'lg-empty-html');
+ }
+ }
+
+ utils.trigger(this.el, 'onAfterAppendSubHtml', {
+ index: index
+ });
+};
+
+/**
+ * @desc Preload slides
+ * @param {Number} index - index of the slide
+ */
+Plugin.prototype.preload = function(index) {
+ var i = 1;
+ var j = 1;
+ for (i = 1; i <= this.s.preload; i++) {
+ if (i >= this.items.length - index) {
+ break;
+ }
+
+ this.loadContent(index + i, false, 0);
+ }
+
+ for (j = 1; j <= this.s.preload; j++) {
+ if (index - j < 0) {
+ break;
+ }
+
+ this.loadContent(index - j, false, 0);
+ }
+};
+
+/**
+ * @desc Load slide content into slide.
+ * @param {Number} index - index of the slide.
+ * @param {Boolean} rec - if true call loadcontent() function again.
+ * @param {Boolean} delay - delay for adding complete class. it is 0 except first time.
+ */
+Plugin.prototype.loadContent = function(index, rec, delay) {
+
+ var _this = this;
+ var _hasPoster = false;
+ var _img;
+ var _src;
+ var _poster;
+ var _srcset;
+ var _sizes;
+ var _html;
+ var _alt;
+ var getResponsiveSrc = function(srcItms) {
+ var rsWidth = [];
+ var rsSrc = [];
+ for (var i = 0; i < srcItms.length; i++) {
+ var __src = srcItms[i].split(' ');
+
+ // Manage empty space
+ if (__src[0] === '') {
+ __src.splice(0, 1);
+ }
+
+ rsSrc.push(__src[0]);
+ rsWidth.push(__src[1]);
+ }
+
+ var wWidth = window.innerWidth;
+ for (var j = 0; j < rsWidth.length; j++) {
+ if (parseInt(rsWidth[j], 10) > wWidth) {
+ _src = rsSrc[j];
+ break;
+ }
+ }
+ };
+
+ if (_this.s.dynamic) {
+
+ if (_this.s.dynamicEl[index].poster) {
+ _hasPoster = true;
+ _poster = _this.s.dynamicEl[index].poster;
+ }
+
+ _html = _this.s.dynamicEl[index].html;
+ _src = _this.s.dynamicEl[index].src;
+ _alt = _this.s.dynamicEl[index].alt;
+
+ if (_this.s.dynamicEl[index].responsive) {
+ var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');
+ getResponsiveSrc(srcDyItms);
+ }
+
+ _srcset = _this.s.dynamicEl[index].srcset;
+ _sizes = _this.s.dynamicEl[index].sizes;
+
+ } else {
+
+ if (_this.items[index].getAttribute('data-poster')) {
+ _hasPoster = true;
+ _poster = _this.items[index].getAttribute('data-poster');
+ }
+
+ _html = _this.items[index].getAttribute('data-html');
+ _src = _this.items[index].getAttribute('href') || _this.items[index].getAttribute('data-src');
+ _alt = _this.items[index].getAttribute('title');
+
+ if (_this.items[index].querySelector('img')) {
+ _alt = _alt || _this.items[index].querySelector('img').getAttribute('alt');
+ }
+
+ if (_this.items[index].getAttribute('data-responsive')) {
+ var srcItms = _this.items[index].getAttribute('data-responsive').split(',');
+ getResponsiveSrc(srcItms);
+ }
+
+ _srcset = _this.items[index].getAttribute('data-srcset');
+ _sizes = _this.items[index].getAttribute('data-sizes');
+
+ }
+
+ //if (_src || _srcset || _sizes || _poster) {
+
+ var iframe = false;
+ if (_this.s.dynamic) {
+ if (_this.s.dynamicEl[index].iframe) {
+ iframe = true;
+ }
+ } else {
+ if (_this.items[index].getAttribute('data-iframe') === 'true') {
+ iframe = true;
+ }
+ }
+
+ var _isVideo = _this.isVideo(_src, index);
+ if (!utils.hasClass(_this.___slide[index], 'lg-loaded')) {
+ if (iframe) {
+ _this.___slide[index].insertAdjacentHTML('afterbegin', '');
+ } else if (_hasPoster) {
+ var videoClass = '';
+ if (_isVideo && _isVideo.youtube) {
+ videoClass = 'lg-has-youtube';
+ } else if (_isVideo && _isVideo.vimeo) {
+ videoClass = 'lg-has-vimeo';
+ } else {
+ videoClass = 'lg-has-html5';
+ }
+
+ _this.___slide[index].insertAdjacentHTML('beforeend', '');
+
+ } else if (_isVideo) {
+ _this.___slide[index].insertAdjacentHTML('beforeend', '');
+ utils.trigger(_this.el, 'hasVideo', {
+ index: index,
+ src: _src,
+ html: _html
+ });
+ } else {
+ _alt = _alt ? 'alt="' + _alt + '"' : '';
+ _this.___slide[index].insertAdjacentHTML('beforeend', '');
+ }
+
+ utils.trigger(_this.el, 'onAferAppendSlide', {
+ index: index
+ });
+
+ _img = _this.___slide[index].querySelector('.lg-object');
+ if (_sizes) {
+ _img.setAttribute('sizes', _sizes);
+ }
+
+ if (_srcset) {
+ _img.setAttribute('srcset', _srcset);
+
+ if (this.s.supportLegacyBrowser) {
+ try {
+ picturefill({
+ elements: [_img[0]]
+ });
+ } catch (e) {
+ console.warn('If you want srcset to be supported for older browsers, ' +
+ 'please include picturefil javascript library in your document.');
+ }
+ }
+ }
+
+ if (this.s.appendSubHtmlTo !== '.lg-sub-html') {
+ _this.addHtml(index);
+ }
+
+ utils.addClass(_this.___slide[index], 'lg-loaded');
+ }
+
+ utils.on(_this.___slide[index].querySelector('.lg-object'), 'load.lg error.lg', function() {
+
+ // For first time add some delay for displaying the start animation.
+ var _speed = 0;
+
+ // Do not change the delay value because it is required for zoom plugin.
+ // If gallery opened from direct url (hash) speed value should be 0
+ if (delay && !utils.hasClass(document.body, 'lg-from-hash')) {
+ _speed = delay;
+ }
+
+ setTimeout(function() {
+ utils.addClass(_this.___slide[index], 'lg-complete');
+
+ utils.trigger(_this.el, 'onSlideItemLoad', {
+ index: index,
+ delay: delay || 0
+ });
+ }, _speed);
+
+ });
+
+ // @todo check load state for html5 videos
+ if (_isVideo && _isVideo.html5 && !_hasPoster) {
+ utils.addClass(_this.___slide[index], 'lg-complete');
+ }
+
+ if (rec === true) {
+ if (!utils.hasClass(_this.___slide[index], 'lg-complete')) {
+ utils.on(_this.___slide[index].querySelector('.lg-object'), 'load.lg error.lg', function() {
+ _this.preload(index);
+ });
+ } else {
+ _this.preload(index);
+ }
+ }
+
+ //}
+};
+
+/**
+* @desc slide function for lightgallery
+ ** Slide() gets call on start
+ ** ** Set lg.on true once slide() function gets called.
+ ** Call loadContent() on slide() function inside setTimeout
+ ** ** On first slide we do not want any animation like slide of fade
+ ** ** So on first slide( if lg.on if false that is first slide) loadContent() should start loading immediately
+ ** ** Else loadContent() should wait for the transition to complete.
+ ** ** So set timeout s.speed + 50
+<=> ** loadContent() will load slide content in to the particular slide
+ ** ** It has recursion (rec) parameter. if rec === true loadContent() will call preload() function.
+ ** ** preload will execute only when the previous slide is fully loaded (images iframe)
+ ** ** avoid simultaneous image load
+<=> ** Preload() will check for s.preload value and call loadContent() again accoring to preload value
+ ** loadContent() <====> Preload();
+
+* @param {Number} index - index of the slide
+* @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag
+* @param {Boolean} fromThumb - true if slide function called via thumbnail click
+*/
+Plugin.prototype.slide = function(index, fromTouch, fromThumb) {
+
+ var _prevIndex = 0;
+ for (var i = 0; i < this.___slide.length; i++) {
+ if (utils.hasClass(this.___slide[i], 'lg-current')) {
+ _prevIndex = i;
+ break;
+ }
+ }
+
+ var _this = this;
+
+ // Prevent if multiple call
+ // Required for hsh plugin
+ if (_this.lGalleryOn && (_prevIndex === index)) {
+ return;
+ }
+
+ var _length = this.___slide.length;
+ var _time = _this.lGalleryOn ? this.s.speed : 0;
+ var _next = false;
+ var _prev = false;
+
+ if (!_this.lgBusy) {
+
+ if (this.s.download) {
+ var _src;
+ if (_this.s.dynamic) {
+ _src = _this.s.dynamicEl[index].downloadUrl !== false && (_this.s.dynamicEl[index].downloadUrl || _this.s.dynamicEl[index].src);
+ } else {
+ _src = _this.items[index].getAttribute('data-download-url') !== 'false' && (_this.items[index].getAttribute('data-download-url') || _this.items[index].getAttribute('href') || _this.items[index].getAttribute('data-src'));
+
+ }
+
+ if (_src) {
+ document.getElementById('lg-download').setAttribute('href', _src);
+ utils.removeClass(_this.outer, 'lg-hide-download');
+ } else {
+ utils.addClass(_this.outer, 'lg-hide-download');
+ }
+ }
+
+ utils.trigger(_this.el, 'onBeforeSlide', {
+ prevIndex: _prevIndex,
+ index: index,
+ fromTouch: fromTouch,
+ fromThumb: fromThumb
+ });
+
+ _this.lgBusy = true;
+
+ clearTimeout(_this.hideBartimeout);
+
+ // Add title if this.s.appendSubHtmlTo === lg-sub-html
+ if (this.s.appendSubHtmlTo === '.lg-sub-html') {
+
+ // wait for slide animation to complete
+ setTimeout(function() {
+ _this.addHtml(index);
+ }, _time);
+ }
+
+ this.arrowDisable(index);
+
+ if (!fromTouch) {
+
+ // remove all transitions
+ utils.addClass(_this.outer, 'lg-no-trans');
+
+ for (var j = 0; j < this.___slide.length; j++) {
+ utils.removeClass(this.___slide[j], 'lg-prev-slide');
+ utils.removeClass(this.___slide[j], 'lg-next-slide');
+ }
+
+ if (index < _prevIndex) {
+ _prev = true;
+ if ((index === 0) && (_prevIndex === _length - 1) && !fromThumb) {
+ _prev = false;
+ _next = true;
+ }
+ } else if (index > _prevIndex) {
+ _next = true;
+ if ((index === _length - 1) && (_prevIndex === 0) && !fromThumb) {
+ _prev = true;
+ _next = false;
+ }
+ }
+
+ if (_prev) {
+
+ //prevslide
+ utils.addClass(this.___slide[index], 'lg-prev-slide');
+ utils.addClass(this.___slide[_prevIndex], 'lg-next-slide');
+ } else if (_next) {
+
+ // next slide
+ utils.addClass(this.___slide[index], 'lg-next-slide');
+ utils.addClass(this.___slide[_prevIndex], 'lg-prev-slide');
+ }
+
+ // give 50 ms for browser to add/remove class
+ setTimeout(function() {
+ utils.removeClass(_this.outer.querySelector('.lg-current'), 'lg-current');
+
+ //_this.$slide.eq(_prevIndex).removeClass('lg-current');
+ utils.addClass(_this.___slide[index], 'lg-current');
+
+ // reset all transitions
+ utils.removeClass(_this.outer, 'lg-no-trans');
+ }, 50);
+ } else {
+
+ var touchPrev = index - 1;
+ var touchNext = index + 1;
+
+ if ((index === 0) && (_prevIndex === _length - 1)) {
+
+ // next slide
+ touchNext = 0;
+ touchPrev = _length - 1;
+ } else if ((index === _length - 1) && (_prevIndex === 0)) {
+
+ // prev slide
+ touchNext = 0;
+ touchPrev = _length - 1;
+ }
+
+ utils.removeClass(_this.outer.querySelector('.lg-prev-slide'), 'lg-prev-slide');
+ utils.removeClass(_this.outer.querySelector('.lg-current'), 'lg-current');
+ utils.removeClass(_this.outer.querySelector('.lg-next-slide'), 'lg-next-slide');
+ utils.addClass(_this.___slide[touchPrev], 'lg-prev-slide');
+ utils.addClass(_this.___slide[touchNext], 'lg-next-slide');
+ utils.addClass(_this.___slide[index], 'lg-current');
+ }
+
+ if (_this.lGalleryOn) {
+ setTimeout(function() {
+ _this.loadContent(index, true, 0);
+ }, this.s.speed + 50);
+
+ setTimeout(function() {
+ _this.lgBusy = false;
+ utils.trigger(_this.el, 'onAfterSlide', {
+ prevIndex: _prevIndex,
+ index: index,
+ fromTouch: fromTouch,
+ fromThumb: fromThumb
+ });
+ }, this.s.speed);
+
+ } else {
+ _this.loadContent(index, true, _this.s.backdropDuration);
+
+ _this.lgBusy = false;
+ utils.trigger(_this.el, 'onAfterSlide', {
+ prevIndex: _prevIndex,
+ index: index,
+ fromTouch: fromTouch,
+ fromThumb: fromThumb
+ });
+ }
+
+ _this.lGalleryOn = true;
+
+ if (this.s.counter) {
+ if (document.getElementById('lg-counter-current')) {
+ document.getElementById('lg-counter-current').innerHTML = index + 1;
+ }
+ }
+
+ }
+
+};
+
+/**
+ * @desc Go to next slide
+ * @param {Boolean} fromTouch - true if slide function called via touch event
+ */
+Plugin.prototype.goToNextSlide = function(fromTouch) {
+ var _this = this;
+ if (!_this.lgBusy) {
+ if ((_this.index + 1) < _this.___slide.length) {
+ _this.index++;
+ utils.trigger(_this.el, 'onBeforeNextSlide', {
+ index: _this.index
+ });
+ _this.slide(_this.index, fromTouch, false);
+ } else {
+ if (_this.s.loop) {
+ _this.index = 0;
+ utils.trigger(_this.el, 'onBeforeNextSlide', {
+ index: _this.index
+ });
+ _this.slide(_this.index, fromTouch, false);
+ } else if (_this.s.slideEndAnimatoin) {
+ utils.addClass(_this.outer, 'lg-right-end');
+ setTimeout(function() {
+ utils.removeClass(_this.outer, 'lg-right-end');
+ }, 400);
+ }
+ }
+ }
+};
+
+/**
+ * @desc Go to previous slide
+ * @param {Boolean} fromTouch - true if slide function called via touch event
+ */
+Plugin.prototype.goToPrevSlide = function(fromTouch) {
+ var _this = this;
+ if (!_this.lgBusy) {
+ if (_this.index > 0) {
+ _this.index--;
+ utils.trigger(_this.el, 'onBeforePrevSlide', {
+ index: _this.index,
+ fromTouch: fromTouch
+ });
+ _this.slide(_this.index, fromTouch, false);
+ } else {
+ if (_this.s.loop) {
+ _this.index = _this.items.length - 1;
+ utils.trigger(_this.el, 'onBeforePrevSlide', {
+ index: _this.index,
+ fromTouch: fromTouch
+ });
+ _this.slide(_this.index, fromTouch, false);
+ } else if (_this.s.slideEndAnimatoin) {
+ utils.addClass(_this.outer, 'lg-left-end');
+ setTimeout(function() {
+ utils.removeClass(_this.outer, 'lg-left-end');
+ }, 400);
+ }
+ }
+ }
+};
+
+Plugin.prototype.keyPress = function() {
+ var _this = this;
+ if (this.items.length > 1) {
+ utils.on(window, 'keyup.lg', function(e) {
+ if (_this.items.length > 1) {
+ if (e.keyCode === 37) {
+ e.preventDefault();
+ _this.goToPrevSlide();
+ }
+
+ if (e.keyCode === 39) {
+ e.preventDefault();
+ _this.goToNextSlide();
+ }
+ }
+ });
+ }
+
+ utils.on(window, 'keydown.lg', function(e) {
+ if (_this.s.escKey === true && e.keyCode === 27) {
+ e.preventDefault();
+ if (!utils.hasClass(_this.outer, 'lg-thumb-open')) {
+ _this.destroy();
+ } else {
+ utils.removeClass(_this.outer, 'lg-thumb-open');
+ }
+ }
+ });
+};
+
+Plugin.prototype.arrow = function() {
+ var _this = this;
+ utils.on(this.outer.querySelector('.lg-prev'), 'click.lg', function() {
+ _this.goToPrevSlide();
+ });
+
+ utils.on(this.outer.querySelector('.lg-next'), 'click.lg', function() {
+ _this.goToNextSlide();
+ });
+};
+
+Plugin.prototype.arrowDisable = function(index) {
+
+ // Disable arrows if s.hideControlOnEnd is true
+ if (!this.s.loop && this.s.hideControlOnEnd) {
+ let next = this.outer.querySelector('.lg-next');
+ let prev = this.outer.querySelector('.lg-prev');
+ if ((index + 1) < this.___slide.length) {
+ next.removeAttribute('disabled');
+ utils.removeClass(next, 'disabled');
+ } else {
+ next.setAttribute('disabled', 'disabled');
+ utils.addClass(next, 'disabled');
+ }
+
+ if (index > 0) {
+ prev.removeAttribute('disabled');
+ utils.removeClass(prev, 'disabled');
+ } else {
+ prev.setAttribute('disabled', 'disabled');
+ utils.addClass(prev, 'disabled');
+ }
+ }
+};
+
+Plugin.prototype.setTranslate = function(el, xValue, yValue) {
+ // jQuery supports Automatic CSS prefixing since jQuery 1.8.0
+ if (this.s.useLeft) {
+ el.style.left = xValue;
+ } else {
+ utils.setVendor(el, 'Transform', 'translate3d(' + (xValue) + 'px, ' + yValue + 'px, 0px)');
+ }
+};
+
+Plugin.prototype.touchMove = function(startCoords, endCoords) {
+
+ var distance = endCoords - startCoords;
+
+ if (Math.abs(distance) > 15) {
+ // reset opacity and transition duration
+ utils.addClass(this.outer, 'lg-dragging');
+
+ // move current slide
+ this.setTranslate(this.___slide[this.index], distance, 0);
+
+ // move next and prev slide with current slide
+ this.setTranslate(document.querySelector('.lg-prev-slide'), -this.___slide[this.index].clientWidth + distance, 0);
+ this.setTranslate(document.querySelector('.lg-next-slide'), this.___slide[this.index].clientWidth + distance, 0);
+ }
+};
+
+Plugin.prototype.touchEnd = function(distance) {
+ var _this = this;
+
+ // keep slide animation for any mode while dragg/swipe
+ if (_this.s.mode !== 'lg-slide') {
+ utils.addClass(_this.outer, 'lg-slide');
+ }
+
+ for (var i = 0; i < this.___slide.length; i++) {
+ if (!utils.hasClass(this.___slide[i], 'lg-current') && !utils.hasClass(this.___slide[i], 'lg-prev-slide') && !utils.hasClass(this.___slide[i], 'lg-next-slide')) {
+ this.___slide[i].style.opacity = '0';
+ }
+ }
+
+ // set transition duration
+ setTimeout(function() {
+ utils.removeClass(_this.outer, 'lg-dragging');
+ if ((distance < 0) && (Math.abs(distance) > _this.s.swipeThreshold)) {
+ _this.goToNextSlide(true);
+ } else if ((distance > 0) && (Math.abs(distance) > _this.s.swipeThreshold)) {
+ _this.goToPrevSlide(true);
+ } else if (Math.abs(distance) < 5) {
+
+ // Trigger click if distance is less than 5 pix
+ utils.trigger(_this.el, 'onSlideClick');
+ }
+
+ for (var i = 0; i < _this.___slide.length; i++) {
+ _this.___slide[i].removeAttribute('style');
+ }
+ });
+
+ // remove slide class once drag/swipe is completed if mode is not slide
+ setTimeout(function() {
+ if (!utils.hasClass(_this.outer, 'lg-dragging') && _this.s.mode !== 'lg-slide') {
+ utils.removeClass(_this.outer, 'lg-slide');
+ }
+ }, _this.s.speed + 100);
+
+};
+
+Plugin.prototype.enableSwipe = function() {
+ var _this = this;
+ var startCoords = 0;
+ var endCoords = 0;
+ var isMoved = false;
+
+ if (_this.s.enableSwipe && _this.isTouch && _this.doCss()) {
+
+ for (var i = 0; i < _this.___slide.length; i++) {
+ /*jshint loopfunc: true */
+ utils.on(_this.___slide[i], 'touchstart.lg', function(e) {
+ if (!utils.hasClass(_this.outer, 'lg-zoomed') && !_this.lgBusy) {
+ e.preventDefault();
+ _this.manageSwipeClass();
+ startCoords = e.targetTouches[0].pageX;
+ }
+ });
+ }
+
+ for (var j = 0; j < _this.___slide.length; j++) {
+ /*jshint loopfunc: true */
+ utils.on(_this.___slide[j], 'touchmove.lg', function(e) {
+ if (!utils.hasClass(_this.outer, 'lg-zoomed')) {
+ e.preventDefault();
+ endCoords = e.targetTouches[0].pageX;
+ _this.touchMove(startCoords, endCoords);
+ isMoved = true;
+ }
+ });
+ }
+
+ for (var k = 0; k < _this.___slide.length; k++) {
+ /*jshint loopfunc: true */
+ utils.on(_this.___slide[k], 'touchend.lg', function() {
+ if (!utils.hasClass(_this.outer, 'lg-zoomed')) {
+ if (isMoved) {
+ isMoved = false;
+ _this.touchEnd(endCoords - startCoords);
+ } else {
+ utils.trigger(_this.el, 'onSlideClick');
+ }
+ }
+ });
+ }
+ }
+
+};
+
+Plugin.prototype.enableDrag = function() {
+ var _this = this;
+ var startCoords = 0;
+ var endCoords = 0;
+ var isDraging = false;
+ var isMoved = false;
+ if (_this.s.enableDrag && !_this.isTouch && _this.doCss()) {
+ for (var i = 0; i < _this.___slide.length; i++) {
+ /*jshint loopfunc: true */
+ utils.on(_this.___slide[i], 'mousedown.lg', function(e) {
+ // execute only on .lg-object
+ if (!utils.hasClass(_this.outer, 'lg-zoomed')) {
+ if (utils.hasClass(e.target, 'lg-object') || utils.hasClass(e.target, 'lg-video-play')) {
+ e.preventDefault();
+
+ if (!_this.lgBusy) {
+ _this.manageSwipeClass();
+ startCoords = e.pageX;
+ isDraging = true;
+
+ // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
+ _this.outer.scrollLeft += 1;
+ _this.outer.scrollLeft -= 1;
+
+ // *
+
+ utils.removeClass(_this.outer, 'lg-grab');
+ utils.addClass(_this.outer, 'lg-grabbing');
+
+ utils.trigger(_this.el, 'onDragstart');
+ }
+
+ }
+ }
+ });
+ }
+
+ utils.on(window, 'mousemove.lg', function(e) {
+ if (isDraging) {
+ isMoved = true;
+ endCoords = e.pageX;
+ _this.touchMove(startCoords, endCoords);
+ utils.trigger(_this.el, 'onDragmove');
+ }
+ });
+
+ utils.on(window, 'mouseup.lg', function(e) {
+ if (isMoved) {
+ isMoved = false;
+ _this.touchEnd(endCoords - startCoords);
+ utils.trigger(_this.el, 'onDragend');
+ } else if (utils.hasClass(e.target, 'lg-object') || utils.hasClass(e.target, 'lg-video-play')) {
+ utils.trigger(_this.el, 'onSlideClick');
+ }
+
+ // Prevent execution on click
+ if (isDraging) {
+ isDraging = false;
+ utils.removeClass(_this.outer, 'lg-grabbing');
+ utils.addClass(_this.outer, 'lg-grab');
+ }
+ });
+
+ }
+};
+
+Plugin.prototype.manageSwipeClass = function() {
+ var touchNext = this.index + 1;
+ var touchPrev = this.index - 1;
+ var length = this.___slide.length;
+ if (this.s.loop) {
+ if (this.index === 0) {
+ touchPrev = length - 1;
+ } else if (this.index === length - 1) {
+ touchNext = 0;
+ }
+ }
+
+ for (var i = 0; i < this.___slide.length; i++) {
+ utils.removeClass(this.___slide[i], 'lg-next-slide');
+ utils.removeClass(this.___slide[i], 'lg-prev-slide');
+ }
+
+ if (touchPrev > -1) {
+ utils.addClass(this.___slide[touchPrev], 'lg-prev-slide');
+ }
+
+ utils.addClass(this.___slide[touchNext], 'lg-next-slide');
+};
+
+Plugin.prototype.mousewheel = function() {
+ var _this = this;
+ utils.on(_this.outer, 'mousewheel.lg', function(e) {
+
+ if (!e.deltaY) {
+ return;
+ }
+
+ if (e.deltaY > 0) {
+ _this.goToPrevSlide();
+ } else {
+ _this.goToNextSlide();
+ }
+
+ e.preventDefault();
+ });
+
+};
+
+Plugin.prototype.closeGallery = function() {
+
+ var _this = this;
+ var mousedown = false;
+ utils.on(this.outer.querySelector('.lg-close'), 'click.lg', function() {
+ _this.destroy();
+ });
+
+ if (_this.s.closable) {
+
+ // If you drag the slide and release outside gallery gets close on chrome
+ // for preventing this check mousedown and mouseup happened on .lg-item or lg-outer
+ utils.on(_this.outer, 'mousedown.lg', function(e) {
+
+ if (utils.hasClass(e.target, 'lg-outer') || utils.hasClass(e.target, 'lg-item') || utils.hasClass(e.target, 'lg-img-wrap')) {
+ mousedown = true;
+ } else {
+ mousedown = false;
+ }
+
+ });
+
+ utils.on(_this.outer, 'mouseup.lg', function(e) {
+
+ if (utils.hasClass(e.target, 'lg-outer') || utils.hasClass(e.target, 'lg-item') || utils.hasClass(e.target, 'lg-img-wrap') && mousedown) {
+ if (!utils.hasClass(_this.outer, 'lg-dragging')) {
+ _this.destroy();
+ }
+ }
+
+ });
+
+ }
+
+};
+
+Plugin.prototype.destroy = function(d) {
+
+ var _this = this;
+
+ if (!d) {
+ utils.trigger(_this.el, 'onBeforeClose');
+ }
+
+ document.body.scrollTop = _this.prevScrollTop;
+ document.documentElement.scrollTop = _this.prevScrollTop;
+
+ /**
+ * if d is false or undefined destroy will only close the gallery
+ * plugins instance remains with the element
+ *
+ * if d is true destroy will completely remove the plugin
+ */
+
+ if (d) {
+ if (!_this.s.dynamic) {
+ // only when not using dynamic mode is $items a jquery collection
+
+ for (var i = 0; i < this.items.length; i++) {
+ utils.off(this.items[i], '.lg');
+ utils.off(this.items[i], '.lgcustom');
+ }
+ }
+
+ let lguid = _this.el.getAttribute('lg-uid');
+ delete window.lgData[lguid];
+ _this.el.removeAttribute('lg-uid');
+ }
+
+ // Unbind all events added by lightGallery
+ utils.off(this.el, '.lgtm');
+
+ // Distroy all lightGallery modules
+ for (var key in window.lgModules) {
+ if (_this.modules[key]) {
+ _this.modules[key].destroy(d);
+ }
+ }
+
+ this.lGalleryOn = false;
+
+ clearTimeout(_this.hideBartimeout);
+ this.hideBartimeout = false;
+ utils.off(window, '.lg');
+ utils.removeClass(document.body, 'lg-on');
+ utils.removeClass(document.body, 'lg-from-hash');
+
+ if (_this.outer) {
+ utils.removeClass(_this.outer, 'lg-visible');
+ }
+
+ utils.removeClass(document.querySelector('.lg-backdrop'), 'in');
+ setTimeout(function() {
+ try {
+ if (_this.outer) {
+ _this.outer.parentNode.removeChild(_this.outer);
+ }
+
+ if (document.querySelector('.lg-backdrop')) {
+ document.querySelector('.lg-backdrop').parentNode.removeChild(document.querySelector('.lg-backdrop'));
+ }
+
+ if (!d) {
+ utils.trigger(_this.el, 'onCloseAfter');
+ }
+ _this.el.focus();
+ } catch (err) {}
+
+ }, _this.s.backdropDuration + 50);
+};
+
+window.lightGallery = function(el, options) {
+ if (!el) {
+ return;
+ }
+
+ try {
+ if (!el.getAttribute('lg-uid')) {
+ let uid = 'lg' + window.lgData.uid++;
+ window.lgData[uid] = new Plugin(el, options);
+ el.setAttribute('lg-uid', uid);
+ } else {
+ window.lgData[el.getAttribute('lg-uid')].init();
+ }
+ } catch (err) {
+ console.error('lightGallery has not initiated properly', err);
+ }
+};
diff --git a/static/js/my.js b/static/js/my.js
new file mode 100644
index 0000000..c119af1
--- /dev/null
+++ b/static/js/my.js
@@ -0,0 +1,93 @@
+function httpGet(theUrl)
+{
+ var xmlHttp = new XMLHttpRequest();
+ xmlHttp.open( "GET", theUrl, false );
+ xmlHttp.send( null );
+ return JSON.parse(xmlHttp.responseText);
+}
+function onchange(e){
+ var val = e.target.value;
+ console.log(val);
+ val_pars = val.split(" ");
+ val_end = val_pars[val_pars.length - 1];
+ url_req = location.origin + "/autoc/" + val_end;
+ resp_res = httpGet(url_req)["list"];
+ var tagsac = document.getElementById("tagnameac");
+ tagsac.innerHTML = '';
+ resp_res.forEach(function(item, i, resp_res) {
+ var add_elem = document.createElement("option");
+ add_elem.value = val.replace(val_end, item+" ");
+ tagsac.appendChild(add_elem);
+ });
+}
+function search(e){
+ if (e.keyCode === 13) {
+ var tagsac = document.getElementById("myInput");
+ var val = tagsac.value;
+ replacec = 1
+ while (replacec == 1) {
+ val = val.replace(" ", "+");
+ if(val.includes(" ")==false) {
+ replacec = 0
+ }
+ }
+ type = document.getElementById("selected-r").value;
+ url_req = location.origin + "/search/" + type + "/" + val;
+ resp_res = httpGet(url_req)["list"];
+ console.log(resp_res);
+ var imgc = document.getElementById("aniimated-thumbnials");
+ imgc.innerHTML = '';
+ resp_res.forEach(function(item, i, resp_res) {
+ var add_elem_a = document.createElement("button");
+ add_elem_a.setAttribute("onclick", "see_full('"+item["url_full"]+"', '"+item["id"]+"', '"+item["type"]+"')");
+ add_elem_a.setAttribute("id", item["id"]);
+ add_elem_a.setAttribute("class", "buttimg");
+ var add_elem_img = document.createElement("img");
+ add_elem_img.setAttribute("src", item["url_thumb"]);
+ add_elem_img.setAttribute("loading", "lazy");
+ add_elem_img.setAttribute("title", item["tags"]);
+ add_elem_img.setAttribute("data-src", "/static/gif/loading.gif");
+ add_elem_a.appendChild(add_elem_img);
+ imgc.appendChild(add_elem_a);
+ });
+ }
+}
+function see_full(url, id_button, type){
+ var fulldata = document.getElementById("fullimg");
+ if (fulldata != null){
+ fulldata.remove();
+ }
+ var add_elem_br = document.createElement("br");
+ var add_elem_p = document.createElement("p");
+ add_elem_p.setAttribute("class", "fullimagep");
+ add_elem_p.setAttribute("id", "fullimg");
+ var add_elem_a = document.createElement("a");
+ add_elem_a.setAttribute("href", "#"+id_button);
+ var add_elem_button = document.createElement("button");
+ add_elem_button.textContent = 'CLOSE';
+ add_elem_button.setAttribute("class", "buttonclose");
+ add_elem_button.setAttribute("onclick", "close_full()");
+ var add_elem_ai = document.createElement("a");
+ add_elem_ai.setAttribute("href", url);
+ add_elem_ai.setAttribute("target", "_blank");
+ var add_elem_img = document.createElement("img");
+ add_elem_img.setAttribute("src", url);
+ add_elem_img.setAttribute("class", "fullimage");
+ add_elem_ai.append(add_elem_img)
+ add_elem_p.appendChild(add_elem_button);
+ add_elem_p.appendChild(add_elem_br);
+ add_elem_p.appendChild(add_elem_ai);
+ var targetimg = document.getElementById(id_button);
+ targetimg.after(add_elem_p)
+ add_elem_a.click();
+}
+function close_full(){
+ var fulldata = document.getElementById("fullimg");
+ fulldata.remove();
+}
+
+function main_my(){
+ var tagBox = document.getElementById("myInput");
+ tagBox.addEventListener("input", onchange);
+ tagBox.addEventListener("keydown", search);
+}
\ No newline at end of file
diff --git a/static/sass/lg-animations.scss b/static/sass/lg-animations.scss
new file mode 100644
index 0000000..8ae9484
--- /dev/null
+++ b/static/sass/lg-animations.scss
@@ -0,0 +1,714 @@
+.lg-css3 {
+ // Remove all transition effects
+ &.lg-no-trans {
+ .lg-prev-slide, .lg-next-slide, .lg-current {
+ @include transitionCustom(none 0s ease 0s !important);
+ }
+ }
+
+ &.lg-use-css3 {
+ .lg-item {
+ will-change: transform, opacity;
+ }
+ }
+
+ &.lg-use-left {
+ .lg-item {
+ will-change: left, opacity;
+ }
+ }
+
+ &.lg-zoom-in {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-zoom-out {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-zoom-out-in {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-zoom-in-out {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-soft-zoom {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(1.2, 1.2, 1.2);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(0.8, 0.8, 0.8);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-circular {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, 0, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, 0, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-up {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, -100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-down {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, 100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-circular-vertical {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(0, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(0, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-vertical-left {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-vertical-down {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-vertical {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include translate3d(0, -100%, 0);
+ }
+
+ &.lg-next-slide {
+ @include translate3d(0, 100%, 0);
+ }
+
+ &.lg-current {
+ @include translate3d(0, 0, 0);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-vertical-growth {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(60deg, 0deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(60deg, 0deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(-60deg, 0deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(-60deg, 0deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only-y {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, 60deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, 60deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only-y-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, -60deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, -60deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(60deg, 0deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(60deg, 0deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(-60deg, 0deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(-60deg, 0deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-cross {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, 60deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, 60deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-cross-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, -60deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, -60deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(60deg, 0deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(60deg, 0deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(-60deg, 0deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(-60deg, 0deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver-cross {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, 60deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, 60deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver-cross-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, -60deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, -60deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-lollipop {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include translate3d(-100%, 0, 0);
+ }
+
+ &.lg-next-slide {
+ @include transform(translate3d(0, 0, 0) scale(0.5));
+ }
+
+ &.lg-current {
+ @include translate3d(0, 0, 0);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-lollipop-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(translate3d(0, 0, 0) scale(0.5));
+ }
+
+ &.lg-next-slide {
+ @include translate3d(100%, 0, 0);
+ }
+
+ &.lg-current {
+ @include translate3d(0, 0, 0);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-rotate {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(rotate(-360deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(rotate(360deg));
+ }
+
+ &.lg-current {
+ @include transform(rotate(0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-rotate-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(rotate(360deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(rotate(-360deg));
+ }
+
+ &.lg-current {
+ @include transform(rotate(0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-tube {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(1, 0, 1) translate3d(-100%, 0, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(1, 0, 1) translate3d(100%, 0, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-autoplay.scss b/static/sass/lg-autoplay.scss
new file mode 100644
index 0000000..dbb856b
--- /dev/null
+++ b/static/sass/lg-autoplay.scss
@@ -0,0 +1,36 @@
+.lg-progress-bar {
+ background-color: $lg-progress-bar-bg;
+ height: $lg-progress-bar-height;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: $zindex-progressbar;
+ opacity: 0;
+ @include transitionCustom(opacity 0.08s ease 0s);
+
+ .lg-progress {
+ background-color: $lg-progress-bar-active-bg;
+ height: $lg-progress-bar-height;
+ width: 0;
+ }
+
+ &.lg-start {
+ .lg-progress {
+ width: 100%;
+ }
+ }
+
+ .lg-show-autoplay & {
+ opacity: 1;
+ }
+}
+
+.lg-autoplay-button {
+ &:after {
+ .lg-show-autoplay & {
+ content: "\e01a";
+ }
+ content: "\e01d";
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-fb-comment-box.scss b/static/sass/lg-fb-comment-box.scss
new file mode 100644
index 0000000..6185902
--- /dev/null
+++ b/static/sass/lg-fb-comment-box.scss
@@ -0,0 +1,46 @@
+@import "lg-variables";
+@import "lg-mixins";
+.lg-outer.fb-comments{
+ .lg-img-wrap {
+ padding-right: 400px !important;
+ }
+ .fb-comments {
+ height: 100%;
+ overflow-y: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 420px;
+ z-index: 99999;
+ background: #fff url("#{$lg-path-images}/loading.gif") no-repeat scroll center center;
+ &.fb_iframe_widget {
+ background-image: none;
+ &.fb_iframe_widget_loader{
+ background: #fff url("#{$lg-path-images}/loading.gif") no-repeat scroll center center;
+ }
+ }
+ }
+ .lg-toolbar {
+ right: 420px;
+ width: auto;
+ }
+ .lg-actions .lg-next {
+ right: 420px;
+ }
+ .lg-item {
+ background-image: none;
+ &.lg-complete{
+ .lg-img-wrap{
+ background-image: none;
+ }
+ }
+ }
+ .lg-img-wrap {
+ background: url("#{$lg-path-images}/loading.gif") no-repeat scroll center center transparent;
+ }
+
+ .lg-sub-html {
+ padding: 0;
+ position: static;
+ }
+}
diff --git a/static/sass/lg-fonts.scss b/static/sass/lg-fonts.scss
new file mode 100644
index 0000000..9129451
--- /dev/null
+++ b/static/sass/lg-fonts.scss
@@ -0,0 +1,26 @@
+// font icons support
+@font-face {
+ font-family: 'lg';
+ src:
+ url('#{$lg-path-fonts}/lg.ttf?22t19m') format('truetype'),
+ url('#{$lg-path-fonts}/lg.woff?22t19m') format('woff'),
+ url('#{$lg-path-fonts}/lg.svg?22t19m#lg') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+
+.lg-icon {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: 'lg' !important;
+ speak: never;
+ 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;
+}
\ No newline at end of file
diff --git a/static/sass/lg-fullscreen.scss b/static/sass/lg-fullscreen.scss
new file mode 100644
index 0000000..b036a1c
--- /dev/null
+++ b/static/sass/lg-fullscreen.scss
@@ -0,0 +1,9 @@
+.lg-fullscreen {
+ &:after {
+ content: "\e20c";
+
+ .lg-fullscreen-on & {
+ content: "\e20d";
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-mixins.scss b/static/sass/lg-mixins.scss
new file mode 100644
index 0000000..4e235c9
--- /dev/null
+++ b/static/sass/lg-mixins.scss
@@ -0,0 +1,330 @@
+// Vendor Prefixes
+//
+// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
+// Autoprefixer in our Gruntfile. They will be removed in v4.
+
+// - Animations
+// - Backface visibility
+// - Box shadow
+// - Box sizing
+// - Content columns
+// - Hyphens
+// - Placeholder text
+// - Transformations
+// - Transitions
+// - User Select
+// - cursor grab
+
+// Animations
+@mixin animation($animation) {
+ -webkit-animation: $animation;
+ -o-animation: $animation;
+ animation: $animation;
+}
+
+@mixin animation-name($name) {
+ -webkit-animation-name: $name;
+ animation-name: $name;
+}
+
+@mixin animation-duration($duration) {
+ -webkit-animation-duration: $duration;
+ animation-duration: $duration;
+}
+
+@mixin animation-timing-function($timing-function) {
+ -webkit-animation-timing-function: $timing-function;
+ animation-timing-function: $timing-function;
+}
+
+@mixin animation-delay($delay) {
+ -webkit-animation-delay: $delay;
+ animation-delay: $delay;
+}
+
+@mixin animation-iteration-count($iteration-count) {
+ -webkit-animation-iteration-count: $iteration-count;
+ animation-iteration-count: $iteration-count;
+}
+
+@mixin animation-direction($direction) {
+ -webkit-animation-direction: $direction;
+ animation-direction: $direction;
+}
+
+@mixin animation-fill-mode($fill-mode) {
+ -webkit-animation-fill-mode: $fill-mode;
+ animation-fill-mode: $fill-mode;
+}
+
+@mixin keyframes($name) {
+ @-webkit-keyframes #{$name} {
+ @content;
+ }
+
+ @-moz-keyframes #{$name} {
+ @content;
+ }
+
+ @-ms-keyframes #{$name} {
+ @content;
+ }
+
+ @keyframes #{$name} {
+ @content;
+ }
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+
+@mixin backface-visibility($visibility) {
+ -webkit-backface-visibility: $visibility;
+ -moz-backface-visibility: $visibility;
+ backface-visibility: $visibility;
+}
+
+// Drop shadows
+//
+// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
+// supported browsers that have box shadow capabilities now support it.
+
+@mixin box-shadow($shadow...) {
+ -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+ box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+ -webkit-box-sizing: $boxmodel;
+ -moz-box-sizing: $boxmodel;
+ box-sizing: $boxmodel;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+ -webkit-column-count: $column-count;
+ -moz-column-count: $column-count;
+ column-count: $column-count;
+ -webkit-column-gap: $column-gap;
+ -moz-column-gap: $column-gap;
+ column-gap: $column-gap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+ word-wrap: break-word;
+ -webkit-hyphens: $mode;
+ -moz-hyphens: $mode;
+ -ms-hyphens: $mode; // IE10+
+ -o-hyphens: $mode;
+ hyphens: $mode;
+}
+
+// Transformations
+@mixin scale($ratio...) {
+ -webkit-transform: scale($ratio);
+ -ms-transform: scale($ratio); // IE9 only
+ -o-transform: scale($ratio);
+ transform: scale($ratio);
+}
+
+@mixin scaleX($ratio) {
+ -webkit-transform: scaleX($ratio);
+ -ms-transform: scaleX($ratio); // IE9 only
+ -o-transform: scaleX($ratio);
+ transform: scaleX($ratio);
+}
+
+@mixin scaleY($ratio) {
+ -webkit-transform: scaleY($ratio);
+ -ms-transform: scaleY($ratio); // IE9 only
+ -o-transform: scaleY($ratio);
+ transform: scaleY($ratio);
+}
+
+@mixin skew($x, $y) {
+ -webkit-transform: skewX($x) skewY($y);
+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+ -o-transform: skewX($x) skewY($y);
+ transform: skewX($x) skewY($y);
+}
+
+@mixin translate($x, $y) {
+ -webkit-transform: translate($x, $y);
+ -ms-transform: translate($x, $y); // IE9 only
+ -o-transform: translate($x, $y);
+ transform: translate($x, $y);
+}
+
+@mixin translate3d($x, $y, $z) {
+ -webkit-transform: translate3d($x, $y, $z);
+ transform: translate3d($x, $y, $z);
+}
+
+@mixin scale3d($x, $y, $z) {
+ -webkit-transform: scale3d($x, $y, $z);
+ transform: scale3d($x, $y, $z);
+}
+
+@mixin rotate($degrees) {
+ -webkit-transform: rotate($degrees);
+ -ms-transform: rotate($degrees); // IE9 only
+ -o-transform: rotate($degrees);
+ transform: rotate($degrees);
+}
+
+@mixin rotateX($degrees) {
+ -webkit-transform: rotateX($degrees);
+ -ms-transform: rotateX($degrees); // IE9 only
+ -o-transform: rotateX($degrees);
+ transform: rotateX($degrees);
+}
+
+@mixin rotateY($degrees) {
+ -webkit-transform: rotateY($degrees);
+ -ms-transform: rotateY($degrees); // IE9 only
+ -o-transform: rotateY($degrees);
+ transform: rotateY($degrees);
+}
+
+@mixin perspective($perspective) {
+ -webkit-perspective: $perspective;
+ -moz-perspective: $perspective;
+ perspective: $perspective;
+}
+
+@mixin perspective-origin($perspective) {
+ -webkit-perspective-origin: $perspective;
+ -moz-perspective-origin: $perspective;
+ perspective-origin: $perspective;
+}
+
+@mixin transform-origin($origin) {
+ -webkit-transform-origin: $origin;
+ -moz-transform-origin: $origin;
+ -ms-transform-origin: $origin; // IE9 only
+ transform-origin: $origin;
+}
+
+@mixin transform($transforms) {
+ -moz-transform: $transforms;
+ -o-transform: $transforms;
+ -ms-transform: $transforms;
+ -webkit-transform: $transforms;
+ transform: $transforms;
+}
+
+// Transitions
+
+@mixin transition($transition...) {
+ -webkit-transition: $transition;
+ -o-transition: $transition;
+ transition: $transition;
+}
+
+@mixin transition-property($transition-property...) {
+ -webkit-transition-property: $transition-property;
+ transition-property: $transition-property;
+}
+
+@mixin transition-delay($transition-delay) {
+ -webkit-transition-delay: $transition-delay;
+ transition-delay: $transition-delay;
+}
+
+@mixin transition-duration($transition-duration...) {
+ -webkit-transition-duration: $transition-duration;
+ transition-duration: $transition-duration;
+}
+
+@mixin transition-timing-function($timing-function) {
+ -webkit-transition-timing-function: $timing-function;
+ transition-timing-function: $timing-function;
+}
+
+@mixin transition-transform($transition...) {
+ -webkit-transition: -webkit-transform $transition;
+ -moz-transition: -moz-transform $transition;
+ -o-transition: -o-transform $transition;
+ transition: transform $transition;
+}
+
+// transition custom
+
+@function prefix($property, $prefixes: webkit moz o ms) {
+ $vendor-prefixed-properties: transform background-clip background-size;
+ $result: ();
+
+ @each $prefix in $prefixes {
+ @if index($vendor-prefixed-properties, $property) {
+ $property: -#{$prefix}-#{$property};
+ }
+ $result: append($result, $property);
+ }
+ @return $result;
+}
+
+@function trans-prefix($transition, $prefix: moz) {
+ $prefixed: ();
+
+ @each $trans in $transition {
+ $prop-name: nth($trans, 1);
+ $vendor-prop-name: prefix($prop-name, $prefix);
+ $prop-vals: nth($trans, 2);
+ $prefixed: append($prefixed, $vendor-prop-name $prop-vals, comma);
+ }
+ @return $prefixed;
+}
+
+@mixin transitionCustom($values...) {
+ $transitions: ();
+
+ @each $declaration in $values {
+ $prop: nth($declaration, 1);
+ $prop-opts: ();
+ $length: length($declaration);
+
+ @if $length >= 2 {
+ @for $i from 2 through $length {
+ $prop-opts: append($prop-opts, nth($declaration, $i));
+ }
+ }
+ $trans: $prop, $prop-opts;
+ $transitions: append($transitions, $trans, comma);
+ }
+ -webkit-transition: trans-prefix($transitions, webkit);
+ -moz-transition: trans-prefix($transitions, moz);
+ -o-transition: trans-prefix($transitions, o);
+ transition: $values;
+}
+
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+ -webkit-user-select: $select;
+ -moz-user-select: $select;
+ -ms-user-select: $select; // IE10+
+ user-select: $select;
+}
+
+// mouse grab
+
+@mixin grab-cursor {
+ cursor: -webkit-grab;
+ cursor: -moz-grab;
+ cursor: -o-grab;
+ cursor: -ms-grab;
+ cursor: grab;
+}
+
+@mixin grabbing-cursor {
+ cursor: move;
+ cursor: -webkit-grabbing;
+ cursor: -moz-grabbing;
+ cursor: -o-grabbing;
+ cursor: -ms-grabbing;
+ cursor: grabbing;
+}
diff --git a/static/sass/lg-pager.scss b/static/sass/lg-pager.scss
new file mode 100644
index 0000000..f730a8a
--- /dev/null
+++ b/static/sass/lg-pager.scss
@@ -0,0 +1,89 @@
+.lg-outer {
+ .lg-pager-outer {
+ bottom: 60px;
+ left: 0;
+ position: absolute;
+ right: 0;
+ text-align: center;
+ z-index: $zindex-pager;
+ height: 10px;
+
+ &.lg-pager-hover {
+ .lg-pager-cont {
+ overflow: visible;
+ }
+ }
+ }
+
+ .lg-pager-cont {
+ cursor: pointer;
+ display: inline-block;
+ overflow: hidden;
+ position: relative;
+ vertical-align: top;
+ margin: 0 5px;
+
+ &:hover {
+ .lg-pager-thumb-cont {
+ opacity: 1;
+ @include translate3d(0, 0, 0);
+ }
+ }
+
+ &.lg-pager-active {
+ .lg-pager {
+ box-shadow: 0 0 0 2px white inset;
+ }
+ }
+ }
+
+ .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;
+ @include transitionCustom(opacity 0.15s ease 0s, transform 0.15s ease 0s);
+ @include translate3d(0, 5px, 0);
+
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .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;
+ @include transition(box-shadow 0.3s ease 0s);
+ width: 12px;
+
+ &:hover, &:focus {
+ box-shadow: 0 0 0 8px white inset;
+ }
+ }
+
+ .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;
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-rotate.scss b/static/sass/lg-rotate.scss
new file mode 100644
index 0000000..451b6b4
--- /dev/null
+++ b/static/sass/lg-rotate.scss
@@ -0,0 +1,38 @@
+@import "lg-variables";
+@import "lg-mixins";
+.lg-outer {
+ .lg-img-rotate {
+ position: absolute;
+ padding: 0 5px;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ @include transitionCustom(transform 0.3s cubic-bezier(0.32, 0, 0.67, 0) 0s);
+ }
+}
+.lg-rotate-left {
+ &:after {
+ content: "\e900";
+ }
+}
+.lg-rotate-right {
+ &:after {
+ content: "\e901";
+ }
+}
+.lg-icon {
+ &.lg-flip-hor, &.lg-flip-ver {
+ font-size: 26px;
+ }
+}
+.lg-flip-hor {
+ &:after {
+ content: "\e902";
+ }
+}
+.lg-flip-ver {
+ &:after {
+ content: "\e903";
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-share.scss b/static/sass/lg-share.scss
new file mode 100644
index 0000000..d0451cb
--- /dev/null
+++ b/static/sass/lg-share.scss
@@ -0,0 +1,135 @@
+@import "lg-variables";
+@import "lg-mixins";
+.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: $zindex-toolbar - 1;
+ opacity: 0;
+ visibility: hidden;
+ @include transition(visibility 0s linear 0.18s, opacity 0.18s linear 0s);
+ }
+ &.lg-dropdown-active{
+ .lg-dropdown, #lg-dropdown-overlay {
+ @include transition-delay(0s);
+ @include transform(translate3d(0, 0px, 0));
+ opacity: 1;
+ visibility: visible;
+ }
+ #lg-share {
+ color: #FFF;
+ }
+ }
+ .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;
+ @include transform(translate3d(0, 5px, 0));
+ @include transitionCustom(transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s);
+
+ &:after {
+ content: "";
+ display: block;
+ height: 0;
+ width: 0;
+ position: absolute;
+ border: 8px solid transparent;
+ border-bottom-color: #FFF;
+ right: 16px;
+ top: -16px
+ }
+ > li {
+ &:last-child {
+ margin-bottom: 0px;
+ }
+ &:hover {
+ a, .lg-icon {
+ color: #333;
+ }
+ }
+ }
+ a {
+ color: #333;
+ display: block;
+ white-space: pre;
+ padding: 4px 12px;
+ font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+ font-size: 12px;
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.07);
+ }
+
+ }
+ .lg-dropdown-text {
+ display: inline-block;
+ line-height: 1;
+ margin-top: -3px;
+ vertical-align: middle;
+ }
+ .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-share {
+ position: relative;
+ &:after {
+ content: "\e80d";
+ }
+ }
+ #lg-share-facebook {
+ .lg-icon{
+ color: #3b5998;
+ &:after {
+ content: "\e904";
+ }
+ }
+ }
+ #lg-share-twitter {
+ .lg-icon{
+ color: #00aced;
+ &:after {
+ content: "\e907";
+ }
+ }
+ }
+ #lg-share-googleplus {
+ .lg-icon{
+ color: #dd4b39;
+ &:after {
+ content: "\e905";
+ }
+ }
+ }
+ #lg-share-pinterest {
+ .lg-icon{
+ color: #cb2027;
+ &:after {
+ content: "\e906";
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-theme-default.scss b/static/sass/lg-theme-default.scss
new file mode 100644
index 0000000..2c6e6a8
--- /dev/null
+++ b/static/sass/lg-theme-default.scss
@@ -0,0 +1,212 @@
+// default theme
+.lg-actions {
+ .lg-next, .lg-prev {
+ background-color: $lg-next-prev-bg;
+ border-radius: $lg-border-radius-base;
+ color: $lg-next-prev-color;
+ cursor: pointer;
+ display: block;
+ font-size: 22px;
+ margin-top: -10px;
+ padding: 8px 10px 9px;
+ position: absolute;
+ top: 50%;
+ z-index: $zindex-controls;
+ outline: none;
+ border: none;
+ background-color: transparent;
+
+ &.disabled {
+ pointer-events: none;
+ opacity: 0.5;
+ }
+
+ &:hover {
+ color: $lg-next-prev-hover-color;
+ }
+ }
+
+ .lg-next {
+ right: 20px;
+
+ &:before {
+ content: "\e095";
+ }
+ }
+
+ .lg-prev {
+ left: 20px;
+
+ &:after {
+ content: "\e094";
+ }
+ }
+}
+
+@include keyframes(lg-right-end) {
+ 0% {
+ left: 0;
+ }
+
+ 50% {
+ left: -30px;
+ }
+
+ 100% {
+ left: 0;
+ }
+}
+
+
+@include keyframes(lg-left-end) {
+ 0% {
+ left: 0;
+ }
+
+ 50% {
+ left: 30px;
+ }
+
+ 100% {
+ left: 0;
+ }
+}
+
+
+.lg-outer {
+ &.lg-right-end {
+ .lg-object {
+ @include animation(lg-right-end 0.3s);
+ position: relative;
+ }
+ }
+
+ &.lg-left-end {
+ .lg-object {
+ @include animation(lg-left-end 0.3s);
+ position: relative;
+ }
+ }
+}
+
+// lg toolbar
+.lg-toolbar {
+ z-index: $zindex-toolbar;
+ left: 0;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ background-color: $lg-toolbar-bg;
+
+ .lg-icon {
+ color: $lg-toolbar-icon-color;
+ 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;
+ background: none;
+ border: none;
+ box-shadow: none;
+ @include transition(color 0.2s linear);
+
+ &:hover {
+ color: $lg-toolbar-icon-hover-color;
+ }
+ }
+
+ .lg-close {
+ &:after {
+ content: "\e070";
+ }
+ }
+
+ .lg-download {
+ &:after {
+ content: "\e0f2";
+ }
+ }
+}
+
+// lightGallery title
+.lg-sub-html {
+ background-color: $lg-sub-html-bg;
+ bottom: 0;
+ color: $lg-sub-html-color;
+ font-size: 16px;
+ left: 0;
+ padding: 10px 40px;
+ position: fixed;
+ right: 0;
+ text-align: center;
+ z-index: $zindex-subhtml;
+
+ h4 {
+ margin: 0;
+ font-size: 13px;
+ font-weight: bold;
+ }
+
+ p {
+ font-size: 12px;
+ margin: 5px 0 0;
+ }
+}
+
+// lg image counter
+#lg-counter {
+ color: $lg-icon-color;
+ display: inline-block;
+ font-size: $lg-counter-font-size;
+ padding-left: 20px;
+ padding-top: 12px;
+ vertical-align: middle;
+}
+
+// for idle state
+.lg-toolbar, .lg-prev, .lg-next {
+ opacity: 1;
+ @include transitionCustom(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;
+ @include translate3d(-10px, 0, 0);
+ }
+
+ .lg-next {
+ opacity: 0;
+ @include translate3d(10px, 0, 0);
+ }
+
+ .lg-toolbar {
+ opacity: 0;
+ @include translate3d(0, -10px, 0);
+ }
+}
+
+// Starting effect
+body:not(.lg-from-hash){
+ .lg-outer {
+ &.lg-start-zoom{
+ .lg-object{
+ @include scale3d(0.5, 0.5, 0.5);
+ opacity: 0;
+ @include transitionCustom(transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important);
+ @include transform-origin(50% 50%);
+ }
+ .lg-item.lg-complete{
+ .lg-object{
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-thumbnail.scss b/static/sass/lg-thumbnail.scss
new file mode 100644
index 0000000..362b5e4
--- /dev/null
+++ b/static/sass/lg-thumbnail.scss
@@ -0,0 +1,113 @@
+.lg-outer {
+ .lg-thumb-outer {
+ background-color: $lg-thumb-bg;
+ bottom: 0;
+ position: absolute;
+ width: 100%;
+ z-index: $zindex-thumbnail;
+ max-height: 350px;
+ @include translate3d(0, 100%, 0);
+ @include transitionCustom(transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s);
+
+ &.lg-grab {
+ .lg-thumb-item {
+ @include grab-cursor;
+ }
+ }
+
+ &.lg-grabbing {
+ .lg-thumb-item {
+ @include grabbing-cursor;
+ }
+ }
+
+ &.lg-dragging {
+ .lg-thumb {
+ @include transition-duration(0s !important);
+ }
+ }
+ }
+ &.lg-thumb-open{
+ .lg-thumb-outer {
+ @include translate3d(0, 0%, 0);
+ }
+ }
+
+ .lg-thumb {
+ padding: 10px 0;
+ height: 100%;
+ margin-bottom: -5px;
+ }
+
+ .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) {
+ @include transition(border-color 0.25s ease);
+ }
+
+ &.active, &:hover {
+ border-color: $lg-theme-highlight;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ &.lg-has-thumb {
+ .lg-item {
+ padding-bottom: 120px;
+ }
+ }
+
+ &.lg-can-toggle {
+ .lg-item {
+ padding-bottom: 0;
+ }
+ }
+ &.lg-pull-caption-up{
+ .lg-sub-html {
+ @include transition(bottom 0.25s ease);
+ }
+ &.lg-thumb-open{
+ .lg-sub-html {
+ bottom: 100px;
+ }
+ }
+ }
+
+ .lg-toggle-thumb {
+ background-color: $lg-thumb-toggle-bg;
+ border-radius: $lg-border-radius-base $lg-border-radius-base 0 0;
+ color: $lg-thumb-toggle-color;
+ cursor: pointer;
+ font-size: 24px;
+ height: 39px;
+ line-height: 27px;
+ padding: 5px 0;
+ position: absolute;
+ right: 20px;
+ text-align: center;
+ top: -39px;
+ width: 50px;
+ outline: medium none;
+ border: none;
+
+ &:after {
+ content: "\e1ff";
+ }
+
+ &:hover {
+ color: $lg-thumb-toggle-hover-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-transitions.scss b/static/sass/lg-transitions.scss
new file mode 100644
index 0000000..c352668
--- /dev/null
+++ b/static/sass/lg-transitions.scss
@@ -0,0 +1,766 @@
+@import "lg-variables";
+@import "lg-mixins";
+
+.lg-css3 {
+ &.lg-zoom-in {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(1.3, 1.3, 1.3);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(1.3, 1.3, 1.3);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-zoom-in-big {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-zoom-out {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(0.7, 0.7, 0.7);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(0.7, 0.7, 0.7);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+ &.lg-zoom-out-big {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-zoom-out-in {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-zoom-in-out {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(2, 2, 2);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(0, 0, 0);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-soft-zoom {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include scale3d(1.1, 1.1, 1.1);
+ }
+
+ &.lg-next-slide {
+ @include scale3d(0.9, 0.9, 0.9);
+ }
+
+ &.lg-current {
+ @include scale3d(1, 1, 1);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-scale-up {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0.8, 0.8, 0.8) translate3d(0%, 10%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-circular {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, 0, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, 0, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-up {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, -100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-down {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, 100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-circular-vertical {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(0, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(0, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-vertical-left {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(-100%, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ // sec
+ &.lg-slide-circular-vertical-down {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, -100%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0, 0, 0) translate3d(100%, 100%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-vertical {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include translate3d(0, -100%, 0);
+ }
+
+ &.lg-next-slide {
+ @include translate3d(0, 100%, 0);
+ }
+
+ &.lg-current {
+ @include translate3d(0, 0, 0);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-vertical-growth {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(0.5, 0.5, 0.5) translate3d(0, -150%, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(0.5, 0.5, 0.5) translate3d(0, 150%, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(10deg, 0deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(10deg, 0deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(-10deg, 0deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(-10deg, 0deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only-y {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, 10deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, 10deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-only-y-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, -10deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, -10deg));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(20deg, 0deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(20deg, 0deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(-20deg, 0deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(-20deg, 0deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-cross {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, 60deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, 60deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-cross-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, -60deg) translate3d(-100%, 0%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, -60deg) translate3d(100%, 0%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(60deg, 0deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(60deg, 0deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(-60deg, 0deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(-60deg, 0deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver-cross {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, 20deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, 20deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide-skew-ver-cross-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(skew(0deg, -20deg) translate3d(0, -100%, 0px));
+ }
+
+ &.lg-next-slide {
+ @include transform(skew(0deg, -20deg) translate3d(0, 100%, 0px));
+ }
+
+ &.lg-current {
+ @include transform(skew(0deg, 0deg) translate3d(0%, 0%, 0px));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-lollipop {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include translate3d(-100%, 0, 0);
+ }
+
+ &.lg-next-slide {
+ @include transform(translate3d(0, 0, 0) scale(0.5));
+ }
+
+ &.lg-current {
+ @include translate3d(0, 0, 0);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-lollipop-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(translate3d(0, 0, 0) scale(0.5));
+ }
+
+ &.lg-next-slide {
+ @include translate3d(100%, 0, 0);
+ }
+
+ &.lg-current {
+ @include translate3d(0, 0, 0);
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-rotate {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(rotate(-360deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(rotate(360deg));
+ }
+
+ &.lg-current {
+ @include transform(rotate(0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-rotate-rev {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(rotate(360deg));
+ }
+
+ &.lg-next-slide {
+ @include transform(rotate(-360deg));
+ }
+
+ &.lg-current {
+ @include transform(rotate(0deg));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-tube {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include transform(scale3d(1, 0, 1) translate3d(-100%, 0, 0));
+ }
+
+ &.lg-next-slide {
+ @include transform(scale3d(1, 0, 1) translate3d(100%, 0, 0));
+ }
+
+ &.lg-current {
+ @include transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
+ opacity: 1;
+ }
+
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-variables.scss b/static/sass/lg-variables.scss
new file mode 100644
index 0000000..60046b9
--- /dev/null
+++ b/static/sass/lg-variables.scss
@@ -0,0 +1,57 @@
+$backdrop-opacity: 1 !default;
+$lg-toolbar-bg: rgba(0, 0, 0, 0.45) !default;
+$lg-border-radius-base: 2px !default;
+$lg-theme-highlight: rgb(169, 7, 7) !default;
+$lg-theme: #0D0A0A !default;
+
+// basic icon colours
+$lg-icon-bg: rgba(0, 0, 0, 0.45) !default;
+$lg-icon-color: #999 !default;
+$lg-icon-hover-color: #FFF !default;
+
+// counter
+$lg-counter-color: #e6e6e6 !default;
+$lg-counter-font-size: 16px !default;
+
+// Next prev icons
+$lg-next-prev-bg: $lg-icon-bg !default;
+$lg-next-prev-color: $lg-icon-color !default;
+$lg-next-prev-hover-color: $lg-icon-hover-color !default;
+
+// toolbar icons
+$lg-toolbar-icon-color: $lg-icon-color !default;
+$lg-toolbar-icon-hover-color: $lg-icon-hover-color !default;
+
+// autoplay progress bar
+$lg-progress-bar-bg: #333 !default;
+$lg-progress-bar-active-bg: $lg-theme-highlight !default;
+$lg-progress-bar-height: 5px !default;
+
+// paths
+$lg-path-fonts: '../fonts'!default;
+$lg-path-images: '../img'!default;
+
+// Zoom plugin
+$zoom-transition-duration: 0.3s !default;
+
+// Sub html - titile
+$lg-sub-html-bg: rgba(0, 0, 0, 0.45) !default;
+$lg-sub-html-color: #EEE !default;
+
+// thumbnail toggle button
+$lg-thumb-toggle-bg: #0D0A0A !default;
+$lg-thumb-toggle-color: $lg-icon-color !default;
+$lg-thumb-toggle-hover-color: $lg-icon-hover-color !default;
+$lg-thumb-bg: #0D0A0A !default;
+
+// z-index
+$zindex-outer: 1050 !default;
+$zindex-progressbar: 1083 !default;
+$zindex-controls: 1080 !default;
+$zindex-toolbar: 1082 !default;
+$zindex-subhtml: 1080 !default;
+$zindex-thumbnail: 1080 !default;
+$zindex-pager: 1080 !default;
+$zindex-playbutton: 1080 !default;
+$zindex-item: 1060 !default;
+$zindex-backdrop: 1040 !default;
diff --git a/static/sass/lg-video.scss b/static/sass/lg-video.scss
new file mode 100644
index 0000000..863abc0
--- /dev/null
+++ b/static/sass/lg-video.scss
@@ -0,0 +1,103 @@
+.lg-outer {
+ .lg-video-cont {
+ display: inline-block;
+ vertical-align: middle;
+ max-width: 1140px;
+ max-height: 100%;
+ width: 100%;
+ padding: 0 5px;
+ }
+
+ .lg-video {
+ width: 100%;
+ height: 0;
+ padding-bottom: 56.25%;
+ overflow: hidden;
+ position: relative;
+
+ .lg-object {
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100% !important;
+ height: 100% !important;
+ }
+
+ .lg-video-play {
+ width: 84px;
+ height: 59px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin-left: -42px;
+ margin-top: -30px;
+ z-index: $zindex-playbutton;
+ cursor: pointer;
+ }
+ }
+
+ .lg-has-vimeo{
+ .lg-video-play{
+ background: url("#{$lg-path-images}/vimeo-play.png") no-repeat scroll 0 0 transparent;
+ }
+ &:hover{
+ .lg-video-play{
+ background: url("#{$lg-path-images}/vimeo-play.png") no-repeat scroll 0 -58px transparent;
+ }
+
+ }
+ }
+
+ .lg-has-html5{
+ .lg-video-play{
+ background: transparent url("#{$lg-path-images}/video-play.png") no-repeat scroll 0 0;
+ height: 64px;
+ margin-left: -32px;
+ margin-top: -32px;
+ width: 64px;
+ opacity: 0.8;
+ }
+ &:hover{
+ .lg-video-play{
+ opacity: 1
+ }
+
+ }
+ }
+
+ .lg-has-youtube{
+ .lg-video-play{
+ background: url("#{$lg-path-images}/youtube-play.png") no-repeat scroll 0 0 transparent;
+ }
+ &:hover{
+ .lg-video-play{
+ background: url("#{$lg-path-images}/youtube-play.png") no-repeat scroll 0 -60px transparent;
+ }
+
+ }
+ }
+ .lg-video-object {
+ width: 100% !important;
+ height: 100% !important;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ .lg-has-video {
+ .lg-video-object {
+ visibility: hidden;
+ }
+
+ &.lg-video-playing {
+ .lg-object, .lg-video-play {
+ display: none;
+ }
+
+ .lg-video-object {
+ visibility: visible;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lg-zoom.scss b/static/sass/lg-zoom.scss
new file mode 100644
index 0000000..42fb32f
--- /dev/null
+++ b/static/sass/lg-zoom.scss
@@ -0,0 +1,69 @@
+.lg-outer {
+ // reset transition duration
+ &.lg-css3.lg-zoom-dragging {
+ .lg-item.lg-complete.lg-zoomable {
+ .lg-img-wrap, .lg-image {
+ @include transition-duration(0s);
+ }
+ }
+ }
+ &.lg-use-transition-for-zoom {
+ .lg-item.lg-complete.lg-zoomable {
+ .lg-img-wrap {
+ @include transitionCustom(transform $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s);
+ }
+ }
+ }
+ &.lg-use-left-for-zoom {
+ .lg-item.lg-complete.lg-zoomable {
+ .lg-img-wrap {
+ @include transitionCustom(left $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, top $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s);
+ }
+ }
+ }
+
+ .lg-item.lg-complete.lg-zoomable{
+
+ .lg-img-wrap {
+ @include translate3d(0, 0, 0);
+ @include backface-visibility(hidden);
+ }
+
+ .lg-image {
+ // Translate required for zoom
+ @include scale3d(1, 1, 1);
+ @include transitionCustom(transform $zoom-transition-duration cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important);
+ @include transform-origin(0 0);
+ @include backface-visibility(hidden);
+ }
+ }
+
+}
+
+// zoom buttons
+#lg-zoom-in {
+ &:after {
+ content: "\e311";
+ }
+}
+
+#lg-actual-size {
+ font-size: 20px;
+ &:after {
+ content: "\e033";
+ }
+}
+
+#lg-zoom-out {
+ opacity: 0.5;
+ pointer-events: none;
+
+ &:after {
+ content: "\e312";
+ }
+
+ .lg-zoomed & {
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
\ No newline at end of file
diff --git a/static/sass/lightgallery.scss b/static/sass/lightgallery.scss
new file mode 100644
index 0000000..edcb96e
--- /dev/null
+++ b/static/sass/lightgallery.scss
@@ -0,0 +1,293 @@
+// Core variables and mixins
+@import "lg-variables";
+@import "lg-mixins";
+@import "lg-fonts";
+@import "lg-theme-default";
+@import "lg-thumbnail";
+@import "lg-video";
+@import "lg-autoplay";
+@import "lg-zoom";
+@import "lg-pager";
+@import "lg-fullscreen";
+@import "lg-share";
+@import "lg-rotate";
+
+// Clearfix
+.lg-group {
+ *zoom: 1;
+}
+
+.lg-group:before, .lg-group:after {
+ display: table;
+ content: "";
+ line-height: 0;
+}
+
+.lg-group:after {
+ clear: both;
+}
+
+// lightgallery core
+.lg-outer {
+ width: 100%;
+ height: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: $zindex-outer;
+ opacity: 0;
+ outline: none;
+ // For start/end transition
+ @include transition(opacity 0.15s ease 0s);
+
+ * {
+ @include box-sizing(border-box);
+ }
+
+ &.lg-visible {
+ opacity: 1;
+ }
+
+ // Set transition speed and timing function
+ &.lg-css3 {
+ .lg-item {
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transition-duration(inherit !important);
+ @include transition-timing-function(inherit !important);
+ }
+ }
+ }
+
+ // Remove transition while dragging
+ &.lg-css3.lg-dragging {
+ .lg-item {
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transition-duration(0s !important);
+ opacity: 1;
+ }
+ }
+ }
+
+ // Set cursor grab while dragging
+ &.lg-grab {
+ img.lg-object {
+ @include grab-cursor;
+ }
+ }
+
+ &.lg-grabbing {
+ img.lg-object {
+ @include grabbing-cursor;
+ }
+ }
+
+ .lg {
+ height: 100%;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 100%;
+ max-height: 100%;
+ }
+
+ .lg-inner {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ white-space: nowrap;
+ }
+
+ .lg-item {
+ background: url("#{$lg-path-images}/loading.gif") no-repeat scroll center center transparent;
+ display: none !important;
+ }
+ &.lg-css3{
+ .lg-prev-slide, .lg-current, .lg-next-slide{
+ display: inline-block !important;
+ }
+ }
+ &.lg-css{
+ .lg-current{
+ display: inline-block !important;
+ }
+ }
+
+ .lg-item, .lg-img-wrap {
+ display: inline-block;
+ text-align: center;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+
+ &:before {
+ content: "";
+ display: inline-block;
+ height: 50%;
+ width: 1px;
+ margin-right: -1px;
+ }
+ }
+
+ .lg-img-wrap {
+ position: absolute;
+ padding: 0 5px;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0
+ }
+
+ .lg-item {
+ &.lg-complete {
+ background-image: none;
+ }
+
+ &.lg-current {
+ z-index: $zindex-item;
+ }
+ }
+
+ .lg-image {
+ display: inline-block;
+ vertical-align: middle;
+ max-width: 100%;
+ max-height: 100%;
+ width: auto !important;
+ height: auto !important;
+ }
+
+ &.lg-show-after-load {
+ .lg-item {
+ .lg-object, .lg-video-play {
+ opacity: 0;
+ @include transition(opacity 0.15s ease 0s);
+ }
+
+ &.lg-complete {
+ .lg-object, .lg-video-play {
+ opacity: 1;
+ }
+ }
+ }
+ }
+
+ // Hide title div if empty
+ .lg-empty-html {
+ display: none;
+ }
+
+ &.lg-hide-download{
+ #lg-download{
+ display: none;
+ }
+ }
+}
+.lg-backdrop{
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: $zindex-backdrop;
+ background-color: #000;
+ opacity: 0;
+ @include transition(opacity 0.15s ease 0s);
+ &.in{
+ opacity: $backdrop-opacity;
+ }
+}
+
+// Default slide animations. Should be placed at the bottom of the animation css
+.lg-css3 {
+
+ // Remove all transition effects
+ &.lg-no-trans {
+ .lg-prev-slide, .lg-next-slide, .lg-current {
+ @include transitionCustom(none 0s ease 0s !important);
+ }
+ }
+
+ &.lg-use-css3 {
+ .lg-item {
+ @include backface-visibility(hidden);
+ }
+ }
+
+ &.lg-use-left {
+ .lg-item {
+ @include backface-visibility(hidden);
+ }
+ }
+
+ // Fade mode
+ &.lg-fade {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-current {
+ opacity: 1;
+ }
+
+ // transition timing property and duration will be over written from javascript
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-slide {
+ &.lg-use-css3 {
+ .lg-item {
+ opacity: 0;
+
+ &.lg-prev-slide {
+ @include translate3d(-100%, 0, 0);
+ }
+
+ &.lg-next-slide {
+ @include translate3d(100%, 0, 0);
+ }
+
+ &.lg-current {
+ @include translate3d(0, 0, 0);
+ opacity: 1;
+ }
+
+ // transition timing property and duration will be over written from javascript
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+
+ &.lg-use-left {
+ .lg-item {
+ opacity: 0;
+ position: absolute;
+ left: 0;
+
+ &.lg-prev-slide {
+ left: -100%;
+ }
+
+ &.lg-next-slide {
+ left: 100%;
+ }
+
+ &.lg-current {
+ left: 0;
+ opacity: 1;
+ }
+
+ // transition timing property and duration will be over written from javascript
+ &.lg-prev-slide, &.lg-next-slide, &.lg-current {
+ @include transitionCustom(left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s);
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/templates/app.html b/templates/app.html
new file mode 100644
index 0000000..c0d5321
--- /dev/null
+++ b/templates/app.html
@@ -0,0 +1,178 @@
+
+
+
+
+
+
+
+
+
+Local data
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/app2.html b/templates/app2.html
new file mode 100644
index 0000000..740dc6d
--- /dev/null
+++ b/templates/app2.html
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+