jQuery - Image gallery with zoom on hover

jQuery - Image gallery with zoom on hover

Hello colleagues.

jQuery plugin that dynamically renders an image gallery with thumbnail previews from an array of images. When you click on the thumbnail, the image is swapped. The plugin also has a feature that scales images on hover.

 

Requirements.

Include the jQuery library.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Include JavaScript of the plugin itself and CSS styles.

<link rel="stylesheet" type="text/css" href="zoomy.css">
<script src="zoomy.js"></script>

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery With Zoom On Hover</title>
    <link rel="stylesheet" type="text/css" href="zoomy.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="zoomy.js"></script>
</head>
<body>
<div class="container">
    <div id='el'></div>
</div>
</body>
</html>

 

JavaScript code.

<script>
    $(document).ready(function () {
        var urls = [
            'image1.png',
            'image2.png',
            'image3.png'
        ];
        $('#el').zoomy(urls);
    });
</script>

 

Thank you all, I hope my article was of some help to you.

 

SIMILAR ARTICLES

jQuery carousel with magnifying glass effect
jQuery carousel with magnifying glass effect
WEB
jQuery plugin to enlarge image with magnifying glass
jQuery plugin to enlarge image with magnifying glass
WEB
Zoom blowup.js - Zoom blowup plugin with magnifying glass
Zoom blowup.js - Zoom blowup plugin with magnifying glass
WEB