Develop Reference

Add 2-3 images in the mouse hover effect

I have made this code for mouse hover zoom effect and it is working without error. But I want to add 2-3 images so as the user clicks on it, then that image is shown and mouse hover effect works on it, i.e. on hovering the mouse on the picture shows a zoom effect.
Here is my code:
function imageZoom(imgID, resultID) {
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:*/
result.style.backgroundImage = "url('" + img.src + "')";
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);
/*initialise and hide lens result*/
result.style.display = "none";
/*Reveal and hide on mouseover or out*/
lens.onmouseover = function(){result.style.display = "block";};
lens.onmouseout = function(){result.style.display = "none";};
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};
}
};
imageZoom("myimage", "myresult");
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
display: flex;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
position: absolute;
left: 300px; /*match width of #myimage*/
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result" style=""></div>
</div>
<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>
I was searching for the answer and hope here i will get the solution.
Thank you in advance.

Just add more picture like this:
<div class="img-zoom-container">
<img id="myimage" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result" style=""></div>
</div>
<div class="img-zoom-container">
<img id="myimage2" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult2" class="img-zoom-result" style=""></div>
</div>
<div class="img-zoom-container">
<img id="myimage3" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult3" class="img-zoom-result" style=""></div>
</div>
Then add more calling function
imageZoom("myimage", "myresult");
imageZoom("myimage2", "myresult2");
imageZoom("myimage3", "myresult3");
;)

img {
height: 100px;
width: 200px;
background-color: blue;
}
img:hover {
height: 200px;
width: 400px;
background-color: red;
}
<img src="">
no need for JS to have a hover effect on an image. You can do that purely with CSS by adding :hover to its class/id.

How do I apply my magnifier on multple images on a single page?

// magnify hover
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");
/*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};
}
}
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("mag", 5);
* {box-sizing: border-box;}
.img-magnifier-container {
position:relative;
}
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 1px solid #000;
border-radius: 20%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 120px;
height: 130px;
opacity:0;
pointer-events:none;
}
a:hover .img-magnifier-glass{
opacity:1;
pointer-events:initial;
}
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block"><tr><td width="115" style="text-align: center"><center><img class="cover" width="115" height="133" border="0" id="mag" class="pstrart" id="pstr" src="https://images2.static-bluray.com/movies/covers/238380_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Ant-Man" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" id="flgborder" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center></td></tr></table>
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block"><tr><td width="115" style="text-align: center"><center><img class="cover" width="115" height="133" border="0" id="mag" class="pstrart" id="pstr" src="https://images2.static-bluray.com/movies/covers/202637_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="A Quiet Place" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" id="flgborder" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center></td></tr></table>
Hello,
I recently made a magnifier on hover using the help from people on this website. However, I don't konw how to make it so I can have the magnifier on all the images instead of just the first one. I provided two images in the snippet on this post so you can see what I mean.
Thank you for any information!

To further elabourate on my comment: the main issue is that:
You have duplicate IDs and duplicate attributes in multiple elements on your page. You should always use unique IDs within a document, and instead of having multiple class attributes per element, you should combine them into one.
You are initializing the magnify logic on a single element. You are lacking iterative logic to step through all the images that you want to magnify.
My suggestion is that:
Fix the DOM mistakes as stated above. Also, give your image elements that you want to magnify a common class, so we can select all of them. Example is class="magnify-image", but you can use any arbitrary class names that you want.
You update the magnify() method to accept an image element instead of an ID: that will mean that our iterative logic can pass in the image element you want to magnify directly. Rewriting it to be function magnify(img, zoom) { ... } and then remove the var img = ... assignment is sufficient.
You give each image you want to magnify a class, and then select for all these images to create a HTMLCollection. Iterate through this collection and simply pass the image element in each iteration as the first argument.
Example of iterative logic:
// Iterate through all images you want to magnify
const images = document.querySelectorAll('.magnify-image');
Array.from(images).forEach((image) => {
// We pass the actual image element into the function
magnify(image, 5);
});
If you absolutely have to support ES5, then we can do this:
var images = document.getElementsByClassName('magnify-image');
Array.prototype.forEach.call(images, function(image) {
// We pass the actual image element into the function
magnify(image, 5);
});
See proof-of-concept:
// magnify hover
function magnify(img, zoom) {
var glass, w, h, bw;
/*create magnifier glass:*/
glass = document.createElement("DIV");
glass.setAttribute("class", "img-magnifier-glass");
/*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
};
}
}
// Iterate through all images you want to magnify
const images = document.querySelectorAll('.magnify-image');
Array.from(images).forEach((image) => {
magnify(image, 5);
});
* {
box-sizing: border-box;
}
.img-magnifier-container {
position: relative;
}
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 1px solid #000;
border-radius: 20%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 120px;
height: 130px;
opacity: 0;
pointer-events: none;
}
a:hover .img-magnifier-glass {
opacity: 1;
pointer-events: initial;
}
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block">
<tr>
<td width="115" style="text-align: center">
<center>
<img width="115" height="133" border="0" class="cover pstrart magnify-image" src="https://images2.static-bluray.com/movies/covers/238380_front.jpg" style="">
</center>
<center><input type="checkbox" name="movieboxes" value="Ant-Man" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center>
</td>
</tr>
</table>
<table class="img-magnifier-container" width="115" border="0" cellpadding="0" cellspacing="0" style="display: inline-block">
<tr>
<td width="115" style="text-align: center">
<center>
<img width="115" height="133" border="0" class="cover pstrart magnify-image" src="https://images2.static-bluray.com/movies/covers/202637_front.jpg" style="">
</center>
<center><input type="checkbox" name="movieboxes" value="A Quiet Place" style="width: 15px; height: 15px; margin: 0px;">
<img title="United Kingdom" border="2" class="flag" src="https://cdn.discordapp.com/attachments/530906893443399683/665554365897244693/union-jack-26119_960_720.png" style="width: 25px; height: 17px;">
</center>
</td>
</tr>
</table>

error magic zoom with javascript and html,css

My code contains five images, four of which are thumbnails,Are displayed by clicking in the main img tag
The problem is, besides changing the photo I want to zoom in but Whenever the photo changes,show zoom for the same photo
my code show result zoom just for fist img and i think it is related to js code this line buti am not sure and i cannot solve it
result.style.backgroundImage = "url('" + img.src + "')";
img in state of1
result zoom div not changing
<script>
function imageZoom(imgID, resultID) {
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:*/
result.style.backgroundImage = "url('" + img.src + "')";
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};
}
}
</script>
<script>
// Initiate zoom effect:
imageZoom("expandedImg", "myresult");
</script>
<script>
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
expandImg.src = imgs.src;
expandImg.parentElement.style.display = "block";
}
</script>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
</style>
<style>
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
</style>
<script>
<div class="img-zoom-container">
<img id="expandedImg" src="imgs/img4.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result"></div>
</div>
<div class="row">
<div class="column">
<img id="expandedImg" src="imgs/img5.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imgs/img4.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imgs/img3.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="imgs/img2.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
</div>
</div>

i solve it after 5 min insert my question :))))
i should use this code
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
expandImg.src = imgs.src;
expandImg.parentElement.style.display = "block";
imageZoom("expandedImg", "myresult");
}

Amending image zoom logic

