JS Image Compare button overflow - javascript

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>

Related

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.

Image Zoom not displayed

sorry for my English..
I to try this javascript code from w3schools.
The difference output between mine and them is that I want my result display on the same window.
How have the code;
Top above;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
In Style,
* {box-sizing: border-box;}
.grosse-bild {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.grosse-bild .kleine-fenster {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
.grosse-bild { padding: 40px; background-color: #dedee0; width: 53.7%; }
.kleine-fenster{
width: 50%;
border: none;
padding-top: 5px;
display: block;
margin-left: auto;
margin-right: auto;
}
The Javascript code,
<script>
// Initiate zoom effect:
imageZoom("myresult", "myimage");
</script>
and
function imageZoom(resultID, imgID) {
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};
}
}
The Html Code,
<div class="container">
<div class="grosse-bild">
<div class="kleine-fenster" id="myresult" >
<img src="/kalamulur/Taschen-&-Rucksäcke/Rucksäcke/fenster/photo/113.jpg" width=280 height=280 class="window" id="myimage">
</div>
</div>
</div>
Here to show it..
That problem of this code is that it does nothing...
Can please someone help and say to me where is my mistake?

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");
}

How to center the whole image comparison slider

When I manage to move the image comparison slider, the actual 'slider' left behind. The slider JS code is from https://www.w3schools.com/howto/howto_js_image_comparison.asp
and can be easily inspect there but I will paste the code in here too.
I have tried to move the slider with Css grid but the as mentioned before the slider icon won't move with the images.
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();
.img-comp-container {
margin:auto;
position: relative;
height: 100vh;
width: 100vw
}
.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;
width: 0;
height: 0;
border-style: solid;
border-width: 9px 0 9px 14px;
border-color: transparent transparent transparent #ffffff;
}
<div class="img-comp-container">
<div class="img-comp-img">
<img src="img/ysl_before.jpg" width="650" height="450">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="img/ysl_after.jpg" width="650" height="450">
</div>
</div>
I believe this fixes what you are looking for:
Wrap the existing container in another div (img-comp-outer-container), remove margin from img-comp-container and set height/width of img-comp-container to auto.
You can then style the outer container to align the component how you like
<div class="img-comp-outer-container"> <!--new div -->
<div class="img-comp-container">
<div class="img-comp-img">
<img src="img_snow.jpg" width="650" height="450">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="img_forest.jpg" width="650" height="450">
</div>
</div>
</div> <!--new div end -->
.img-comp-outer-container {
/* add your styles to move around component */
}
.img-comp-container {
/* margin: auto; */
position: relative;
height: auto; /* was 100vh */
width: auto; /* was 100vw */
}
I wanted to bring the two images, that I'm comparing using image compare slider to the center of the page. The code available on W3Schools to compare images using slider but there was not suggestion about centering it. So what I did was I placed div id box and added all other classes into it and styled the box as white with height and width and added float-right to the img-comp-container. You can change the width and height of box accordingly to center the slider.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-comp-container {
float: right; /*new change*/
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%;
}
/*new change*/
#box{
background: white;
width: 150px;
height: 200px;
}
</style>
<script>
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("touchend", 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";
}
}
}
</script>
</head>
<body>
<h1>Compare Two Images</h1>
<p>Click and slide the blue slider to compare two images:</p>
<div id="box">/*new change*/
<div class="img-comp-container">
<div class="img-comp-img">
<img src="img_snow.jpg" width="300" height="200">
</div>
<div class="img-comp-img img-comp-overlay">
<img src="img_forest.jpg" width="300" height="200">
</div>
</div>
</div>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
</body>
</html>

Snapping Drag and Drop Items in JavaScript

