let showcase = $("#imgBig"); let showcaseButtonContainer = $("#photoButtonsContainer"); let showcaseDownload = $("#downloadButton"); let photoOverlay = $("#photoOverlay"); let headerTop = $("#header-top"); let sideNav = $("#menuSidenav"); let loading = $("#loadingIconContainer"); let move_photo = false; let grab_offsetX = 0; let grab_offsetY = 0; let idle_time = 0; let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches; let isMouseOverButtons = false; $(document).ready( function () { showcase.bind("mousewheel", function(event, delta) { let min_width = $(window).width() / 5; let min_height = $(window).height() / 5; let max_width = $(window).width() * 5; let max_height = $(window).height() * 5; let scale = 150 / 100; if (delta < 0) scale = 1/scale; let cursorY = event.pageY - $(window).scrollTop(); let offsetX = event.pageX - (showcase.position().left + showcase.width()/2); let offsetY = cursorY - (showcase.position().top + showcase.height()/2); let new_width = showcase.width() * scale; let new_height = showcase.height() * scale; if (new_width > max_width || new_width < min_width) new_width = 0; if (new_height > max_height || new_height < min_height) new_height = 0; if (new_width !== 0 && new_height !== 0){ let new_left = event.pageX - (offsetX * scale); let new_top = cursorY - (offsetY * scale); showcase.width(new_width); showcase.height(new_height); if (new_height > $(window).height() || new_width > $(window).width()){ showcase.css('left', new_left +'px'); showcase.css('top', new_top +'px'); showcase.css('cursor', 'move'); } else{ showcase.css('left', $(window).width()/2 +'px'); showcase.css('top', $(window).height()/2 +'px'); showcase.css('cursor', 'default'); } } return false; }); document.getElementById("photosTitle").scrollIntoView(); showcase.on('dragstart', function(event) { event.preventDefault(); }); // Stop image drag out of page if (!isMobile) setInterval(timerIncrement, 100); } ); $(document).mousemove(function (event) { let cursorY = event.pageY - $(window).scrollTop(); let elem = document.elementFromPoint(event.pageX, cursorY); isMouseOverButtons = !(elem.id === "closeBack" || elem.id === "loadingIconContainer" || elem.id === showcase.attr('id')); // Prevent entering fullscreen when cursor on control buttons idle_time = 0; }); showcase.mousemove(function(event){ if (showcase.height() > $(window).height() || showcase.width() > $(window).width) { showcase.css('cursor', 'move'); if (move_photo){ let cursorY = event.pageY - $(window).scrollTop(); let offsetX = event.pageX - (showcase.position().left + showcase.width()/2); let offsetY = cursorY - (showcase.position().top + showcase.height()/2); let new_left = showcase.position().left + showcase.width()/2 + offsetX - grab_offsetX; let new_top = showcase.position().top + showcase.height()/2 + offsetY - grab_offsetY; showcase.css('left', new_left +'px'); showcase.css('top', new_top +'px'); } } else{ showcase.css('cursor', 'default'); } }); showcase.mousedown(function(event){ move_photo = true; let cursorY = event.pageY - $(window).scrollTop(); grab_offsetX = event.pageX - (showcase.position().left + showcase.width()/2); grab_offsetY = cursorY - (showcase.position().top + showcase.height()/2); if (isMobile) toggleFullscreen(); }); showcase.mouseup(function(){ move_photo = false; }); showcase.mouseleave(function(){ move_photo = false; }); /* * Display selected image in showcase * When clicked, display image in full size */ function displayBig(elem) { isMouseOverButtons = false; // Allow fullscreen when clicking on an image without mouving the mouse changeImage($(elem).attr('src')); hideTopBar(); disableFullscreen(); photoOverlay.fadeIn(500); $('body').css('overflow', 'hidden'); } function getSourceFromThumbnail(source) { return source.replace("photos_thumb/", "photos/"); } function getThumbnailFromSource(source) { return source.replace("photos/", "photos_thumb/"); } /* * Hide showcase image */ function closeBig() { showTopBar(); disableFullscreen(); photoOverlay.fadeOut(500); $('body').css('overflow', 'auto'); scrollToShowcaseImage(); } function scrollToShowcaseImage() { let source = showcase.attr('src'); let image = $("img[src$='" + getThumbnailFromSource(source) + "']"); if (image !== undefined) { image.get(0).scrollIntoView(); } } function enableFullscreen() { showcaseButtonContainer.fadeOut(500); } function disableFullscreen() { showcaseButtonContainer.fadeIn(500); } function toggleFullscreen() { if (isFullscreen()) disableFullscreen(); else enableFullscreen(); } function hideTopBar() { headerTop.fadeOut(500); sideNav.fadeOut(500); } function showTopBar() { headerTop.fadeIn(500); sideNav.fadeIn(500); } function isFullscreen(){ return showcaseButtonContainer.css("display") === "none"; } function timerIncrement() { if (isMouseOverButtons) idle_time = 0; else idle_time = idle_time+ 1; if (idle_time > 10 && !isFullscreen()) { // 1 second enableFullscreen(); } else if (idle_time <= 10 && isFullscreen()){ disableFullscreen(); } } /* * Control images with keyboard arrows */ $(document).keydown(function (e) { switch (e.keyCode) { case 37: // left displayNext(-1); break; case 39: // right displayNext(1); break; case 27: // escape closeBig(); break; default: return; // exit this handler for other keys } e.preventDefault(); // prevent the default action (scroll / move caret) }); /* * Display next/last image in showcase. When reaching end/start, loop back to start/end */ function displayNext(direction) { let currentSrc = showcase.attr('src'); let photos = document.getElementsByClassName("photo"); let current = 0; for (let i = 0; i < photos.length; i++) { if (getSourceFromThumbnail($(photos[i]).attr('src')) === currentSrc) { current = i; } } let next = current + direction; let nextId = ""; if (direction > 0) { nextId = "#photo-0"; } else { nextId = "#photo-" + (photos.length - 1); } if (document.getElementById("photo-" + next) != null) { nextId = "#photo-" + next; } let nextSrc = $(nextId).attr('src'); changeImage(nextSrc); } /* * Change image source, link and download */ function changeImage(thumb) { displayLoading(); showcase.css('display', 'none'); showcase.on('load', function () { hideLoading(); showcase.css('display', 'block'); if ($(showcase).width() > $(window).width()){ // prevent display problems on portait devices let scale = $(window).width() * 0.9 / $(showcase).width(); $(showcase).width(scale*$(showcase).width()); $(showcase).height(scale*$(showcase).height()); } }); let source = getSourceFromThumbnail(thumb); showcase.attr("src", source); showcase.css({ width: 'auto', height: '90%', }); showcase.css('left', $(window).width()/2 +'px'); showcase.css('top', $(window).height()/2 +'px'); showcaseDownload.attr("href", source); } function displayLoading() { loading.show(); } function hideLoading() { loading.fadeOut(200); }