JQuery - Галерея зображень зі збільшенням під час наведення
- Останнє оновлення: 3 Листопада 2023 р.
- Перегляди: 143
- Автор: Адмін
Колеги всім привіт.
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>
Дякую всім, я сподіваюся що вам моя стаття хоч чимось допомогла.