Музей истории города Мариинска

const oGallery = document.querySelector('.gallery'); oGallery.addEventListener('click', function(ev) { if (ev.target.tagName != 'IMG') { return false; }; let oTarget = ev.target, nWidth, nHeight, nRatio = oTarget.offsetWidth / oTarget.offsetHeight; let oBig = this.appendChild(document.createElement('DIV')); oBig.style.position = `absolute`; oBig.style.top = `${oTarget.offsetTop}px`; oBig.style.left = `${oTarget.offsetLeft}px`; oBig.style.width = `${oTarget.offsetWidth}px`; oBig.style.height = `${oTarget.offsetHeight}px`; if (this.offsetHeight < this.offsetWidth) { nHeight = this.offsetHeight; nWidth = nHeight * nRatio; } else { nWidth = this.offsetWidth; nHeight = nWidth / nRatio; }; oBig.style.background = `center / 100% 100% no-repeat url('${oTarget.currentSrc}')`; oBig.insertAdjacentHTML('beforeend', '

'); oBig.addEventListener('transitionend', function() { this.querySelector('.close').style.opacity = 1; }); oBig.addEventListener('click', function(ev) { ev.stopPropagation(); this.addEventListener('transitionend', function() { this.remove(); }); this.style.transition = `.5s ease-in`; this.style.height = this.style.width = `0px`; oGallery.classList.toggle('show', false); }); oBig.classList.toggle('active'); oBig.style.width = `${nWidth / 1.3}px`; oBig.style.height = `${nHeight / 1.3}px`; oBig.style.top = oBig.style.left = `50%`; oBig.style.transform = `translate(-50%, -50%) rotate(1turn)`; oGallery.classList.toggle('show', true); }); body { margin: 0; height: 100vh; overflow: hidden; background: 0% 0% / auto no-repeat url('https://i.stack.imgur.com/m9NKc.png'), #58555c; } .gallery { position: relative; display: flex; flex-flow: row wrap; justify-content: space-evenly; align-items: center; height: 100%; width: 90%; margin: 0 auto; background-color: #fff; } .gallery img { height: auto; width: 200px; margin: 10px; box-shadow: 0 0 0 5px #fff, 0 0 0 6px #919191; transition: .5s linear; cursor: pointer; } .show img { opacity: .25; pointer-events: none; } .active { transition: box-shadow .5s linear .5s, top 1s ease-out, left 1s ease-out, transform 1s ease-out, width 1s ease-in, height 1s ease-in; box-shadow: 0 0 0 10px #fff; filter: drop-shadow(1px 2px 6px #000); pointer-events: none; } .close { position: relative; left: 100%; height: 20px; width: 20px; transform: translate(0%, -100%); border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 2px 2px #000; font: bold 20px/20px Arial; text-align: center; background-color: #000; color: #fff; pointer-events: auto; cursor: pointer; transition: 1s linear; opacity: 0; } .active .close:hover { transform: translate(0%, -100%) rotate(.5turn); transition: 1s ease; }