Zoom blowup.js - Плагін збільшення зображення зі збільшувальним склом

Zoom blowup.js - Плагін збільшення зображення зі збільшувальним склом

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

У сьогоднішній статті ми я вам покажу плагін, який масштабує зображення за допомогою збільшувального скла jQuery, і дозволяє вам збільшувати вказане зображення за допомогою лінзи, що настроюється. Плагін дуже легко використовувати.

 

Вимоги.

Підключити бібліотеку JQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Підключити плагін blowup.min.js

<script src="blowup.min.js"></script>

 

HTML Код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blowup</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="blowup.min.js"></script>
</head>
<body>
<img src="zoom_image.png">
</body>
</html>

 

CSS Код.

.demo-img {
    width: 400px;
    height: 300px;
}

 

JavaScript Код.

<script type="text/javascript">
    $(document).ready(function(){
        $("img").blowup({
            round      :true,
            width      : 200,
            height     : 200,
            background :"#FFF",
            shadow     :"0 8px 17px 0 rgba(0, 0, 0, 0.2)",
            border     :"6px solid #FFF",
            cursor     :true,
            zIndex     : 999999,
            scale      : 1,
            customClasses :"",
        });
    });
</script>

 

Дякую всім, я сподіваюся що вам моя стаття хоч чимось допомогла.

 

СХОЖІ СТАТТІ

jQuery карусель з ефектом збільшувального скла
jQuery карусель з ефектом збільшувального скла
WEB
JQuery плагін для збільшення зображення зі збільшувальним склом
JQuery плагін для збільшення зображення зі збільшувальним склом
WEB
JQuery - Галерея зображень зі збільшенням під час наведення
JQuery - Галерея зображень зі збільшенням під час наведення
WEB