VenoBox / Улучшение / Плагины Bootstrap

Версия: v2.1.8

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4, 5, CSS Grid, Tailwind CSS, Materialize CSS, Skeleton

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, PHP

Язык: Английский

Вес файла: 177.0 Kb

Уникальный ID: 181

Посмотрели: 2344 раз

Скачать бесплатно

Посетить Демо страница

Помощь: установка & настройка

Скачали бесплатно: 67 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/nicolafranchini/VenoBox

Информация: Пользователям

Информация: Правообладателям

Теги: ModaL, plugin, Видео, video, галерея, плагин, бутстрап 3, iframe, Gallery, bootstrap 3

Поделился: BootstrapТема

Добавлено: 2015-12-03 в 08:10

Метка: 1756916065

⇄ ⇅

<!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>
 
 
 <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><a href="https://bootstraptema.ru/stuff/plugins_bootstrap/improvement/venobox/12-1-0-181" target="_blank">BootstrapTema</a> © 2025 Галерея изображений с использованием Venobox</p>
 </footer>
 </div>

<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>

// Функция для создания галереи
 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>

BootstrapTema

VenoBox

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0