I want to set lens on preview Pane and show perfect image into zoomer div but unable to fix it. I just convert my code from some javascript example and I'm poor in javascript thats why i need help from some experts!
my expectation like image below:
my current development like:
$(function(){
$('.previewPane, #zoomer').css('background-image','url('+$('.imgkey').first().attr('src')+')');
$('.imgkey').click(function(){
$('.previewPane').css('background-image','url('+$(this).attr('src')+')');
});
$('.previewPane').mousemove(function(ev){
$('#zoomer').css('display','inline-block');
var img = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
var posX = ev.offsetX ? (ev.offsetX) : ev.pageX - $(this).offset().left;
var posY = ev.offsetY ? (ev.offsetY) : ev.pageY - $(this).offset().top;
$('#zoomer').css('background-position',((-posX * 3) + "px " + (-posY * 3) + "px"));
$('#zoomer').css('background-image','url('+img+')');
});
$('.previewPane').mouseleave(function(){$('#zoomer').css('display','none');});
});
.imgkey{width:50px;height:50px;border:1px solid #ddd;}
.previewPane{display:inline-block;border:1px solid #ddd;width:250px;height:250px;cursor:crosshair;background-repeat:no-repeat;background-position:center;background-size:100% 100%}
#zoomer{display:none;background-repeat:no-repeat;border:1px solid #ddd;width:250px;height:250px;z-index:1000;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<main>
<div class="previewPane"></div><div id="zoomer"></div>
<div class="imgline">
<img class="imgkey" src="https://cdn.shopify.com/s/files/1/0622/2101/products/product-image-496137782_800x.jpg?v=1519622126">
<img class="imgkey" src="https://images-na.ssl-images-amazon.com/images/I/61IPCXn13AL._SX385_.jpg">
<img class="imgkey" src="https://http2.mlstatic.com/celular-smartphone-caterpillar-s60-negro-32-gb-D_NQ_NP_940281-MCO26572973595_122017-F.jpg">
</div>
</main>
I also try your code with simple change like : just add this two line before "$('.preview').each(function() { " but no luck.
$('.img-zoom-container').html('<div class="preview"><img class="image" src="'+$('.Key').first().attr('src')+'"></div>');
$('.Key').click(function(){
$('.img-zoom-container').html('<div class="preview"><img class="image" src="'+$(this).attr('src')+'"></div>');
});
and images out side of 'img-zoom-container' like:
<img class="Key" src="https://www.w3schools.com/howto/img_girl.jpg" width="200" height="200">
<img class="Key" src="https://placeimg.com/640/480/animals" width="200" height="200">
<img class="Key" src="https://placeimg.com/640/480/arch" width="200" height="200">

You have missed the CSS from W3Schools and your image src is not working,
See working snippet with multiple images.
$('.preview').each(function() {
var lens, cx, cy, img, result;
img = $(this).find('img.image')[0];
result = document.getElementById('result');
/*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:*/
/*execute a function when someone moves the cursor over the image, or the lens:*/
$(lens).on('mousemove touchmove', moveLens);
$(img).on('mousemove touchmove', moveLens);
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 moveLens(e) {
var pos, x, y;
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*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";
console.log(result);
}
})
* {
box-sizing: border-box;
}
.img-zoom-container {
width: 100%
}
.preview {
display: inline-block;
margin: 0 10px;
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<div class="preview"><img class="image" src="https://www.w3schools.com/howto/img_girl.jpg" width="200" height="200"></div>
<div class="preview"><img class="image" src="https://placeimg.com/640/480/animals" width="200" height="200"></div>
<div class="preview"><img class="image" src="https://placeimg.com/640/480/arch" width="200" height="200"></div>
</div>
<div class="img-zoom-result" id="result"></div>

JS Image Compare button overflow

I've been editing this JS image compare example, and everything is great. I just don't know how to change one thing.
The circle button that indicates where the user should drag the image overflows out of the container when its pulled left or right. I'm talking about this: https://prnt.sc/ja1r6g
How can I fix that and make it so that when it's pulled all the way to the right or left, it goes below the image and doesn't show the overflow?
Here's the snipped of the code:
function initComparisons() {
var x, i;
/*find all elements with an "overlay" class:*/
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
/*once for each "overlay" element:
pass the "overlay" element as a parameter when executing the compareImages function:*/
compareImages(x[i]);
}
function compareImages(img) {
var slider, img, clicked = 0, w, h;
/*get the width and height of the img element*/
w = img.offsetWidth;
h = img.offsetHeight;
/*set the width of the img element to 50%:*/
img.style.width = (w / 2) + "px";
/*create slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
/*execute a function when the mouse button is pressed:*/
slider.addEventListener("mousedown", slideReady);
/*and another function when the mouse button is released:*/
window.addEventListener("mouseup", slideFinish);
/*or touched (for touch screens:*/
slider.addEventListener("touchstart", slideReady);
/*and released (for touch screens:*/
window.addEventListener("touchstop", slideFinish);
function slideReady(e) {
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*the slider is now clicked and ready to move:*/
clicked = 1;
/*execute a function when the slider is moved:*/
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
/*the slider is no longer clicked:*/
clicked = 0;
}
function slideMove(e) {
var pos;
/*if the slider is no longer clicked, exit this function:*/
if (clicked == 0) return false;
/*get the cursor's x position:*/
pos = getCursorPos(e)
/*prevent the slider from being positioned outside the image:*/
if (pos < 0) pos = 0;
if (pos > w) pos = w;
/*execute a function that will resize the overlay image according to the cursor:*/
slide(pos);
}
function getCursorPos(e) {
var a, x = 0;
e = e || window.event;
/*get the x positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x coordinate, relative to the image:*/
x = e.pageX - a.left;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
return x;
}
function slide(x) {
/*resize the image:*/
img.style.width = x + "px";
/*position the slider:*/
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
initComparisons();
* {box-sizing: border-box;}
.img-comp-container {
position: relative;
height: 200px; /*should be the same height as the images*/
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow:hidden;
}
.img-comp-img img {
display:block;
vertical-align:middle;
}
.img-comp-slider {
position: absolute;
z-index:9;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
}
<h1>Compare Two Images</h1>
<p>Click and slide the blue slider to compare two images:</p>
<div class="img-comp-container">
<div class="img-comp-img">
<img src="https://placeimg.com/640/480/animals" width="300" height="200">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="https://placeimg.com/640/480/animals?t=1524676145713" width="300" height="200">
</div>
</div>
EDIT: If I just add another div to wrap it all in and add overflow: hidden, it doesn't actually DO anything.

So I've got a solution. Pretty simple one. But you must know the width of your .img-comp-container. And of course overflow: hidden; is there as well
The problem is, that overflow: hidden; works as it should. But since your .img-comp-container is a block style element it spans the whole width of your webpage (or its parent container). Therefore to enforce the overflow not just vertically but also horizontally, you have to limit the width of that div to "hide" it properly
function initComparisons() {
var x, i;
/*find all elements with an "overlay" class:*/
x = document.getElementsByClassName("img-comp-overlay");
for (i = 0; i < x.length; i++) {
/*once for each "overlay" element:
pass the "overlay" element as a parameter when executing the compareImages function:*/
compareImages(x[i]);
}
function compareImages(img) {
var slider, img, clicked = 0,
w, h;
/*get the width and height of the img element*/
w = img.offsetWidth;
h = img.offsetHeight;
/*set the width of the img element to 50%:*/
img.style.width = (w / 2) + "px";
/*create slider:*/
slider = document.createElement("DIV");
slider.setAttribute("class", "img-comp-slider");
/*insert slider*/
img.parentElement.insertBefore(slider, img);
/*position the slider in the middle:*/
slider.style.top = (h / 2) - (slider.offsetHeight / 2) + "px";
slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px";
/*execute a function when the mouse button is pressed:*/
slider.addEventListener("mousedown", slideReady);
/*and another function when the mouse button is released:*/
window.addEventListener("mouseup", slideFinish);
/*or touched (for touch screens:*/
slider.addEventListener("touchstart", slideReady);
/*and released (for touch screens:*/
window.addEventListener("touchstop", slideFinish);
function slideReady(e) {
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*the slider is now clicked and ready to move:*/
clicked = 1;
/*execute a function when the slider is moved:*/
window.addEventListener("mousemove", slideMove);
window.addEventListener("touchmove", slideMove);
}
function slideFinish() {
/*the slider is no longer clicked:*/
clicked = 0;
}
function slideMove(e) {
var pos;
/*if the slider is no longer clicked, exit this function:*/
if (clicked == 0) return false;
/*get the cursor's x position:*/
pos = getCursorPos(e)
/*prevent the slider from being positioned outside the image:*/
if (pos < 0) pos = 0;
if (pos > w) pos = w;
/*execute a function that will resize the overlay image according to the cursor:*/
slide(pos);
}
function getCursorPos(e) {
var a, x = 0;
e = e || window.event;
/*get the x positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x coordinate, relative to the image:*/
x = e.pageX - a.left;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
return x;
}
function slide(x) {
/*resize the image:*/
img.style.width = x + "px";
/*position the slider:*/
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
}
}
}
initComparisons();
* {
box-sizing: border-box;
}
.img-comp-container {
position: relative;
height: 200px;
/*should be the same height as the images*/
/* Overflow must be here, and helping it up with width */
width: 300px;
overflow: hidden;
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow: hidden;
}
.img-comp-img img {
display: block;
vertical-align: middle;
}
.img-comp-slider {
position: absolute;
z-index: 9;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
}
<h1>Compare Two Images</h1>
<p>Click and slide the blue slider to compare two images:</p>
<div class="img-comp-container">
<div class="img-comp-img">
<img src="https://placeimg.com/640/480/animals" width="300" height="200">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="https://placeimg.com/640/480/animals?t=1524676145713" width="300" height="200">
</div>
</div>