Skip to main content

Image Magnifier Plugin in JavaScript Free Source Code

Language

This is a JavaScript source code that serves as a JS Plug-in for magnifying images. The source code makes your web application or website content images magnifiable. The plug-in is written in pure JavaScript Language. Using this plug-in you can just import the js source code in your project and write a short script/code to configure and initialize the plug-in feature.

Plug-in Configurations

Code Default Description
Zoom int|2 Integer value for zoom scale.
Stroke int|3 Integer value for magnifier element border.
StrokeColor hex|'#aaaaaa' Hexadecimal color value for the magnifier element border.
Size int|150 Magnifier Canvas Size.
Style Style.circle Magnifier Canvas Shape style. Style.square | Style.circle

Example Usage

HTML
  1. <!-- Include the Magnifier plugin -->
  2. <script src="magnifier.js"></script>
  3.  
  4. <!-- Display Image -->
  5. <img id="img1" src="images/image1.jpg" style="width: 480px;height: 680px;" />
JavaScipt
  1. var img1 = document.getElementById("img1");
  2. var magnifier1 = new Magnifier( img1 );
  3.  
  4. magnifier1.Size=200;
  5. magnifier1.Zoom=2
  6. magnifier1.StrokeColor='#111111'

The plugin is provided on this site and can be downloaded for free. The download button is located below this article. The provided zip file is a simple web application with the magnifier plugin.

Run the provided working source code.

  • Download and Extract the provided source code.
  • Locate the index.html file.
  • Browse the index.html file in a browser.

DEMO VIDEO

That's it! I hope this will help you and you'll find this useful for your future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment