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