I am trying to use drag and drop to move pictures from one <div> to another.
Currently, I can move the pictures anywhere in the destination <div>, but what I really want is that the pictures snap together when dropped. Ideally, they would be able to snap together on any side (not just, for example, on the bottom or on the right).
I've tried a few different things (including using <canvas>) and it didn't work.
This is what I have so far:
var clone;
var offsetx = null;
var offsety = null;
var isClone = false;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
offsetx = ev.target.offsetLeft - event.clientX;
offsety = ev.target.offsetTop - event.clientY;
ev.dataTransfer.setData("text", ev.target.id);
}
function dropTrash(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var remove = document.getElementById(data);
remove.parentNode.removeChild(remove);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
}
function dropClone(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var num = Math.random() * (1000 - 1) + 1;
isClone = true;
clone = document.getElementById(data).cloneNode(true);
clone.id = "newId" + num.toString();
clone.style.position = "absolute";
clone.style.left = (event.clientX+offsetx)+"px";
clone.style.top = (event.clientY+offsety)+"px";
ev.target.appendChild(clone);
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
#imgDiv {
width: 611px;
height: 324px;
border: 5px solid #DDD;
}
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3" ondrop="dropTrash(event)" ondragover="allowDrop(event)">
<img id="drag1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/1200px-Bartagame_fcm.jpg" draggable="true" ondragstart="drag(event)" width="105" height="105">
<img id="drag2" src="http://www.earthtimes.org/newsimage/lizard_Ngo_Van_Tri_big_281.jpg" draggable="true" ondragstart="drag(event)" width="105" height="105">
</div>
<div id="div4">
<div align="center" id="imgDiv" ondrop="dropClone(event)" ondragover="allowDrop(event)"></div>
</div>
When you start dragging an image, you need to store the position of the cursor, relative to that particular image.
There are multiple position properties in the MouseEvent that will help you calculate that, but if browser support is not an issue, I would go for MouseEvent.offsetX and MouseEvent.offsetY. From the docs:
The offsetX/offsetY read-only property of the MouseEvent interface provides the offset in the X/Y coordinate of the mouse pointer between that event and the padding edge of the target node.
So, on dragstart, you will do just:
x = e.offsetX;
y = e.offsetY;
Then, when you drop the image in your, let's call it canvas (note the italics as it is not a <canvas> element, but any other element that you use as your drop zone, a <div> in this particular example), you need to know the position of the cursor relative to that canvas, so you may think you could use offsetX and offsetY again, and your are partially right. That would give you the expected value if you drop the image on the canvas itself, but there may be other images in it already, and you may drop the current one on top of another one, getting the offsetX and offsetY relative to that one instead.
What you can do is use MouseEvent.pageX and MouseEvent.pageY and, from that value, subtract the position of the (upper-left corner) of that canvas element, which you can get from HTMLElement.offsetLeft and HTMLElement.offsetTop:
e.pageX - imageCanvas.offsetLeft;
e.pageY - imageCanvas.offsetTop;
With this you will get the position of the cursor relative to the canvas element.
Now, you need to subtract the x and y values that you stored on dragstart, and that will give you the left and top values of the upper-left corner of the dragged image, relative to the canvas element:
image.style.left = (e.pageX - imagesCanvas.offsetLeft - x) + 'px';
image.style.top = (e.pageY - imagesCanvas.offsetTop - y) + 'px';
All together it will look like this:
let x;
let y;
let currentTarget = null;
let cloneElement = false;
function startDrag(e, clone) {
const target = e.target;
if (target.tagName === 'IMG') {
x = e.offsetX;
y = e.offsetY;
currentTarget = target;
cloneElement = clone;
}
}
function cloneImage(e) {
startDrag(e, true);
}
function moveImage(e) {
startDrag(e, false);
}
function removeImage(e) {
if (!cloneElement) {
currentTarget.remove();
}
}
function stickImage(e) {
const image = cloneElement ? currentTarget.cloneNode(true) : currentTarget;
imagesCanvas.appendChild(image);
// + 1 for the border
image.style.left = (e.pageX - imagesCanvas.offsetLeft - x + 1) + 'px';
image.style.top = (e.pageY - imagesCanvas.offsetTop - y + 1) + 'px';
currentTarget = null;
}
function allowDrag(e) {
e.preventDefault();
}
// Bind event listeners:
const imagesBarElement = document.getElementById('imagesBar');
const imagesCanvasElement = document.getElementById('imagesCanvas');
document.addEventListener('dragenter', allowDrag);
document.addEventListener('dragover', allowDrag);
imagesBarElement.addEventListener('dragstart', cloneImage);
imagesBarElement.addEventListener('drop', removeImage);
imagesCanvasElement.addEventListener('dragstart', moveImage);
imagesCanvasElement.addEventListener('drop', stickImage);
body {
margin: 0;
font-size: 0;
display: flex;
flex-direction: column;
height: 100vh;
user-select: none;
}
img {
width: 100px;
height: 100px;
}
#imagesBar {
height: 100px;
border-bottom: 1px solid #CCC;
padding: 10px 0;
}
#imagesBar > img {
margin: 0 0 0 10px;
}
#imagesCanvas {
position: relative;
background: #EEE;
flex-grow: 1;
overflow: hidden;
}
#imagesCanvas > img {
position: absolute;
}
<div id="imagesBar">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/1200px-Bartagame_fcm.jpg" draggable="true">
<img src="http://www.earthtimes.org/newsimage/lizard_Ngo_Van_Tri_big_281.jpg" draggable="true">
</div>
<div id="imagesCanvas"></div>

Categories

Resources