diff options
| author | Robert Scheibe <mail@robert-scheibe.de> | 2025-01-11 14:57:20 +0100 |
|---|---|---|
| committer | Robert Scheibe <mail@robert-scheibe.de> | 2025-01-11 14:57:20 +0100 |
| commit | 45d0333ed05738f82806fee58cc7031698b8481b (patch) | |
| tree | 99647ee3d0149952d5e80f7b2d5f6aef3f147a8f | |
| parent | 09f0c55dd6c5068742e9c732777df8da6293f036 (diff) | |
added magnifying glass
| -rw-r--r-- | index.html | 121 |
1 files changed, 115 insertions, 6 deletions
@@ -3,15 +3,22 @@ <head> <title> waterpi </title> <meta name="viewport" content="width=device-width, initial-scale=1"> - <style> + +<style> + + #featured { + max-width: 100%; /* Ensures the image doesn't exceed its container */ + height: auto; /* Maintains aspect ratio */ +} .gallery { max-width: 800px; - margin: 0 auto; + margin: auto; text-align: center; } -.main-image { - margin-bottom: 20px; +.img-magnifier-container { + max-width: 800px; + position:relative; } .main-image img { @@ -21,6 +28,16 @@ margin: 0 auto; } +.img-magnifier-glass { + position: absolute; + border: 3px solid #000; + border-radius: 50%; + cursor: none; + /*Set the size of the magnifier glass:*/ + /* width: 200px; + height: 200px;*/ +} + .controls { display: flex; justify-content: center; @@ -64,12 +81,89 @@ } </style> +<script> + +function magnify(imgID, zoom) { + var img, glass, w, h, bw; + img = document.getElementById(imgID); + /*create magnifier glass:*/ + glass = document.createElement("DIV"); + glass.setAttribute("class", "img-magnifier-glass"); + + //set width and height + const displayWidth = window.innerWidth; + const displayHeight = window.innerHeight; + + // Calculate 10% of the smaller dimension + const magnifierSize = Math.floor(Math.min(displayWidth, displayHeight) * 0.25); + + // Update the magnifier's size dynamically + glass.style.width=`${magnifierSize}px`; + glass.style.height=`${magnifierSize}px`; + + /*insert magnifier glass:*/ + img.parentElement.insertBefore(glass, img); + /*set background properties for the magnifier glass:*/ + glass.style.backgroundImage = "url('" + img.src + "')"; + glass.style.backgroundRepeat = "no-repeat"; + glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; + bw = 3; + w = glass.offsetWidth / 2; + h = glass.offsetHeight / 2; + /*execute a function when someone moves the magnifier glass over the image:*/ + glass.addEventListener("mousemove", moveMagnifier); + img.addEventListener("mousemove", moveMagnifier); + /*and also for touch screens:*/ + glass.addEventListener("touchmove", moveMagnifier); + img.addEventListener("touchmove", moveMagnifier); + function moveMagnifier(e) { + var pos, x, y; + /*prevent any other actions that may occur when moving over the image*/ + e.preventDefault(); + /*get the cursor's x and y positions:*/ + pos = getCursorPos(e); + x = pos.x; + y = pos.y; + /*prevent the magnifier glass from being positioned outside the image:*/ + if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} + if (x < w / zoom) {x = w / zoom;} + if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} + if (y < h / zoom) {y = h / zoom;} + /*set the position of the magnifier glass:*/ + glass.style.left = (x - w) + "px"; + glass.style.top = (y - h) + "px"; + /*display what the magnifier glass "sees":*/ + glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; + } + function getCursorPos(e) { + var a, x = 0, y = 0; + e = e || window.event; + /*get the x and y positions of the image:*/ + a = img.getBoundingClientRect(); + /*calculate the cursor's x and y coordinates, relative to the image:*/ + x = e.pageX - a.left; + y = e.pageY - a.top; + /*consider any page scrolling:*/ + x = x - window.pageXOffset; + y = y - window.pageYOffset; + return {x : x, y : y}; + } +} +function resetMagnifier() { + // Remove existing magnifier glass + const existingGlass = document.querySelector('.img-magnifier-glass'); + if (existingGlass) { + existingGlass.remove(); + } +} + +</script> </head> <body> <div class="gallery"> - <div class="main-image"> - <img id="featured" src="" alt="Hauptbild" onerror="this.src='error.png'"> + <div class="img-magnifier-container"> + <img id="featured" src="12_00.jpg" alt="image of a hopefully healty coffee plant" onerror="this.src='error.png'"> </div> <div class="controls"> <button onclick="jumpTime(-60)" class="nav-button"><img src="fbck.png"></button> @@ -83,7 +177,9 @@ </body> </html> + <script> + let currentDateTime = new Date(); function roundToQuarterHour(date) { @@ -127,6 +223,12 @@ function jumpToCurrent() { function updateImage() { const timeString = formatTimeString(currentDateTime); document.getElementById('featured').src = `${timeString}.jpg`; + // Wait for the new image to load before reinitializing + const featuredImage = document.getElementById('featured'); + featuredImage.onload = function() { + resetMagnifier(); + magnify("featured", 3); + }; } function updateButtons() { @@ -162,6 +264,13 @@ document.addEventListener('keydown', function(event) { // Initial gallery setup updateGallery(); +/* Initiate Magnify Function +with the id of the image, and the strength of the magnifier glass:*/ +const featuredImage = document.getElementById('featured'); +featuredImage.onload = function() { + magnify("featured", 3); +}; + // Aktualisiere die Galerie alle 15 Minuten setInterval(updateGallery, 900000); </script> |