Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const options = {
- // background color
- bgColor: 'rgba(0,0,0,0.9)',
- // fade-in and fade-out duration
- fadeDurationMs: 400,
- // hide scroll when showing fullscreen image
- hideScroll: true,
- // fade overlay z index
- zIndex: 999
- };
- /**
- * Show given image on full screen
- *
- * @param self image url or img tag
- */
- export function img_box(self) {
- const container = initContainer();
- const imgUrl = typeof self === 'string' ? self : self.src;
- const bodyOverflow = document.body.style.overflow;
- const image = new Image();
- image.src = imgUrl;
- image.style.maxWidth = '90%';
- image.style.maxHeight = '90%';
- image.style.margin = 'auto';
- container.appendChild(image);
- if (options.hideScroll) {
- document.body.style.overflow = 'hidden'
- }
- container.style.display = 'flex';
- window.setTimeout(() => container.style.opacity = 1, 0);
- function onClick() {
- container.removeEventListener('click', onClick);
- container.style.opacity = 0;
- window.setTimeout(function() {
- container.style.display = 'none';
- container.innerHTML = '';
- document.body.style.overflow = bodyOverflow;
- }, options.fadeDurationMs * 0.8);
- }
- container.addEventListener('click', onClick)
- }
- let imgboxContainer;
- function initContainer() {
- if (imgboxContainer) return imgboxContainer;
- const o = document.createElement('div');
- o.innerHTML =
- '<div id="img_box" style="top:0px;left:0px;opacity:0;width:100%;height:100%;display:none;position:fixed;' +
- 'cursor:pointer;z-index:' + options.zIndex +';background-color:' + options.bgColor +
- ';transition:opacity ' + options.fadeDurationMs + 'ms"/>';
- imgboxContainer = o.firstChild;
- document.body.appendChild(imgboxContainer);
- return imgboxContainer;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement