How To Make Image Magnifier Using HTML, CSS, and JavaScript

Blogger Leb
November 08, 2020
0
How To Make Image Magnifier Using HTML, CSS, and JavaScript

Image Magnifier is a great example of a JavaScript programming language. Image Magnifier is basically for use on any e-commerce site. It is also used in other sites. JavaScript programming language is used to create this image zoom effect. Also, some amount of CSS code has been used to create the design and some amount of HTML code has been used to create the structure. In this article, I will show you how you can create an image magnifier using only their JavaScript programming language.


Some special information about this image magnifier

📌 The original JavaScript programming code is used to create this image magnifier. Also, some HTML code and some CSS code have been used.
📌 There is a picture of this magnifier. When you move the mouse over that image, a round magnifier will follow your mouse cursor. Places that zoom in will be hidden. 
📌 I used an HD image in the background in this case. You can use the picture of your choice if you want.
 ðŸ“Œ The magnifier's lens has a small red border around it. When you move the mouse over the image, the magnifier will be hidden. Again, when you move the mouse over the image, you can see the magnetic.





 


Hopefully from the video above you can fully understand how to make and work this image magnifier. If you want to try this code yourself, you can. That is why I have given the source code below. 

All in all, this is an example of a remarkable image magnifier. Hope you like this magnifier completely. For your convenience, these JavaScript, HTML, and CSS codes have been written as simply and simply as possible. So that programmers of all levels can understand.

How To Make This Image Magnifier

 To create this image magnifier, you must first create an HTML file. To create an HTML file, open Notepad, and copy and paste the structure below. Then add dot HTML and save. Then paste the HTML code in the structure shown above where the add HTML code is written. Paste the CSS code in the place where the ad CSS code is written. Paste the JavaScript code in the area where the Ad JavaScript code is written. Below I have given all the code. You copy those codes and paste them into the structure above.



HTML TAGS (<body> Add Code </body>)

The codes shown below are HTML codes. It is mainly used to make your magnifier. A very small amount of HTML code has been used here. You copy the HTML code below and paste it into the project above where the ad HTML code is written.


 <img height="750" src="http://farm6.staticflickr.com/5474/9765019294_91f9710e92_b_d.jpg"/>
  <div id="zoom"></div>


CSS CODE (<head><style> Add code</style></head>)

The following codes are CSS codes. Which was originally used to make this magnifier. These CSS codes have been used to design this magnifier. You copy the codes shown below and then paste them in the upper structure where the ad CSS code is written. Also, if you want to create a separate CSS file and paste these codes into it, you can. Of course in that case you should not forget to attach your CSS file to the HTML file.


body {
  overflow: hidden;
  margin: 0;
  
  background: #222;
}
/*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/
body.active img {
  -webkit-filter: grayscale(1);
}

img {
  display: block;
  margin: 20px auto;
  /*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/
  border: 1px solid rgba(255,255,255,0.2);
  -webkit-transition: -webkit-filter 500ms;
}

#zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  /*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/
  margin: -125px 0 0 -125px;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px rgba(255,0,0,0.5),
    5px 5px 10px 5px rgba(0,0,0,0.2);
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: scale(0);
  -webkit-transition: opacity 500ms, -webkit-transform 500ms;
  pointer-events: none;
}
/*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/
.active #zoom {
  opacity: 1;
  -webkit-transform: scale(1);
}


ADD JavaScript CODE (<body><script> Add code</script></body>)

The code shown below is the JavaScript programming code which is basically the most basic element for making this magnifier. You copy the following JavaScript code. Then paste the ad java script written here in the upper structure. Then you save the file. If you want to add another technology, you can paste these JavaScript codes inside the body tags into the script tags.


/*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/

(function() {
  var zoom = document.getElementById( 'zoom' ),
      Zw = zoom.offsetWidth,
      Zh = zoom.offsetHeight,
      img = document.querySelector( 'img' );
      
  
  var timeout, ratio, Ix, Iy;

  function activate () {
    document.body.classList.add( 'active' );
  }
  /*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/
  function deactivate() {
    document.body.classList.remove( 'active' );
  }
  
  function updateMagnifier( x, y ) {
    zoom.style.top = ( y ) + 'px';
    zoom.style.left = ( x ) + 'px';
    zoom.style.backgroundPosition = (( Ix - x ) * ratio + Zw / 2 ) + 'px ' + (( Iy - y ) * ratio + Zh / 2 ) + 'px';
  }
  /*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/
  function onLoad () {
    ratio = img.naturalWidth / img.width;
    zoom.style.backgroundImage = 'url(' + img.src + ')';
    Ix = img.offsetLeft;
    Iy = img.offsetTop;
  }
 /*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/ 
  function onMousemove( e ) {
    clearTimeout( timeout );
    activate();
    updateMagnifier( e.x, e.y );
    timeout = setTimeout( deactivate, 2500 );
  }
  
  function onMouseleave () {
    deactivate();
  }
/*border: none;color: white;padding: 16px 32ptext-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;transition-duration: 0.4s;cursor: pointer;*/
  img.addEventListener( 'load', onLoad );
  img.addEventListener( 'mousemove', onMousemove );
  img.addEventListener( 'mouseleave', onMouseleave );

})();


 You can easily create this image magnifier by following HTML, CSS, and JavaScript programming languages. If you like the article, be sure to leave a comment, and don't forget to share it on social media.


❤Sharing is caring❤



Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top