jQuery carousel with magnifying glass effect

jQuery carousel with magnifying glass effect

Hello colleagues.

jQuery product carousel plugin for your websites which is compatible with mobile devices. The plugin features thumbnail navigation, image zoom (magnifying glass effect) and more.

 

Requirements.

Include jQuery library.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Include jquery.exzoom.js plugin itself and jquery.exzoom.css styles.

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

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Carousel</title>
    <link rel="stylesheet" type="text/css" href="css/jquery.exzoom.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
    <script src="js/jquery.exzoom.js"></script>
</head>
<body>
<div class="container">
    <div class="exzoom hidden" id="exzoom">
        <div class="exzoom_img_box">
            <ul class='exzoom_img_ul'>
                <li><img src="image1.png"/></li>
                <li><img src="image2.png"/></li>
                <li><img src="image3.png"/></li>
                <li><img src="image4.png"/></li>
                <li><img src="image5.png"/></li>
                <li><img src="image6.png"/></li>
                <li><img src="image7.png"/></li>
                <li><img src="image8.png"/></li>
            </ul>
        </div>
        <div class="exzoom_nav"></div>
        <p class="exzoom_btn">
            <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
            <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>
        </p>
    </div>
</div>
</body>
</html>

 

CSS code.

#exzoom {
    width: 400px;
    /*height: 400px;*/
}

 

JavaScript code.

<script type="text/javascript">
    $(document).ready(function () {
        $('.container').imagesLoaded(function () {
            $("#exzoom").exzoom({
                autoPlay: false,
            });
            $("#exzoom").removeClass('hidden')
        });
    });
</script>

 

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

 

SIMILAR ARTICLES

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
Zoom blowup.js - Zoom blowup plugin with magnifying glass
Zoom blowup.js - Zoom blowup plugin with magnifying glass
WEB