Jump to content
Sign in to follow this  
bartonlewis

"How TO - Image Magnifier Glass" - possible for multiple images?

Recommended Posts

I found w3schools' tutorial for "Image Magnifier Glass" and want to use it on my website for multiple images.  But I can only get it to work for one, presumably because it uses document.getElementById(imgID) in the js; I tried changing this to document.getElementsByClassName(names) but that didn't work.  I'm not an experienced javascript user so don't know how to resolve, but assume something different needs to go where (names) is at the least.  Can anyone help?  The only thing I changed in the code is to add a little padding to the img-magnifier-container class.  Thank you.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.img-magnifier-container {
  position:relative;
    padding: 20px;
}
.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  /*Set the size of the magnifier glass:*/
  width: 100px;
  height: 100px;
}
</style>
<script>
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  /*create magnifier glass:*/
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  /*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};
  }
}
</script>
</head>
<body>

<h1>Image Magnifier Glass</h1>

<p>Mouse over the image:</p>

<div class="img-magnifier-container">
  <img id="myimage" src="http://bartonlewisfilm.com/img_157-229.jpg" width="33%" height="33%">
</div>

<div class="img-magnifier-container">
  <img id="myimage" src="http://bartonlewisfilm.com/img_287-145.jpg" width="33%" height="33%">
</div>
    
<p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p>

<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("myimage", 3);
</script>

</body>
</html>

 

Share this post


Link to post
Share on other sites

To make it work for multiple images, instead of passing the ID, pass the image itself to the function.

The function would start like this:

function magnify(element, zoom) {
  var img, glass, w, h, bw;
  img = element;
  // ...

Then get a list of images and call the function. It's best if you wait for the images to load before enabling the magnifying glass. I came across a bug where the magnifier wasn't working properly because the image height was zero since the image hadn't loaded yet. Putting all of that together would look like this:

<script>
var images = document.querySelectorAll(".img-magnifier-container img");
var image;
for(var i = 0; i < images.length; i++) {
  image = images[i];
  if(image.complete) {
    magnify(image, 3);
  } else {
    image.addEventListener("load", enableMagnify, false);
  }
}
function enableMagnify(e) {
  magnify(e.currentTarget, 3);
}
</script>

Here's some reading material on some of the things I've used, I suggest you learn about them:

Share this post


Link to post
Share on other sites

I'm afraid this is all a bit above my pay grade, but I'll read the articles you send and see if I can figure it out.  Thank you.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×