Image Magnifier Glass / Image Zoom

Site URL: https://dinosaur-tiger-652m.squarespace.com/potenziale

Hi,

I want to create a zoomable map (Image). Something like that: https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp But I don't know where to put the code exactly. Thanks a lot for your help!

Angela

Hi tuanphan 

THX a lot for your help! I can see the picture after putting the code in a code block but cant see any magnifier glass effect....I'm working with the template pedro... Any ideas why?🙂

Angela

4 hours ago, tuanphan said:

<div class="img-magnifier-container"> <img id="myimage" src="https://cdn.pixabay.com/photo/2020/01/09/03/41/cow-4751775__340.jpg" width="600" height="400"> </div> <script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script> <style> .img-magnifier-container { position:relative; } .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>

can you share link to page where you inserted above code?

Sorry, the above code has incorrect order. use this new code

Add a Code Block >>> Add all code

<div class="img-magnifier-container">
  <img id="myimage" src="https://cdn.pixabay.com/photo/2020/01/09/03/41/cow-4751775__340.jpg" width="600" height="400">
</div>

<style>
.img-magnifier-container {
  position:relative;
}

.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>
<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("myimage", 3);
</script>

Hi TuanPhan,

What if I want to add a magnify glass effect to my logo?

22 hours ago, kellybellyjones said:

Hi TuanPhan,

What if I want to add a magnify glass effect to my logo?

Can you share link to your site?

https://magenta-buttercup-68ry.squarespace.com/

password: mauthenticate

On 5/22/2021 at 2:43 AM, kellybellyjones said:

https://magenta-buttercup-68ry.squarespace.com/

password: mauthenticate

Have you got it sorted

Hi @tuanphan I tested the code and it works great. Except on mobile preview the image is squeezed together. Can you tell me how I can fix this, for an image with a 1920 x 1080 size. 

Thank you in advance!!!

On 10/20/2021 at 6:54 PM, waiki said:

Hi @tuanphan I tested the code and it works great. Except on mobile preview the image is squeezed together. Can you tell me how I can fix this, for an image with a 1920 x 1080 size. 

 

Thank you in advance!!!

Can you share link to your site?

Hi @tuanphan,

here is the link: https://harp-recorder-ce6j.squarespace.com/lage

Password: ProjektNeobel

I changed width="100%" height="auto". Now when you use your phone, the image has the right size, but the magnifier glass effect doesn't work anymore. And with the Squarespace mobile preview the magnifier glass effect is offset.