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.

Hi @tuanphan 

I'm also looking to create a magnifying glass when an image is moused over, just within one section of a page. Something similar to this:  https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp or this: https://www.marieneurath.org/

I tried your code above which didn't seem to do anything.

Is this possible? I'm using version 7.1. 

Thank you!

On 4/8/2024 at 8:19 PM, Ellelle said:

Hi @tuanphan 

I'm also looking to create a magnifying glass when an image is moused over, just within one section of a page. Something similar to this:  https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp or this: https://www.marieneurath.org/

I tried your code above which didn't seem to do anything.

Is this possible? I'm using version 7.1. 

Thank you!

You can use Image Zoom Plugin (affiliate link) or this link (non-affiliate link) to achieve this.

Or you can message me with your site url, I can help you achieve this.

1 hour ago, tuanphan said:

You can use Image Zoom Plugin (affiliate link) or this link (non-affiliate link) to achieve this.

Or you can message me with your site url, I can help you achieve this.

Thank you so much! I will try this  plug in first.

Hi @tuanphan,

Is it possible to create a magnifying glass effect for images using only CSS code and no script? Am currently on a Personal Plan with no plans to upgrade to a higher level plan yet. 

On 7/9/2024 at 5:05 AM, Squaredspace said:

Hi @tuanphan,

Is it possible to create a magnifying glass effect for images using only CSS code and no script? Am currently on a Personal Plan with no plans to upgrade to a higher level plan yet. 

If you have script code, you can add it via Markdown Block. It won't work in all cases, but worth to give a try

Thanks @tuanphan, I'd like to give it a shot, specifically on this page for my website:

https://ranunculus-fish-fhr3.squarespace.com/completions/icdsleeves

Password: 123abc

There are 3 static images and I want to see if it is possible to use the magnifying glass effect when hovering over the images. They are currently set with the lightbox effect but figure it would nice to have a magnifying glass option as well (if the code requires the lightbox effect to be turned off, I'm okay with that).

Is there a code that could be used for this purpose? If this works, then potentially the code can be used for other pages, with some tweaking here and there.

On 7/22/2024 at 10:24 PM, Squaredspace said:

Thanks @tuanphan, I'd like to give it a shot, specifically on this page for my website:

https://ranunculus-fish-fhr3.squarespace.com/completions/icdsleeves

Password: 123abc

There are 3 static images and I want to see if it is possible to use the magnifying glass effect when hovering over the images. They are currently set with the lightbox effect but figure it would nice to have a magnifying glass option as well (if the code requires the lightbox effect to be turned off, I'm okay with that).

Is there a code that could be used for this purpose? If this works, then potentially the code can be used for other pages, with some tweaking here and there.

Zoom effect on current images only or on current images + images in lightbox?

@tuanphan, when you put it that way, I guess both on current images + images in lightbox 😄. But if both aren't feasible, then I'll be happy with either option.

Hi @tuanphan,

I finally managed to convince the company to upgrade to a business plan. So now that I can add scripts, I've added the magnifying glass script you provided above. It works pretty well for the 3 current images (without lightbox). Is there a way to adjust the code so that the magnifying glass is automatically "turn off" and not showing when the mouse cursor is moved away from the image viewing area, and "turned on" and showing when the cursor is moved back in the viewing area?

Also, I currently have 3 separate scripts for the 3 images. Could I use just one script and put the 3 image links in it? I tried that and it didn't work. 

On 8/9/2024 at 12:25 PM, Squaredspace said:

Hi @tuanphan,

I finally managed to convince the company to upgrade to a business plan. So now that I can add scripts, I've added the magnifying glass script you provided above. It works pretty well for the 3 current images (without lightbox). Is there a way to adjust the code so that the magnifying glass is automatically "turn off" and not showing when the mouse cursor is moved away from the image viewing area, and "turned on" and showing when the cursor is moved back in the viewing area?

Also, I currently have 3 separate scripts for the 3 images. Could I use just one script and put the 3 image links in it? I tried that and it didn't work. 

Can you share link to page where you added it? I will check again

Hi @tuanphan, here you go: https://ranunculus-fish-fhr3.squarespace.com/completions/icdsleeves

Password: 123abc

Hi @tuanphan, wondering if you have any code suggestions for the above query?