jQuery plugin to enlarge image with magnifying glass

  • Last updated: Nov 3, 2023
  • Views: 334
  • Author: Admin
jQuery plugin to enlarge image with magnifying glass

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.

 

SIMILAR ARTICLES

YII2 defaultRoute - How to change default controller in template

YII2 defaultRoute - How to change default controller in template

Pure HTML/CSS search bar

Pure HTML/CSS search bar

HTML/CSS - Expandable Searchbar Animation

HTML/CSS - Expandable Searchbar Animation