Skip to content

Instantly share code, notes, and snippets.

@ahmedtalaltwd7

ahmedtalaltwd7/image-zoom.markdown

Created July 21, 2024 22:55
Show Gist options
  • Save ahmedtalaltwd7/52c83386def426ffd0892bf77c084005 to your computer and use it in GitHub Desktop.
Save ahmedtalaltwd7/52c83386def426ffd0892bf77c084005 to your computer and use it in GitHub Desktop.
Download ZIP
Image Zoom
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
width:30%;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 50px;
height: 50px;
border-radius: 10px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAClklEQVR4nO2Zu24TQRSGPxeElgYbEVIYHoECCJdXQAIH+YKECA+AxEVESAl0wAsgUUEKpAhRkBilhkDDJW9AQwupgkhI7LBwpH+lKZyI9c6O7WU/aaSVveec+dd7zpwZQ0HBUHIImAbmgVVgDdjW+A581ndXgQpDyDmgDXSA6B+H3bsEnGUIOAYsO5PrAm+BG8AJoAzs07Drk8BNYEX3xnavgaODEtECfmgiP4EHwMEE9ibsIbAhH+tAg8DMOU9zARhP4esI8MLxN0sg7ivgb12XPPm9DuyEEtNSIAtYy8D/lCOmToaJHefEnayCADNOzlSzCLDs5ESWlJycaWexTkSqMBMJbeMkTsK4KmEEnMEjbTm1EksAIag0R8AiHtuOjhawJOtEWiG2znTV3th1aq5pIm/6tO9XiPFOtlfwwLycWdsRWsgt2T7FA6tyZr1TaCGTsv2IB9bkrJ/8SCukIttveGBLzsb2uCdKOXZjv77/lRch63l5tb7gMdltUxRayGnZWhnORfl9ggem5cy2p6GFvJftBTxQcVqU8gBalA5wAE8saTLWyIUS8kh21tJ745Scbg6gjT+OZ9rOE/K1T++F+X6pWK+yCFDVwhRpO5oVdxXDTiYPZxWk4Rw+2EGBby45hw/nyZhZR8yMp9espF8iFrGjExtCiYlzxg7Z+mXCyQl3WOltEoC6kzMbKs1J1pmySuym0xh2e4hpEICqU83iwCtqLSa1mI5pVPTZbfVO7qQXlNjNQYpBRzaLCf9WsO3B8x7N6G5i6gSkrIOCZ8AnldAtLW5fgQ/AY01qr21BYxjE+MLKe6eHmMvkSEyLEWQqT2Jq/4OYJiMqZrsQMyIFYI4R5aLzmt1jxKmF/Du7oODvE/gDsK1OzbPVPLYAAAAASUVORK5CYII");
}
.img-zoom-result {
/*set the size of the result div:*/
display:block;
width: 500px;
height: 500px;
position: fixed;
top: 20px;
left: 320px;
z-index: 1;
overflow: auto;
border-radius: 10px;
}
</style>
<script src="./script.js"></script>
</head>
<body>
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container" onmouseover="showDiv()" onmouseout="hideDiv()">
<img id="myimage" src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" width="300" height="240">
</div>
<div id="myresult" class="img-zoom-result">
</div>
</div>
<script>
window.onload = function() {
const imageElement = document.querySelector('.img-zoom-result');
if (imageElement) {
document.getElementById('myresult').style.display = 'none';
}
}
function showDiv() {
document.getElementById('myresult').style.display = 'block';
return "ho";
}
function showDivplus() {
document.getElementById('twd');
document.getElementById('myresult').style.display = 'block';
return "twd";
}
function hideDiv() {
document.getElementById('myresult').style.display = 'none';
}
// Log the returned value to the console
// Function that takes a parameter and uses the value
// Using the functions together
function imageZoom(imgID, resultID) {
var result2 = showDiv(); // This will also display the div and capture the return value
console.log(result2);
//let num=0;
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
console.log(cx)
result.style.backgroundImage = "url('" + img.src + "')";
// result.style.background="red";
// console.log("goooo")
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(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);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "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};
}
}
// Initiate zoom effect:
imageZoom("myimage", "myresult");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment