JQuery - Галерея зображень зі збільшенням під час наведення

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

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

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

 

Вимоги.

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

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Підключити JavaScript самого плагіна та CSS стилів.

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

 

HTML Код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery With Zoom On Hover</title>
    <link rel="stylesheet" type="text/css" href="zoomy.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="zoomy.js"></script>
</head>
<body>
<div class="container">
    <div id='el'></div>
</div>
</body>
</html>

 

JavaScript Код.

<script>
    $(document).ready(function () {
        var urls = [
            'image1.png',
            'image2.png',
            'image3.png'
        ];
        $('#el').zoomy(urls);
    });
</script>

 

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

 

СХОЖІ СТАТТІ

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

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

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

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

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

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