• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Help with a "Image Magnifier Glass"

dgrrr

Coder
(Apologies if this is wrong forum!) I'm trying to help my grandpa add a magnifying glass for on his weebly webpage on postage stamps. We tried the two "apps" that weebly offered, but they are very problematic.

So I tried the one at
I know nothing about webpages, but I tried replacing their image URL with our own, and pasted the resulting block of code into an "embed code" box on weebly -- and it worked great!...

Except that we can only do one image per page. If I do this on more than one image, only the top one works.

Is there a way for a novice to adjust that code so the magnifier would work on multiple images on the same webpage?

(I'm assuming there's no way to add a magnifer globally, to every photo -- but one at a time would be enough.)

Thanks!
 

ivan.moony

King Coder
Hi,
try this:
[CODE lang="html" highlight="85-93, 100-102"]<!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;
}

.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 200px;
height: 200px;
}
</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="myimage1" src="img_girl.jpg" width="600" height="400">
</div>
<div class="img-magnifier-container">
<img id="myimage2" src="img_girl.jpg" width="600" height="400">
</div>
<div class="img-magnifier-container">
<img id="myimage3" src="img_girl.jpg" width="600" height="400">
</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("myimage1", 3);
magnify("myimage2", 3);
magnify("myimage3", 3);
</script>

</body>
</html>
[/CODE]

There are two hilighted areas in code, lines 85-93 and 100-102. To add images, append both areas, and don't forget to change src sections.

Let us know how it worked.
 

dgrrr

Coder
Nice - This does allow me to do multiple "images with magnifier" within one weebly "embed code" box, but...
I'm hoping to put each "image with magnifer" in it's own box... The second or third boxes with the SAME code dont' seem to work on the page...

(BTW, Is it possible to put parts of the code in "the header" so that all images on the page have the magnifier?)
 

ivan.moony

King Coder
Cool, the most of work is done.

What you miss is unique id in each <img id="...unique_id_string..." ...>. It can be any string, it just has to be unique for each bitmap. Remember to update magnify("...unique_id_string...", 3); for each image unique id.

It is possible to assign a magnifier in a javascript loop for each image in html, but I wouldn't recommend it because it could collide with different site themes (if they use bitmaps for navigation elements).
 

dgrrr

Coder
OMG, That was it, the image ID had to be different! Because I was copy / pasting the code, the image ID kept conflicting. (For the moment I'm just using the whole URL of the image as the image ID, so it will always be unique no matter how many times the code is copied and pasted -- probably not ideal, so far it's working) Thank you so much!

Couple quick questions about:

(1) I notice that in the published second image (the red & white stamp), the image in the circle is offset upward & leftward a tiny bit -- but it gets worse if I increase magnification. Any idea why? (This doesn't happen if I load the code block on my PC using MS Expression Web 4)

(2) I notice when I adjust "width: 200px; height: 200px;" the new glass size appears on the weebly edit page, but not on the published page... Any idea why?

(3) Was your comment about, "it could collide with different site themes" regarding putting parts of the code block into the head / header?
 
Last edited:

ivan.moony

King Coder
(1) no idea
(2) no idea, but this could pose a big problem. Maybe someone else could have an answer
(3) it is about getting all the html images in one command. If some of those images are navigation elements, the problem arise. But, when I think about it again, it should be possible to do the following:

[CODE lang="html" highlight="85-93"]<!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;
}

.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 200px;
height: 200px;
}
</style>
<script>
function magnify(img, 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 class="img-myimages" src="img_girl.jpg" width="600" height="400">
</div>
<div class="img-magnifier-container">
<img class="img-myimages" src="img_girl.jpg" width="600" height="400">
</div>
<div class="img-magnifier-container">
<img class="img-myimages" src="img_girl.jpg" width="600" height="400">
</div>

<p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p>

<script>
el = document.getElementsByClassName("img-myimages");
for(var i = 0; i < el.length; i++){
magnify(el, 3);
}
</script>
</body>
</html>
[/CODE]

I changed the javascript code a bit. Now, to add new images, we append new

HTML:
<div class="img-magnifier-container">
  <img class="img-myimages" src="img_girl.jpg" width="600" height="400">
</div>

after line 93. We just have to adjust bitmap file names without having to care about image id-s.

There might be a few other optimizations depending on weebly capabilities and appearance, but I wouldn't touch the whole think if it already works.
 

dgrrr

Coder
THANKS for being so responsive! How do you get compensated? Is it like Wikipedia / Star Fleet, and it's done for the love of the thing? Can I click somewhere to boost your XP or something?

As for (2) above -- I realized that "glass size" values in the LAST "embed code" box seem to determine the glass size for all the preceding "embed code" boxes on the page. (There must be several values in the code that only need appear once per page...)

Also noticed that if I make all the "glass size" and "magnif level" values consistent in each embed box, my "magnified image is shifted up/down/left/right" goes away.)
 
