jQuery карусель с эффектом увеличительного стекла

jQuery карусель с эффектом увеличительного стекла

Коллеги всем привет.

jQuery плагин карусель продуктов для ваших веб-сайтов который совместимый с мобильными устройствами. Плагин имеет функцию навигацию по эскизам, масштабирование изображения (эффект увеличительного стекла) и многое другое.

 

Требования.

Подключить jQuery библиотеку.

<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>

Подключить сам плагин jquery.exzoom.js и стили jquery.exzoom.css.

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

 

HTML Код.

<!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 Код.

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

 

JavaScript Код.

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

 

Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.

 

ПОХОЖИЕ СТАТЬИ

JQuery плагин для увеличения изображения с увеличительным стеклом
JQuery плагин для увеличения изображения с увеличительным стеклом
WEB
JQuery - Галерея изображений с увеличением при наведении
JQuery - Галерея изображений с увеличением при наведении
WEB
Zoom blowup.js - Плагин увеличения изображения с увеличительным стеклом
Zoom blowup.js - Плагин увеличения изображения с увеличительным стеклом
WEB