Jump to content
Sign in to follow this  

"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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
* {box-sizing: border-box;}
.img-magnifier-container {
    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;
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*/
    /*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};

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

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



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:

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

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

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.


        <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>
        <div class="img-magnifier-container">
            <img id="foto" src="foto1.jpg" width="600" height="400">
            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];
                                                                                                            magnify("foto", 3);
            magnify("foto", 3);

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...