Last edited:

ivan.moony

King Coder
You're welcome :)

I'm currently doing some long boring homework research, and in a meanwhile, I'm throwing a look into browser when I get notified. Doesn't take much time, while I like to be useful. I just hope I'm not too pushy.

About (2), that's the thing about repeating CSS. I think the latest one overwrites all the previous ones. Same thing with Javascript functions. It can be reduced to just one appearance of these (probably in header section of the top html), but it takes some experience, especially when using template sites like Weebly. But if it already works for you, good, leave it as it is, no one will get angry.

You may also want to test the site on different browsers and platforms (visuals and behavior may differ between these), and take corresponding measures. That is a boring part of usual after-job in web designing, but the real deal requires it. Hopefully you won't have to change anything.

Good luck with finishing the site. Let us know of any new questions, or when the site is finished.
 

dgrrr

Coder
Thx! I really appreciate it.

That newer block of code you gave me is sweet; it allows me to put one box for "glass size" before a bunch of images, and a "magnify level" box after. (Dunno why after - probably because the older code lower down on the page is interfering? It may clear up when I clean up. I may elect to keep it simple as you suggested. )

BTW I realized that the "offset" (shifting to the left) issue of the zoomed portion was caused by having \DIFFERENT "glass size" values in different code boxes on the page.

Altho, there's one image (the first red stamp) that has a permanent "shifting" issue. Even when I set the magnification to "1" (no magnif), you can really see the shift to the left, across that whole image. But so far, only that image. Weird.
 

ivan.moony

King Coder
So, you have a few series of images there. You can try somehow code in <style>...</style> and the first <script>...</script> to put just once at the top of the whole page, before the series, and last <script>...</script> just once at the bottom, after the series. Then you fill just <div>...</div> images series in between. I don't know how, you have to figure out how to do it with Weebly. If this doesn't work out, we can figure it out some other way.
 
Last edited:

dgrrr

Coder
Turns out each page on the Weebly website editor has a nice neat little box under "Seo Settings" called "header code", and one for "footer code". I tried using these for the "glass size" and "magnif level" code blocks respectively, and it works! I'm glad I didn't have to go into the larger "Edit HTML/CSS Code" area under Themes.
 

ivan.moony

King Coder
It seems you are getting along with computers and software. Are you planning more serious engagement maybe? Admit it is a rush once when it all works. Like some kind of reinforcement technique.
 

dgrrr

Coder
Absolutely, it is gratifying -- but only if you have someone to guide you when stuck, like with the "IMG ID" issue above. Otherwise it can be a brick wall. So thank you! (You don't get rewards for providing a "solution" post here, do you?)
 

alisawatlington

New Coder
Hi,
try this:
[CODE lang="html" highlight="85-93, 100-102"]<!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;
}

.img-magnifier-glass {
position: absolute;
border: 3px solid #000;
border-radius: 50%;
cursor: none;
/*Set the size of the magnifier glass:*/
width: 200px;
height: 200px;
}
</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="myimage1" src="img_girl.jpg" width="600" height="400">
</div>
<div class="img-magnifier-container">
<img id="myimage2" src="img_girl.jpg" width="600" height="400">
</div>
<div class="img-magnifier-container">
<img id="myimage3" src="img_girl.jpg" width="600" height="400">
</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("myimage1", 3);
magnify("myimage2", 3);
magnify("myimage3", 3);
</script>

</body>
</html>
[/CODE]

There are two hilighted areas in code, lines 85-93 and 100-102. To add images, append both areas, and don't forget to change src sections.

Let us know how it worked.
Why will this not work right on mobile? https://ganzsecurity.com/subpage/1201/a-safer-environment-with-actionable-intelligence
 
Top