jQuery plugin to enlarge image with magnifying glass
- Last updated: Nov 3, 2023
- Views: 334
- Author: Admin
Hello colleagues.
jQuery is a simple plugin to create a magnifying glass effect to enlarge images on your website.
Requirements.
Connect jquery library.
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
Connect the jquery.magnify.js plugin itself and the magnify.css styles.
<link rel="stylesheet" type="text/css" href="css/magnify.css">
<script type="text/javascript" src="js/jquery.magnify.js"></script>
HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/magnify.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.magnify.js"></script>
</head>
<body>
<img src="images/image_small.jpg" alt="" width="480" height="852" class="magnify-image" data-magnify-src="images/image_large.jpg">
</body>
</html>
JavaScript code.
<script type="text/javascript">
$(document).ready(function() {
$('img').magnify();
});
</script>
Thank you all, I hope my article was of some help to you.