Jump to content

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


bartonlewis

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>

 

Link to comment
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:

Link to comment
Share on other sites

  • 1 year later...

Hello, want to use a ComboBox with 3 images as itens, if so try my code.

This is just the body element, the rest of the code stays the same.

 

    <body>
        <h1>Image Magnifier Glass</h1>
       
        <select id="CBFotos" autocomplete="off">
            <option value="foto1.jpg" selected>Foto 1</option>
            <option value="foto2.jpg">Foto 2</option>
            <option value="foto3.jpg">Foto 3</option>
        </select>
        
        <br><br><br>
       
        <div class="img-magnifier-container">
            <img id="foto" src="foto1.jpg" width="600" height="400">
        </div>
        
        <script>
            document.getElementById("CBFotos").onchange = function()
                                                                                                        {
                                                                                                            var comboBoxFotos = document.getElementById("CBFotos");
                                                                                                            document.getElementById("foto").attributes["src"].value = comboBoxFotos.options[comboBoxFotos.selectedIndex].value;
                                                                                                            var magnifyElement = document.getElementsByClassName("img-magnifier-glass")[0];
                                                                                                            magnifyElement.parentNode.removeChild(magnifyElement);
                                                                                                            magnify("foto", 3);
                                                                                                        };
           
            magnify("foto", 3);
        </script>
    </body>

Link to comment
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
×
×
  • Create New...