{"id":107,"date":"2025-01-14T17:58:38","date_gmt":"2025-01-14T14:58:38","guid":{"rendered":"https:\/\/src.by\/WDKL\/?page_id=107"},"modified":"2025-03-17T13:30:27","modified_gmt":"2025-03-17T10:30:27","slug":"%d1%84%d0%be%d1%82%d0%be%d0%b3%d0%b0%d0%bb%d0%b5%d1%80%d0%b5%d1%8f","status":"publish","type":"page","link":"https:\/\/src.by\/WDKL\/%d1%84%d0%be%d1%82%d0%be%d0%b3%d0%b0%d0%bb%d0%b5%d1%80%d0%b5%d1%8f","title":{"rendered":"\u0424\u043e\u0442\u043e \u0433\u0430\u043b\u0435\u0440\u0435\u044f"},"content":{"rendered":"\n<style>\n    .category-list {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n        margin-bottom: 20px;\n    }\n\n    .category-item {\n        padding: 10px 20px;\n        background-color: #009879; \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043a\u043d\u043e\u043f\u043e\u043a *\/\n        color: white;\n        border: none;\n        border-radius: 2px;\n        cursor: pointer;\n        transition: background-color 0.3s ease;\n    }\n\n    .category-item:hover {\n        background-color: #007b64; \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 *\/\n    }\n\n    .gallery {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n    }\n\n    .img-container {\n        position: relative;\n    }\n\n    .img-container img {\n        width: 200px;\n        height: 150px;\n        object-fit: cover;\n        border-radius: 8px;\n        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n        cursor: pointer;\n        transition: transform 0.3s ease;\n    }\n\n    .year-badge {\n        position: absolute;\n        top: 10px;\n        left: 10px;\n        background-color: rgba(0, 0, 0, 0.5);\n        color: white;\n        padding: 5px;\n        border-radius: 3px;\n        font-size: 14px;\n    }\n\n    .custom-fullscreen {\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 90%;\n        height: 90%;\n        object-fit: contain;\n        z-index: 100000;\n        border-radius: 0;\n        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);\n        animation: customFadeIn 0.3s ease;\n    }\n\n    .custom-fullscreen-container {\n        position: relative;\n    }\n\n    .custom-fullscreen-year {\n        position: absolute;\n        top: 20px;\n        left: 20px;\n        background-color: rgba(0, 0, 0, 0.5);\n        color: white;\n        padding: 10px;\n        border-radius: 5px;\n        font-size: 18px;\n    }\n\n    @keyframes customFadeIn {\n        from {\n            opacity: 0;\n        }\n        to {\n            opacity: 1;\n        }\n    }\n\n    .custom-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.8);\n        z-index: 99999;\n        animation: customFadeIn 0.3s ease;\n    }\n\n    .arrow {\n        position: fixed;\n        top: 50%;\n        transform: translateY(-50%);\n        width: 40px;\n        height: 40px;\n        background-color: rgba(255, 255, 255, 0.5);\n        border-radius: 50%;\n        cursor: pointer;\n        z-index: 100001;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .arrow.left {\n        left: 10px;\n    }\n\n    .arrow.right {\n        right: 10px;\n    }\n\n    .arrow svg {\n        width: 20px;\n        height: 20px;\n    }\n\n    \/* \u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 *\/\n    @media (max-width: 600px) {\n        .gallery {\n            gap: 5px;\n        }\n\n        .img-container img {\n            width: 100%;\n            height: auto;\n        }\n\n        .arrow {\n            width: 30px;\n            height: 30px;\n        }\n\n        .arrow svg {\n            width: 15px;\n            height: 15px;\n        }\n\n        .year-badge {\n            font-size: 12px;\n            padding: 3px;\n        }\n    }\n<\/style>\n\n\n\n\n<div class=\"category-list\" id=\"categoryList\"><\/div>\n<div class=\"gallery\" id=\"gallery\"><\/div>\n<div class=\"custom-overlay\" id=\"customOverlay\" style=\"display: none;\"><\/div>\n<div class=\"arrow left\" id=\"arrowLeft\" style=\"display: none;\">\n    <svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg>\n<\/div>\n<div class=\"arrow right\" id=\"arrowRight\" style=\"display: none;\">\n    <svg viewBox=\"0 0 24 24\"><path d=\"M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z\"\/><\/svg>\n<\/div>\n<script>\n    let currentImageIndex = -1;\n    let imageSources = [];\n    let imageYears = [];\n    let allCategories = [];\n\n    async function loadCategoriesAndImages() {\n        try {\n            const response = await fetch('get-images.php');\n            if (!response.ok) {\n                console.error('\u041e\u0448\u0438\u0431\u043a\u0430 HTTP:', response.status, response.statusText);\n                return;\n            }\n            const data = await response.json();\n            console.log('\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435:', data);\n\n            if (data.error) {\n                console.error('\u041e\u0448\u0438\u0431\u043a\u0430:', data.error);\n                return;\n            }\n\n            allCategories = data.categories;\n\n            const categoryList = document.getElementById('categoryList');\n            const categoriesArray = Object.values(allCategories);\n\n            \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \"\u0412\u0441\u0435\"\n            const allButton = document.createElement('button');\n            allButton.textContent = '\u0412\u0441\u0435';\n            allButton.className = 'category-item';\n            allButton.onclick = () => loadImages('all');\n            categoryList.appendChild(allButton);\n\n            categoriesArray.forEach(category => {\n                const button = document.createElement('button');\n                button.textContent = category;\n                button.className = 'category-item';\n                button.onclick = () => loadImages(category);\n                categoryList.appendChild(button);\n            });\n\n            \/\/ \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 \u0432\u0441\u0435\u0445 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\n            loadImages('all');\n        } catch (error) {\n            console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0434\u0430\u043d\u043d\u044b\u0445:', error);\n        }\n    }\n\n    async function loadImages(category) {\n        try {\n            const response = await fetch(`get-images.php?category=${category}`);\n            if (!response.ok) {\n                console.error('\u041e\u0448\u0438\u0431\u043a\u0430 HTTP:', response.status, response.statusText);\n                return;\n            }\n            const data = await response.json();\n            console.log('\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439:', data);\n\n            if (data.error) {\n                console.error('\u041e\u0448\u0438\u0431\u043a\u0430:', data.error);\n                return;\n            }\n\n            const galleryElement = document.getElementById('gallery');\n            galleryElement.innerHTML = '';\n            imageSources = data.images;\n            imageYears = data.years;\n            if (category !== 'all') {\n                const filteredSources = [];\n                const filteredYears = [];\n                imageSources.forEach((src, index) => {\n                    if (src.includes(category)) {\n                        filteredSources.push(src);\n                        filteredYears.push(imageYears[index]);\n                    }\n                });\n                imageSources = filteredSources;\n                imageYears = filteredYears;\n            }\n            imageSources.forEach((src, index) => {\n                const imgContainer = document.createElement('div');\n                imgContainer.className = 'img-container';\n\n                const img = document.createElement('img');\n                img.src = src;\n                img.onclick = () => openFullscreen(index);\n\n                const yearBadge = document.createElement('div');\n                yearBadge.className = 'year-badge';\n                yearBadge.textContent = imageYears[index];\n\n                imgContainer.appendChild(img);\n                imgContainer.appendChild(yearBadge);\n                galleryElement.appendChild(imgContainer);\n            });\n        } catch (error) {\n            console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439:', error);\n        }\n    }\n\n    function openFullscreen(index) {\n        const overlay = document.getElementById('customOverlay');\n        const arrowLeft = document.getElementById('arrowLeft');\n        const arrowRight = document.getElementById('arrowRight');\n        overlay.style.display = 'block';\n        arrowLeft.style.display = 'flex';\n        arrowRight.style.display = 'flex';\n\n        currentImageIndex = index;\n\n        const imgContainer = document.createElement('div');\n        imgContainer.className = 'custom-fullscreen-container';\n\n        const img = document.createElement('img');\n        img.src = imageSources[currentImageIndex];\n        img.className = 'custom-fullscreen';\n        img.onclick = closeFullscreen;\n\n        const yearBadge = document.createElement('div');\n        yearBadge.className = 'custom-fullscreen-year';\n        yearBadge.textContent = imageYears[currentImageIndex];\n\n        imgContainer.appendChild(img);\n        imgContainer.appendChild(yearBadge);\n        overlay.innerHTML = '';\n        overlay.appendChild(imgContainer);\n    }\n\n    function closeFullscreen() {\n        const overlay = document.getElementById('customOverlay');\n        const arrowLeft = document.getElementById('arrowLeft');\n        const arrowRight = document.getElementById('arrowRight');\n        overlay.innerHTML = '';\n        overlay.style.display = 'none';\n        arrowLeft.style.display = 'none';\n        arrowRight.style.display = 'none';\n    }\n\n    function showPreviousImage() {\n        if (currentImageIndex > 0) {\n            openFullscreen(currentImageIndex - 1);\n        }\n    }\n\n    function showNextImage() {\n        if (currentImageIndex < imageSources.length - 1) {\n            openFullscreen(currentImageIndex + 1);\n        }\n    }\n\n    document.getElementById('arrowLeft').addEventListener('click', showPreviousImage);\n    document.getElementById('arrowRight').addEventListener('click', showNextImage);\n\n    loadCategoriesAndImages();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-107","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/pages\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":44,"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/pages\/107\/revisions"}],"predecessor-version":[{"id":1438,"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/pages\/107\/revisions\/1438"}],"wp:attachment":[{"href":"https:\/\/src.by\/WDKL\/wp-json\/wp\/v2\/media?parent=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}