We recently worked on a project where a container field contained a detailed image and thought it would be useful if the user could zoom in on some areas.
With a FileMaker web viewer you can make use of JavaScript to add funtionality in FileMaker that doesn’t exist. With a quick Google Search we found a library that allowed magnification of images. We then created a test HTML document that magnified an image. That text was copied into a global template field and we replaced the image URLs with slugs. We then created a calc field in FileMaker to replace the slugs with container data encoded as Base64. In the video below, you can see how we went thru the process of adding the calculation.
5/2/2023 – Sample file link has has been updated
7/6/2021 – Sample file has been updated so that the image is scaled to fit the webviewer size in the calc field.
Thank you for this fantastic Image Magnifier. I have a question: is it possible to have a round magnifier instead of a square one?
Thanks for the kind words! Yes, you can make the magnifier round. I downloaded the magnifier.css code, self-hosted it then added the border-radius to the CSS and now it’s a round magnifier.
.magnifier-lens {position: absolute;
border: solid 1px #ccc;
z-index: 1000;
border-radius: 50%;
top: 0;
left: 0;
overflow: hidden
}
It worked great once I uploaded the .css file with border-radius string to Google Drive, thanks again.
Hello, could you please provide an updated link for the sample file? The current one appears to be broken.
Hi Leon, Thanks for the comment. The file link has been updated! We recently migrated our site and missed updating that one.