View file VenoBox/bootstraptema-demo2.html

File size: 3.8Kb 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Галерея изображений | BootstrapTema</title>
    
    <!-- Подключаем Venobox -->
    <link href="https://cdn.jsdelivr.net/npm/venobox@2.1.8/dist/venobox.min.css" rel="stylesheet" />
    
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        
        .gallery-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .gallery-item {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .gallery-item:hover {
            transform: scale(1.03);
        }
        
        .gallery-link {
            display: block;
            width: 100%;
            height: 200px;
            cursor: pointer;
        }
        
        .gallery-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>

<div class="gallery-container">
    <h1>Галерея изображений</h1>
    
    <div class="gallery" id="gallery">
        <!-- Галерея будет сгенерирована автоматически -->
    </div>
</div>

<!-- Подключаем jQuery (требуется для Venobox) -->
<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>
    // Функция для создания галереи
    function createGallery() {
        const gallery = document.getElementById('gallery');
        const imagesCount = 30;
        
        for (let i = 1; i <= imagesCount; i++) {
            const imageUrl = `https://bootstraptema.ru/images/demo/1920x1080/demo${i}.jpg`;
            
            const galleryItem = document.createElement('div');
            galleryItem.className = 'gallery-item';
            
            const link = document.createElement('a');
            link.className = 'venobox';
            link.href = imageUrl;
            link.setAttribute('data-gall', 'myGallery');
            link.setAttribute('data-title', `Изображение ${i}`);
            
            const img = document.createElement('img');
            img.className = 'gallery-img';
            img.src = imageUrl;
            img.alt = `Изображение ${i}`;
            img.loading = "lazy";
            
            link.appendChild(img);
            galleryItem.appendChild(link);
            gallery.appendChild(galleryItem);
        }
        
        // Инициализируем Venobox
        initializeVenobox();
    }
    
    // Функция для инициализации 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'
        });
    }
    
    // Ждем загрузки DOM и jQuery
    $(document).ready(function() {
        createGallery();
    });
</script>

</body>
</html>