<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Галерея изображений с Venobox | BootstrapTema</title>
<!-- Подключаем Venobox -->
<link href="https://cdn.jsdelivr.net/npm/venobox@2.1.8/dist/venobox.min.css" rel="stylesheet" />
<!-- Подключаем иконки -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: #333;
line-height: 1.6;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
header {
background: linear-gradient(to right, #4b6cb7, #182848);
color: white;
text-align: center;
padding: 30px 20px;
}
h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.description {
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.9;
}
.gallery-controls {
padding: 20px;
background: #f8f9fa;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.filter-btn {
background: #4b6cb7;
color: white;
border: none;
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
}
.filter-btn:hover {
background: #182848;
transform: translateY(-2px);
}
.filter-btn.active {
background: #182848;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 30px;
}
.gallery-item {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}
.gallery-link {
display: block;
width: 100%;
height: 220px;
overflow: hidden;
}
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.gallery-item:hover .gallery-img {
transform: scale(1.05);
}
.image-info {
padding: 15px;
background: white;
}
.image-title {
font-weight: 600;
margin-bottom: 5px;
color: #2c3e50;
}
.image-desc {
font-size: 0.9rem;
color: #7f8c8d;
}
.image-number {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
footer {
text-align: center;
padding: 20px;
background: #2c3e50;
color: white;
}
@media (max-width: 768px) {
.gallery {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
padding: 15px;
gap: 15px;
}
h1 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.gallery {
grid-template-columns: 1fr;
}
.gallery-controls {
flex-direction: column;
align-items: center;
}
.filter-btn {
width: 80%;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1><i class="fas fa-images"></i> Галерея изображений</h1>
<p class="description">Наслаждайтесь красивыми изображениями в высоком разрешении. Нажмите на любое изображение для просмотра в полноэкранном режиме.</p>
</header>
<div class="gallery-controls">
<button class="filter-btn active" data-filter="all">Все</button>
<button class="filter-btn" data-filter="nature">Природа</button>
<button class="filter-btn" data-filter="urban">Город</button>
<button class="filter-btn" data-filter="abstract">Абстрактное</button>
</div>
<div class="gallery" id="gallery">
<!-- Галерея будет сгенерирована автоматически -->
</div>
<footer>
<p>© 2023 Галерея изображений с использованием Venobox</p>
</footer>
</div>
<!-- Подключаем jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/venobox@2.1.8/dist/venobox.min.js"></script>
<script>
// Данные для галереи
const galleryData = [
{ id: 1, category: "nature", title: "Горный пейзаж", desc: "Величественные горы на рассвете" },
{ id: 2, category: "urban", title: "Городские огни", desc: "Ночной город с высоты птичьего полета" },
{ id: 3, category: "abstract", title: "Абстракция", desc: "Яркие цвета и необычные формы" },
{ id: 4, category: "nature", title: "Лесная тропа", desc: "Тихая тропа среди высоких деревьев" },
{ id: 5, category: "urban", title: "Современная архитектура", desc: "Инновационные здания мегаполиса" },
{ id: 6, category: "abstract", title: "Космический узор", desc: "Фантастические узоры, напоминающие космос" },
{ id: 7, category: "nature", title: "Морской берег", desc: "Кристально чистая вода и белый песок" },
{ id: 8, category: "urban", title: "Уличная жизнь", desc: "Энергия и ритм городских улиц" },
{ id: 9, category: "abstract", title: "Жидкий мрамор", desc: "Уникальные разводы и переходы цветов" },
{ id: 10, category: "nature", title: "Водопад", desc: "Мощь и красота падающей воды" },
{ id: 11, category: "urban", title: "Исторический центр", desc: "Архитектурные памятники прошлых веков" },
{ id: 12, category: "abstract", title: "Геометрические формы", desc: "Современное искусство геометрии" }
];
// Функция для создания галереи
function createGallery() {
const gallery = document.getElementById('gallery');
gallery.innerHTML = '';
galleryData.forEach(item => {
const imageUrl = `https://bootstraptema.ru/images/demo/1920x1080/demo${item.id}.jpg`;
const galleryItem = document.createElement('div');
galleryItem.className = `gallery-item ${item.category}`;
const link = document.createElement('a');
link.className = 'venobox';
link.href = imageUrl;
link.setAttribute('data-gall', 'gallery');
link.setAttribute('data-title', `${item.title} - ${item.desc}`);
const img = document.createElement('img');
img.className = 'gallery-img';
img.src = imageUrl;
img.alt = item.title;
img.loading = "lazy";
const imageNumber = document.createElement('div');
imageNumber.className = 'image-number';
imageNumber.textContent = item.id;
const imageInfo = document.createElement('div');
imageInfo.className = 'image-info';
const title = document.createElement('div');
title.className = 'image-title';
title.textContent = item.title;
const desc = document.createElement('div');
desc.className = 'image-desc';
desc.textContent = item.desc;
imageInfo.appendChild(title);
imageInfo.appendChild(desc);
link.appendChild(img);
galleryItem.appendChild(link);
galleryItem.appendChild(imageNumber);
galleryItem.appendChild(imageInfo);
gallery.appendChild(galleryItem);
});
// Инициализируем Venobox
initializeVenobox();
// Добавляем обработчики для фильтров
setupFilterHandlers();
}
// Функция для инициализации Venobox
function initializeVenobox() {
$('.venobox').venobox({
share: ['facebook', 'twitter', 'download'],
spinner: 'plane',
titleattr: 'data-title',
numeration: true,
infinigall: true,
overlayColor: 'rgba(0,0,0,0.9)',
framewidth: '90%',
frameheight: '90%',
closeBackground: '#ff6b6b',
closeColor: '#fff'
});
}
// Настройка обработчиков для фильтров
function setupFilterHandlers() {
const filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// Убираем активный класс у всех кнопок
filterButtons.forEach(btn => btn.classList.remove('active'));
// Добавляем активный класс к текущей кнопке
button.classList.add('active');
const filter = button.getAttribute('data-filter');
const galleryItems = document.querySelectorAll('.gallery-item');
galleryItems.forEach(item => {
if (filter === 'all' || item.classList.contains(filter)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
}
// Создаем галерею после загрузки DOM
$(document).ready(createGallery);
</script>
</body>
</html>