JQuery плагін для збільшення зображення зі збільшувальним склом

  • Останнє оновлення: 3 Листопада 2023 р.
  • Перегляди: 141
  • Автор: Адмін
JQuery плагін для збільшення зображення зі збільшувальним склом

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

JQuery є простий плагін для створення ефекту збільшувального скла для збільшення зображень на вашому сайті.

 

Вимоги.

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

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

Підключити сам плагін jquery.magnify.js та стилі magnify.css.

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

 

HTML Код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/magnify.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.magnify.js"></script>
</head>
<body>
<img src="images/image_small.jpg" alt="" width="480" height="852" class="magnify-image" data-magnify-src="images/image_large.jpg">
</body>
</html>

 

JavaScript Код.

<script type="text/javascript">
    $(document).ready(function() {
        $('img').magnify();
    });
</script>

 

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

 

СХОЖІ СТАТТІ

YII2 defaultRoute - Як змінити контролер за замовчуванням у шаблоні

YII2 defaultRoute - Як змінити контролер за замовчуванням у шаблоні

Панель пошуку на чистому HTML/CSS

Панель пошуку на чистому HTML/CSS

HTML/CSS - Розгорнута анімація панелі пошуку

HTML/CSS - Розгорнута анімація панелі пошуку