I wanna magnify some switching images after clicking some buttons. however, it seems that the magnified image is always the first one. Anyone can help me?
The problem should be started from the bottom of JS code, plese see attached code.
Also, I am wondering that if i need to merge magnify() into onclick function
Thanks for your patience,
joe
I have tired to add magnify() within function, but seems not work as well.
function softtissue(){
document.getElementById("img-imgmap201293016112").src="images/Cases/softtissue/32.jpg";
}
function bone(){
document.getElementById("img-imgmap201293016112").src="images/Cases/bone/32.jpg";
}
function lung(){
document.getElementById("img-imgmap201293016112").src="images/Cases/lung/32.jpg";
}
magnify('img-imgmap201293016112',3);
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};
}
}
/*Qustion begain here*/
function activatemagnify(){
var dis= document.getElementsByClassName("img-magnifier-glass");
if( dis [0].style.visibility==="hidden"){
dis [0].style.visibility="visible";
}
else{
dis [0].style.visibility="hidden";
}
}
function softtissue(){
document.getElementById("img-imgmap201293016112").src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg";
}
function bone(){
document.getElementById("img-imgmap201293016112").src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg/183px-Vincent_van_Gogh_-_Sunflowers_-_VGM_F458.jpg";
}
function lung(){
document.getElementById("img-imgmap201293016112").src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_%28454045%29.jpg/190px-Vincent_van_Gogh_-_Self-Portrait_-_Google_Art_Project_%28454045%29.jpg";
}
magnify('img-imgmap201293016112',3);
{box-sizing: border-box;}
.img-magnifier-container {
position:relative;
}
.img-magnifier-glass {
visibility: hidden;
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
}
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div class="img-magnifier-container">
<img id="img-imgmap201293016112" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Starry_Night_Over_the_Rhone.jpg/200px-Starry_Night_Over_the_Rhone.jpg" width="600" height="400">
</div>
<br/><br/><br/><br/>
<div style="z-index:3">
<button id="softtissue" type="button" onclick="softtissue();return false" class="button">
Soft Tissue</button>
<button id="bone" type="button" onclick="bone(); return false;" class="button">
Bone</button>
<button id="lung" type="button" onclick="lung()" class="button">
Lung</button>
<button onclick="activatemagnify()" type="button" class="button">
Magnify</button>
</div>
</body>
</html>
Main problem with your code is that the image containing the zoomed image is created on first load and not changed afterwards.
If you add an img.onload=function() to the image and update the zoomed image as soon as the base image has loaded, you get a working magnifying glass. You should also set glass.style.visibility="hidden" otherwise you have to click twice to show the zoom lense.
Here is the part of code that needs to be altered:
function magnify(imgID, zoom) {
var img, glass, w, h, bw;
img = document.getElementById(imgID);
var prevImgs= document.getElementsByClassName("img-magnifier-glass");
// remove the old lense ...
if (prevImgs.length>0) {
prevImgs[0].remove();
}
/*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 + "')";
console.log(img.src);
glass.style.backgroundRepeat = "no-repeat";
glass.style.visibility = "hidden";
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);
...
}
And instead of calling the magnify(...); once, call it whenever the image has finished loading:
document.getElementById("img-imgmap201293016112").onload = function() {
magnify('img-imgmap201293016112', 3);
}
Here is a Fiddle showing the working magnifying glass.
Related
I've used a pretty standard image zoom effect from the following example: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp
The HTML + CSS + JS is pretty much exactly what is used in the example above.
This works perfectly on 1 image. However when multiple images are used it only works on the first image.
I'm pretty sure it's to do with using getElementById instead of querySelectorAll for some things (possibly var img and var result) hence why it's only applying to the first instance of #myimage.
Can anyone help me run this code but loop it over ALL images (with #myimage as the ID)?
Much appreciated!
Original code below:
JAVASCRIPT:
// enable image zoom
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};
}
}
imageZoom("myimage", "myresult");
HTML:
<img src='https://via.placeholder.com/250' id="myimage">
<div id="myresult" class="img-zoom-result"></div>
Something like this?
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};
}
}
[…document.querySelectorAll(“#myimage”)].forEach( img => {
magnify(img,3);
})
I use Image Zoom from w3schools, code as follows:
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
img.parentElement.insertBefore(lens, img);
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
result.style.display = "none";
function moveLens(e) {
var pos, x, y;
e.preventDefault();
pos = getCursorPos(e);
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
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;}
lens.style.left = x + "px";
lens.style.top = y + "px";
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
imageZoom("myimage", "myresult");
And I use the following simple code to switch images:
function change_img(img_src) {
document.getElementsByName("goods_img")[0].src=img_src;
}
My url: https://cn.angelcorp.net/shop/goods.php?id=9
You may click the thumbnail image with flag, but the zoom still show original image without flag.
Thank you.
You've got to change the background of myresult to the img_src as well.
Change the function to this
function change_img(img_src) {
document.getElementsByName("goods_img")[0].src=img_src;
document.getElementById("myresult").style = `background-image: url("${img_src}"); background-size: 468.846px 468.846px; display: none; background-position: -256.846px -256.846px;`;
}
// 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", 2);
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 3px solid #000;
border-radius: 40%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
}
<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://images.static-bluray.com/movies/covers/174423_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Logan" style="width: 15px; height: 15px; margin: 0px;">
Hello,
How can I make the magnifier show only when I hover over the image? I have tried searching on this website and elsewhere, but I don't understand enough to make the solutions apply to my situation.
I copied this from W3School but they don't have a section where they explain that I can make it show when I hover over it.
I have modals on my sight and tried to replicate the hovering features of it but it doesn't seem to work.
Thanks!
Simply toggle opacity on hover:
// 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", 2);
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 3px solid #000;
border-radius: 40%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
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://images.static-bluray.com/movies/covers/174423_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Logan" style="width: 15px; height: 15px; margin: 0px;">
You can use javascript mouse event handlers. I modified your code snippet below.
What I did is,
.img-magnifier-glass {
...
display:none; // hide the magnifier by default
}
// Show the magnifier when hover the container
$('.img-magnifier-container').mouseover(function(){
$('.img-magnifier-glass').show();
});
// Hide the magnifier when leave the container
$('.img-magnifier-container').mouseout(function(){
$('.img-magnifier-glass').hide();
});
// 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", 2);
$('.img-magnifier-container').mouseover(function(){
$('.img-magnifier-glass').show();
});
$('.img-magnifier-container').mouseout(function(){
$('.img-magnifier-glass').hide();
});
.img-magnifier-glass {
position: absolute;
z-index: 3;
border: 3px solid #000;
border-radius: 40%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 100px;
height: 100px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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://images.static-bluray.com/movies/covers/174423_front.jpg" style=""></center><center><input type="checkbox" name="movieboxes" value="Logan" style="width: 15px; height: 15px; margin: 0px;">
so I was working on something on the side and I was trying to create a pop-up zoom window (div) using the JavaScript function on this page: https://www.w3schools.com/howto/howto_js_image_zoom.asp
I tried several things and looked at many questions on here but couldn't figure it out. I can paste the code here too if needed or more explanation on what I am trying to do. Any suggestions would be greatly appreciated!
Update:
http://jsfiddle.net/gb0xcuwz/23/
Just added a little css (which is self-explanatory)
(I hope this is what you wanted)
Old answer:
(keeping it in case someone wants it)
Okay so you provided this: http://jsfiddle.net/gb0xcuwz/5 in the comment.
I made some changes based on hit and trial method (it that a phrase?) and came up with this : http://jsfiddle.net/gb0xcuwz/16/
Here's a code snippet also :
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
//create lens:
lens = document.createElement("img");
lens.setAttribute("class", "img-zoom-lens");
//insert lens:
img.parentElement.insertBefore(lens, img);
//calculate the ratio between result DIV and lens:
cx = 300 / lens.offsetWidth;
cy = 300 / lens.offsetHeight;
//set background properties for the result DIV:
lens.style.backgroundImage = "url('" + img.src + "')";
lens.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);
//img.addEventListener("mouseenter", result);
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":
lens.style.backgroundPosition = "-" + (x * cx + lens.offsetWidth) + "px -" + (y * cy + lens.offsetHeight) + "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};
}
}
document.addEventListener("DOMContentLoaded", function(){
imageZoom("myimage", "myresult");
})
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 3px solid #A9A9A9;
width: 100px;
height: 100px;
}
<body>
<h1>Picture</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" src="https://i.imgur.com/50dDbmr.jpg" width="300" height="200">
</div>
</body>
I am having some problems involving full screening in video elements:
I have a code which tracks X and Y cords as mouse moves over video elem:
<video id="video" preload=auto autoplay controls>
<source src = "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv">
</video>
function getElementCSSSize(el) {
var cs = getComputedStyle(el);
var w = parseInt(cs.getPropertyValue("width"), 10);
var h = parseInt(cs.getPropertyValue("height"), 10);
return {width: w, height: h}
}
function mouseHandler(event) {
var size = getElementCSSSize(this);
var scaleX = this.videoWidth / size.width;
var scaleY = this.videoHeight / size.height;
var rect = this.getBoundingClientRect(); // absolute position of element
var x = ((event.clientX - rect.left) * scaleX + 0.5)|0; // round to integer
var y = ((event.clientY - rect.top ) * scaleY + 0.5)|0;
console.log("x " + x);
console.log("y " + y);
}
video.addEventListener("mousemove", mouseHandler);
Now, it works perfectly well when the video is viewed on normal mode;
if for example the video is 237x132,
then max left is 0x, and max top is 0y.
The problem occurs in full mode;
there are black borders on top and bottom as you can see:
https://i.imgsafe.org/452a426.jpg
now, this is true to every video I checked.
So in my script above, for some reason it counts the
black borders as part of the video; the x is ok, but
the y is not; the y starts at the top corner of
the video, upon the black border.
I need to be very precice here, and to completely ignore somehow the black borders - the y should start at the real pixel and end at the real pixel.
So, every type of movie that is played in full mode should is supposed to ignore the black borders.
Thank you so much for your time.
function mouseHandler(event) {
var rect = this.getBoundingClientRect();
if (!('height' in rect)) {//for IE8
rect.height = rect.bottom - rect.top;
rect.width = rect.right - rect.left;
}
var actualVideoHeight = rect.height;
var actualVideoWidth = rect.width;
var borderTop = 0;
var borderLeft = 0;
var onBottomBorder = false;
var onRightBorder = false;
var videoRatio = this.videoWidth / this.videoHeight;
var elementRatio = rect.width / rect.height;
if (videoRatio > elementRatio) {//video is wider than element
actualVideoHeight = this.videoHeight * rect.width / this.videoWidth;//actual height of video without borders
borderTop = (rect.height - actualVideoHeight) / 2;//calculate size of top border
if (event.clientY > actualVideoHeight + borderTop) {//check if mouse in on bottom border
onBottomBorder = true;
}
} else if (videoRatio < elementRatio) {//element is wider than video
actualVideoWidth = this.videoWidth * rect.height / this.videoHeight;//actual width of video without borders
borderLeft = (rect.width - actualVideoWidth) / 2;//calculate size of left border
if (event.clientX > Math.round(actualVideoWidth + borderLeft)) {//check if mouse in on right border
//onRightBorder = true;
}
}
var x = Math.round((event.clientX - rect.left - borderLeft) * (this.videoWidth / actualVideoWidth)); //scale and round to integer
var y = Math.round((event.clientY - rect.top - borderTop) * this.videoHeight / actualVideoHeight);
/*
x will be negative if mouse is on left border
y will be negative if mouse is on top border
onRightBorder will be true if mouse is on right border
onBottomBorder will be true if mouse is on bottom border
*/
if (y > 0 && x > 0 && !onRightBorder && !onBottomBorder) {
console.log('x ' + x);
console.log('y ' + y);
}
}