Help with implementing the w3school's "Image Magnifier Glass"

[RonM]

I'm trying to add a magnifying glass to a weebly webpage on postage stamps. I tried the two "apps" that weebly offered, but they are very problematic.

Then I saw this one:
https://www.w3schools.com/howto/howto_js_image_magnifier_glass.asp

I know nothing about html / css / java, but I took the block of code and tried replacing their image URL with our own, and pasted the resulting block into an "embed code" box on weebly -- and it worked great! Except...

As is, 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!

[Bernadette3]

Can you post a direct link to the page with the code that works? We have some users on here that are familiar with custom code and may be able to assist. 

[RonM]

Here's the page with the code working in the first image. Right now the other images don't have the code. 

https://www.stampsrhistory.com/exhibit-20.html

Thank you!

[Bernadette3]

It looks like it is working for all of the images. Did you figure out a work around? 

[RonM]

Yes -- found some great help at codeforum.org. Using the W3 code, my problem was the "Img ID" value.  I didn't realize the "Img ID" of one "embed code" box can't be used again in the other boxes -- each box has to have a unique Img ID, just as they need a unique Image URL.  

So just to keep things "simple" I used the full image URL as the image ID. Which meant the URL now appeared in 3 places per box.  So whenever I copied the code from one box, and pasted it into a new box, I then did a search and replace of the old image URL with the new image URL  (x3).   (And then updated the width & length).  I.e.:

<div class="img-magnifier-container">
<img id="MYIMAGEURL.JPG" src="MYIMAGEURL.JPG" width="920" height="1200">
</div>

<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
magnify("MYIMAGEURL.JPG", 3);
</script>

----

Next I discovered that if I used different Image Glass values in different "embed code" boxes, it caused the image within the "image glass" circle of some boxes to be "shifted" up and to the left, i.e. "offset".  Using the same 'px' values in each box fixed this. 

---

But THEN, the person helping me at "codeforum.org" modified the original code (as an alternative to the above), so that it now used an "img class" variable instead of "img id", which allowed me to put the "magnification" part of the code in it's own "embed code" box. So I could adjust all images at once. 

What I have now is a TOP "embed code box" (with glass size and other settings), a BOTTOM box with magnification setting (has to be at end, for some reason), and about 3 lines of code for each box inserting each image. 

See this page for reference:

https://codeforum.org/threads/help-with-a-image-magnifier-glass.1081/