(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.
www.w3schools.com
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!... 
