<div class="modal micromodal-slide" id="modal" aria-hidden="true"> <div class="modal__overlay" tabindex="-1" data-micromodal-close> <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title"> <div class="modal__content" id="modal-content"> <div id="mySwipe" class="swipe"> <div class="swipe-wrap"> </div> </div> </div> <span class="modal__items"> <span class="modal__header"> <div class="modal__paging" title="Page Info" aria-label="Current Page"> </div> <div class="modal__icon modal__toolbar modal__toolbar--close" title="Close" aria-label="Close Button" data-micromodal-close> {{ partial "svgs/etc/close.svg" (dict "width" 25 "height" 25) }} </div> <div class="modal__icon modal__toolbar modal__toolbar--full" title="Full Screen" aria-label="Full Screen Button"> {{ partial "svgs/etc/full-screen.svg" (dict "width" 25 "height" 25) }} </div> <div class="modal__icon modal__toolbar modal__toolbar--normal" title="Normal Screen" aria-label="Normal Screen Button"> {{ partial "svgs/etc/normal-screen.svg" (dict "width" 25 "height" 25) }} </div> </span> <div class="modal__icon modal__arrow modal__arrow--left" title="Arrow Left" aria-label="Arrow Left Button"> {{ partial "svgs/arrow/arrow-left.svg" (dict "width" 28 "height" 28) }} </div> <div class="modal__icon modal__arrow modal__arrow--right" title="Arrow Right" aria-label="Arrow Right Button"> {{ partial "svgs/arrow/arrow-right.svg" (dict "width" 28 "height" 28) }} </div> <div class="modal__caption"> <div class="modal__caption--text"> </div> </div> </span> </div> </div> </div> {{ $swipe := resources.Get "js/swipe.js" | resources.Minify | resources.Fingerprint }} <script defer src="{{ $swipe.RelPermalink }}"></script> {{ $micromodal := resources.Get "js/micromodal.min.js" | resources.Fingerprint }} <script defer src="{{ $micromodal.RelPermalink }}"></script> {{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }} <script defer src="{{ $fadeinout.RelPermalink }}"></script> <script> document.addEventListener('DOMContentLoaded', function () { // ============================ gallery ============================ /* Get the documentElement (<html>) to display the page in fullscreen */ var docElem = document.documentElement; /* View in fullscreen */ function openFullscreen() { if (docElem.requestFullscreen) { docElem.requestFullscreen(); } else if (docElem.mozRequestFullScreen) { /* Firefox */ docElem.mozRequestFullScreen(); } else if (docElem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */ docElem.webkitRequestFullscreen(); } else if (docElem.msRequestFullscreen) { /* IE/Edge */ docElem.msRequestFullscreen(); } } /* Close fullscreen */ function closeFullscreen() { if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement) { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { /* Firefox */ document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE/Edge */ document.msExitFullscreen(); } } } var modal = document.getElementById('modal'); var galleryContainerElem = document.querySelector('.gallery__container'); var swipeWrapElem = document.querySelector('.swipe-wrap'); var mySwipeElem = document.getElementById('mySwipe'); var arrowLeftElem = document.querySelector('.modal__arrow--left'); var arrowRightElem = document.querySelector('.modal__arrow--right'); var closeElem = document.querySelector('.modal__toolbar--close'); var fullElem = document.querySelector('.modal__toolbar--full'); var normalElem = document.querySelector('.modal__toolbar--normal'); var captionElem = document.querySelector('.modal__caption'); var pagingElem = document.querySelector('.modal__paging'); var itemsElem = document.querySelector('.modal__items'); var imgTotalNum = null; var myFadeTimeout = null; var mySwipe = null; var keydownFunction = function (e) { if (e.key === 'ArrowRight') { if (modal && modal.classList.contains('is-open')) { mySwipe.next(); } } else if (e.key === 'ArrowLeft') { if (modal && modal.classList.contains('is-open')) { mySwipe.prev(); } } } if (galleryContainerElem) { imgTotalNum = galleryContainerElem.querySelectorAll('img').length; } else { galleryContainerElem = document.querySelector('.single__contents'); imgTotalNum = galleryContainerElem.querySelectorAll('img').length; } MicroModal.init({ onClose: function () { if (mySwipe) { mySwipe.kill(); mySwipe = null; closeFullscreen(); } window.removeEventListener('keydown', keydownFunction); }, disableScroll: true, disableFocus: true, awaitOpenAnimation: false, awaitCloseAnimation: false, debugMode: false, }); var imageLoad = function(src) { return new Promise(function(resolve, reject) { var newImg = new Image; newImg.onload = function() { resolve(newImg); } newImg.onerror = reject; newImg.src = src; }); } galleryContainerElem.querySelectorAll('img').forEach(function (elem, idx) { elem.style.cursor = 'pointer'; var clonedElem = elem.cloneNode(true); clonedElem.style.maxHeight = '100%'; clonedElem.style.maxWidth = '100%'; clonedElem.onclick = function (e) { e.stopPropagation(); } var wrapper = document.createElement('div'); wrapper.style.width = '100%'; wrapper.style.height = '100vh'; wrapper.setAttribute('data-micromodal-close', ''); wrapper.onclick = function () { if (mySwipe) { mySwipe.kill(); mySwipe = null; } } wrapper.onmouseenter = function () { clearTimeout(myFadeTimeout); fadeIn(itemsElem, 200); }; wrapper.onmouseleave = function () { myFadeTimeout = setTimeout(function () { fadeOut(itemsElem, 200); }, 2500); } wrapper.ontouchstart = function() { fadeIn(itemsElem, 200); } wrapper.append(clonedElem); swipeWrapElem.append(wrapper); elem.addEventListener('click', async function (e) { MicroModal.show('modal'); if (mySwipe) { mySwipe.kill(); mySwipe = null; } var imgSrc = e.target.getAttribute('data-src') || e.target.getAttribute('src'); var img = await imageLoad(imgSrc); clonedElem.style.width = img.width + 'px'; clonedElem.style.height = img.height + 'px'; // swipe initialize mySwipe = new Swipe(mySwipeElem, { startSlide: idx, draggable: true, autoRestart: false, continuous: false, disableScroll: true, stopPropagation: true, callback: async function (index, element) { // original image size var imgElem = element.querySelector('img'); var imgSrc = imgElem.getAttribute('data-src') || imgElem.getAttribute('src'); var img = await imageLoad(imgSrc); imgElem.style.width = img.width + 'px'; imgElem.style.height = img.height + 'px'; // caption if (captionElem && imgElem) { var caption = null; if (imgElem.getAttribute('data-caption')) { caption = imgElem.getAttribute('data-caption'); } else if (imgElem.getAttribute('title')) { caption = imgElem.getAttribute('title'); } else if (imgElem.getAttribute('alt')) { caption = imgElem.getAttribute('alt'); } else { caption = imgElem.getAttribute('src'); } captionElem.querySelector('.modal__caption--text').innerText = caption; pagingElem.innerText = (index + 1) + ' / ' + imgTotalNum; clearTimeout(myFadeTimeout); fadeIn(itemsElem, 200); } }, }); fadeIn(itemsElem); // caption if (captionElem) { var caption = null; if (e.target.getAttribute('data-caption')) { caption = e.target.getAttribute('data-caption'); } else if (e.target.getAttribute('title')) { caption = e.target.getAttribute('title'); } else if (e.target.getAttribute('alt')) { caption = e.target.getAttribute('alt'); } else { caption = e.target.getAttribute('src'); } captionElem.querySelector('.modal__caption--text').innerText = caption; pagingElem.innerText = (idx + 1) + ' / ' + imgTotalNum; } if (normalElem && fullElem) { normalElem.style.zIndex = -1; normalElem.style.opacity = 0; fullElem.style.zIndex = 25; fullElem.style.opacity = 1; } }); window.addEventListener('keydown', keydownFunction); }); arrowLeftElem ? arrowLeftElem.addEventListener('click', function (e) { if (mySwipe) { mySwipe.prev(); } }) : null; arrowRightElem ? arrowRightElem.addEventListener('click', function (e) { if (mySwipe) { mySwipe.next(); } }) : null; closeElem ? closeElem.addEventListener('click', function () { if (mySwipe) { mySwipe.kill(); mySwipe = null; } closeFullscreen(); MicroModal.close('modal'); }) : null; fullElem ? fullElem.addEventListener('click', function (e) { openFullscreen(); if (normalElem) { normalElem.style.zIndex = 25; normalElem.style.opacity = 1; fullElem.style.zIndex = -1; fullElem.style.opacity = 0; } }) : null; normalElem ? normalElem.addEventListener('click', function (e) { closeFullscreen(); if (fullElem) { fullElem.style.zIndex = 25; fullElem.style.opacity = 1; normalElem.style.zIndex = -1; normalElem.style.opacity = 0; } }) : null; // ================================================================= }); </script>