diff --git a/lightestbox.js b/lightestbox.js index e69de29..19ffa5e 100644 --- a/lightestbox.js +++ b/lightestbox.js @@ -0,0 +1,60 @@ +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + define([], function () { + root.lightestbox = factory(root); + }); + } else { + root.lightestbox = factory(root); + } +}(typeof self !== 'undefined' ? self : this, function (window) { + let d = document, + qs = 'querySelector', + qsa = 'querySelectorAll', + on = 'addEventListener', + cls = 'classList', + attr = 'getAttribute', + html = 'innerHTML', + css = 'style'; + + let container = d.createElement('div'); + container[html] = `
`; + + d.body.append(container); + container = d[qs]('#lightestbox'); + let img = d[qs]('#lightestbox img'); + let caption = d[qs]('#lightestbox div'); + + container[on]('click', function () { + caption.style.visibility = 'hidden'; + img[cls].remove('animate__zoomIn'); + img[cls].add('animate__zoomOut'); + setTimeout(function () { + d.body.parentElement.style.overflow = 'initial'; + container.style.display = 'none'; + }, 300); + }); + + img[on]('click', function (ev) { + ev.preventDefault(); + ev.stopPropagation(); + }); + + d[qsa]('[data-fancybox]').forEach(function (el) { + el[on]('click', function (ev) { + ev.preventDefault(); + ev.stopPropagation(); + d.body.parentElement[css].overflow = 'hidden'; + container[css].display = 'flex'; + img.src = this.getAttribute('href'); + img[cls].remove('animate__zoomOut'); + img[cls].add('animate__zoomIn'); + caption[html] = this.getAttribute('data-caption'); + caption[css].visibility = 'hidden'; + setTimeout(function () { + caption[css].visibility = 'visible'; + }, 1000); + }); + }); + + return true; +})); \ No newline at end of file