Angie.erni Posted July 2, 2020 Share Posted July 2, 2020 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 Link to comment
Angie.erni Posted July 2, 2020 Author Share Posted July 2, 2020 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> Link to comment
tuanphan Posted August 3, 2020 Share Posted August 3, 2020 can you share link to page where you inserted above code? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
tuanphan Posted May 16, 2021 Share Posted May 16, 2021 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> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kellybellyjones Posted May 20, 2021 Share Posted May 20, 2021 Hi TuanPhan, What if I want to add a magnify glass effect to my logo? Link to comment
tuanphan Posted May 21, 2021 Share Posted May 21, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
kellybellyjones Posted May 21, 2021 Share Posted May 21, 2021 https://magenta-buttercup-68ry.squarespace.com/ password: mauthenticate Link to comment
Beyondspace Posted July 10, 2021 Share Posted July 10, 2021 On 5/22/2021 at 2:43 AM, kellybellyjones said: https://magenta-buttercup-68ry.squarespace.com/ password: mauthenticate Have you got it sorted BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
waiki Posted October 20, 2021 Share Posted October 20, 2021 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!!! Link to comment
tuanphan Posted October 21, 2021 Share Posted October 21, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
waiki Posted October 25, 2021 Share Posted October 25, 2021 (edited) 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. Edited October 28, 2021 by waiki Link to comment
Ellelle Posted April 8 Share Posted April 8 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! Link to comment
tuanphan Posted April 11 Share Posted April 11 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. Ellelle 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Ellelle Posted April 11 Share Posted April 11 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. tuanphan 1 Link to comment
Squaredspace Posted July 8 Share Posted July 8 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. Link to comment
tuanphan Posted July 13 Share Posted July 13 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted July 22 Share Posted July 22 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. Link to comment
tuanphan Posted July 25 Share Posted July 25 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted July 25 Share Posted July 25 @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. Link to comment
Squaredspace Posted August 9 Share Posted August 9 (edited) 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. Edited August 9 by Squaredspace Link to comment
tuanphan Posted August 12 Share Posted August 12 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Squaredspace Posted August 12 Share Posted August 12 Hi @tuanphan, here you go: https://ranunculus-fish-fhr3.squarespace.com/completions/icdsleeves Password: 123abc Link to comment
Squaredspace Posted August 25 Share Posted August 25 Hi @tuanphan, wondering if you have any code suggestions for the above query? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment