Hi Jerry, it’s exactly what I’m trying to achieve. Where can I download a Blocs document for it ?
Sorry, I’m new here. Is there anything I should know ?
I had to move my account to the Cayman Islands 
. For pocket change like $300, I do accept bitcoins though. 
1 Like
Thanks Jerry.
But more seriously, would you accept to share your magnifying module ?
Absolutely, I can’t wait to share! But hold onto your hat, understanding the nuts and bolts is key to making sense of it all. Which obviously is mandatory.
So here’s the deal .
Bring on your game and make that magnifying glass shine in Blocs from your shared file/code.
@PeteSharp threw all the tools in your toolbox no excuses anymore. When done share the file.
Now you’re the post-game champion, you’ve learned some of the ABCs of building a Low Code website element. In return, I will share my improved file with all the fancy bells and whistles and the possibility to add multiple magnifying images on the same page.
No need to break the bank with $300, a tip of your hat will do. 
All jokes aside, what Pete and Jerry are trying to do, is to encourage you (and everybody else) to try things and learn to use the pieces and advices they shared to solve your issue yourself. I still manage to resist everything related to learning JS though. Makes my brain hurt.
But I guess if Jerry manages to learn JS, I can too 
1 Like
Oh, lovely, thanks.
Well, be sure that if I’m here asking for assistance is that I tried, read between the cryptic lines and follow what I understood from advices but wasn’t able to achieve anything. It’s ok for me to understand the basic JS code I mentioned in my first post but I’m not yet familiar enough with the Blocs subtilities to make it work. So, again, help would be great. Choosing Blocs is precisely because my programming skills are not at their best.
Question :
- The html/js/css code works on my html editor but to work in a browser, it needs to be uploaded. If I try to implement it to Blocs, will it work from the preview or will I have to upload it ?
It’s really not that hard to do some basic stuff. It’s a matter of thinking logically. Sites such as Codepen are helping a lot. When you have a piece of JS just start analyzing what you see. It will click quickly. Wes Bos is doing my spoon-feeding. He’s an awesome teacher but there are countless free courses available online as well. (But probably not as good ) This thread is a perfect example. I did put together this magnifying glass over 2 years back when I had zero knowledge of JS. But hey, at least I was kind of understanding what I was doing 
. When I opened the file today I was able to tidy the code up, removed a few errors and improved it. I’m happy to share my limited knowledge and support. Do not expect me to build your website. If you want fancy stuff you’ll need to invest in understanding #LowCode. If you don’t want to invest in the fancy stuff you will have to keep it simple and stay with your #NoCode website.
2 Likes
Actually, I’m not coming here out of the blue. I’ve been trying to adapt the code to Blocs for 2 weeks now, so my asking here is an attempt to get help to take me out of a dead end.
Jerry, appart from telling about your Caiman bank account and your wonderful skills as a rookie developper, I’m afraid you’ve been so far of very little help.
But I’m sure that beyond your sarcastic approach (that for sure is to conceal some touching shyness) you’re genuinely eager to share your knowledge and to patronise me in a much more efficient way.
Would you then propose me directions, Blocs specificities that should be considered ?
I got most of @PeteSharp guidelines, that are great (thanked be he), but so far led me to strange magnifying glass position on screen offset from mouse position and no magnifying effect.
Hello @PeteSharp
I got most of your guidelines to work. Code is where it should be, trigger function is added to page footer. I attached class and ID where it should be according to the original html code.
Preview shows mouse slightly left of magnifying glass circle and no magnifying effect.
I’m sorry to disturb you with all this but I’m a little new to Blocs and not a professional developper so my abilities are quite below what they should be to get out of it by myself. Thanks in advance, I’d be grateful for this.
Where have you set the CSS for the .img-magnifier-glass?
Make sure you add it in the code editor. You will not need to apply the class to any Item.
Have you set the .img-magnifier-container position to relative? Without the magnifying effect will not be working.
To keep it all tidy you should move these into the code editor. However, it wouldn’t change its functioning. So the issue is most likely with the JS. Please share what you’ve done there.
Here is what I did put into the page footer.
I understand there is a problem with getting the cursor x position but after many attempts, I couldn’t get the circle follow exactly the mouse
<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;}
if (y < h / zoom) {element = document.getElementByClassName('img-magnifier-glass'); element.remove();}
/* Set the position of the magnifier glass: */
glass.style.left = ((x+img.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>
You got 2 errors in your Javascript:
Should be:
if (y < h / zoom) {element = document.getElementsByClassName('img-magnifier-glass')[0]; element.remove();}
- Your cursor and magnifying glass are not aligned. You will have to replace:
glass.style.left = ((x + img.x) - w) + "px";
glass.style.top = (y - h) + "px";
With:
glass.style.left = (x - w + img.offsetLeft) + "px";
glass.style.top = (y - h + img.offsetTop) + "px";
By fixing these 2 errors it works for me.
IMPORTANT
It only works in browser preview and NOT in Blocs preview.
@Jerry
Thanks to your help, I managed to have the magnifier work 
Could you explain the [0] ?
There was a line set inactive as a comment that I reactivated :
//if (y < h / zoom) {y = h / zoom;}
I tried to add a test to make the magnifier hidden when mouse isn’t hovering on the image but it failed
/* 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;}
if (y < h / zoom) {element = document.getElementsByClassName('img-magnifier-glass')[0]; element.remove();}
/* hide magnifier glass if mouse outside the image: */
if ( (x > img.width - (w / zoom)) && (x < w / zoom) && (y < h / zoom) && (y > img.height - (h / zoom))) {element = document.getElementsByClassName('img-magnifier-glass').hidden[0] = false;}
else
{element = document.getElementsByClassName('img-magnifier-glass').hidden[0] = true;}
Also I tried to make it avaible to any image. I guess I’ll have to use getElementsByClassName instead of getElementsByID but my attempts are unfruitful so far.
The [0] is an index that accesses the first item in an array.
In JavaScript, arrays are zero-indexed, meaning that the first item in an array is at position 0, the second item is at position 1, etc.
The function document.getElementsByClassName('img-magnifier-glass') returns an array-like object of all child elements which have all of the given class names. In your case, it will return all elements with the class img-magnifier-glass.
Even if there is only one element with this class in your document, getElementsByClassName will still return an array-like object containing that single element. So to access that one element, you need to use [0].
So, document.getElementsByClassName('img-magnifier-glass')[0] will get the first element with the class img-magnifier-glass. Then, element.remove() will remove this element from the document.
You would need to add a mouseenter and mouseleave event listener to how/ hide the magnifying glass only on hover. Before you create the magnifying class add:
img.addEventListener("mouseenter", function() {
And add below after your touch screen activation:
img.addEventListener("mouseleave", function() {
if(glass) {
glass.remove();
glass = null; }
});
If implemented correctly you will notice that your magnifying glass will start flickering on hover. just add the below to you magnifier class to fix:
.img-magnifier-glass {
pointer-events:none;
}