ViewImage.js - Zoom image

ViewImage.js - Zoom image

Hello colleagues.

A simple and short javascript plugin that scales images and lightbox galleries that provides zoom for any image.

 

Requirements.

Include Jquery and Bootstrap libraries.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/flatly/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

Connect the ViewImage plugin.

<script type="text/javascript" src="view-image.min.js"></script>

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ViewImage</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/flatly/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
</head>
<body>
<div class="container">
    <h1>ViewImage</h1>
    <hr />
    <div id="demo" class="row" view-image>
        <div class="col">
            <img src="images/1.png" alt="" class="img-fluid">
        </div>
        <div class="col">
            <img src="images/2.png" alt="" class="img-fluid">
        </div>
        <div class="col">
            <img src="images/3.png" alt="" class="img-fluid">
        </div>
    </div>
</div>
<script type="text/javascript" src="view-image.min.js"></script>
</body>
</html>

 

CSS code.

.container{
    margin:100px auto;
}

.container h1{
    text-align: center;
}

 

JavaScript code.

<script>
    window.ViewImage && ViewImage.init('#demo img');
</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
jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB