How to Create Magnifying Glass to Zoom the Image

[Corleone]

In this tutorial, we are going to learn how to create Magnifying Glass to Zoom the Image. This simple project, created using magnify.js. It is easy and simple to use kind of jQuery plugin to have a magnifying glass effect in the image. You can use this work to magnify the image on your E-commerce websites project, to have the zoom effect to the image.

How to create

Copy and paste the link to your HEAD tag of your created page to load the jQuery plugin that we have.

1. <link
   
   href
   
   =
   
   "jquerysctipttop.css"
   
   rel
   
   =
   
   "stylesheet"
   
   type
   
   =
   
   "text/css"
   
   >
   
2. <link
   
   href
   
   =
   
   "dist/css/magnify.css"
   
   rel
   
   =
   
   "stylesheet"
   
   type
   
   =
   
   "text/css"
   
   >
   
3. <script
   
   src
   
   =
   
   "jquery-1.11.1.min.js"
   
   ></
   
   script
   
   >
   
4. <script
   
   src
   
   =
   
   "dist/js/jquery.magnify.js"
   
   ></
   
   script
   
   >
   
5. 
   
6. <style
   
   type
   
   =
   
   "text/css"
   
   >
   
7. body {
   
8. margin:auto;
   
9. width:500px;
   
10. }
    
11. .magnify {
    
12. width:480px;
    
13. height:852px;
    
14. margin:30px auto;
    
15. }
    
16. h1 {
    
17. color:blue;
    
18. margin-top:150px;
    
19. text-align:center;
    
20. }
    
21. </
    
    style
    
    >
    

Create a simple markup to insert the simple image into your web page.

1. <img
   
   src
   
   =
   
   "2.jpg"
   
   alt
   
   =
   
   ""
   
   width
   
   =
   
   "480"
   
   height
   
   =
   
   "852"
   
   class
   
   =
   
   "magnify-image"
   
   data-magnify-src
   
   =
   
   "1.jpg"
   
   >
   

After creating markup for the image, let’s code the simple script to load the magnify effect in the image to get the zoom effect.

1. <
   
   script>
   
2. $(
   
   document)
   
   .ready
   
   (
   
   function
   
   (
   
   )
   
   {
   
3. // Initiate magnification powers
   
4. $(
   
   'img'
   
   )
   
   .magnify
   
   (
   
   )
   
   ;
   
5. }
   
   )
   
   ;
   
6. </
   
   script>
   

Output

The cursor hover to the image to have a zoom effect.

That's it, kindly click the "Download Code" button below for the full source code. Enjoy coding.

If you are interested in programming, we have an example of programs that may help you even just in small ways.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download