{"id":2225,"date":"2026-07-17T10:04:33","date_gmt":"2026-07-17T03:04:33","guid":{"rendered":"https:\/\/sma2banguntapan.sch.id\/n\/?page_id=2225"},"modified":"2026-07-17T10:26:36","modified_gmt":"2026-07-17T03:26:36","slug":"gallery-foto","status":"publish","type":"page","link":"https:\/\/sma2banguntapan.sch.id\/n\/?page_id=2225","title":{"rendered":"Gallery Foto"},"content":{"rendered":"<p><strong>    \r\n    <style>\r\n        .vdg-main-wrapper { margin: 30px 0; width: 100%; color: inherit; }\r\n        .vdg-search-box-wrapper { position: relative; max-width: 500px; margin: 0 auto 40px auto; display: flex; align-items: center; }\r\n        .vdg-search-input { width: 100%; padding: 14px 50px 14px 22px; font-size: 0.95rem; border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 50px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: initial; outline: none; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; }\r\n        .vdg-search-input:focus { border-color: currentColor; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); background: #ffffff; }\r\n        .vdg-search-icon-right { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: #9ca3af; pointer-events: none; transition: all 0.3s ease; }\r\n        .vdg-search-input:focus + .vdg-search-icon-right { fill: #6b7280; }\r\n        .vdg-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 25px; }\r\n        .vdg-folder-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(125, 125, 125, 0.15); border-radius: 18px; padding: 30px 22px; text-align: center; cursor: pointer; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; display: flex; flex-direction: column; align-items: center; }\r\n        .vdg-folder-card:hover { transform: translateY(-8px); border-color: currentColor; background: rgba(125, 125, 125, 0.05); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); }\r\n        .vdg-icon-container { width: 72px; height: 72px; background: #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: all 0.35s ease; }\r\n        .vdg-folder-card:hover .vdg-icon-container { transform: scale(1.1); background: #1f2937; }\r\n        .vdg-icon-svg { width: 36px; height: 36px; fill: #374151; transition: fill 0.3s ease; }\r\n        .vdg-folder-card:hover .vdg-icon-svg { fill: #ffffff; }\r\n        .vdg-folder-title { font-size: 1.1rem; font-weight: 700; margin: 10px 0 6px 0; line-height: 1.4; color: inherit; }\r\n        .vdg-folder-meta { font-size: 0.78rem; opacity: 0.6; margin-top: auto; display: flex; align-items: center; gap: 5px; }\r\n        .vdg-pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 45px; }\r\n        .vdg-page-btn { background: rgba(125, 125, 125, 0.08); border: 1px solid rgba(125, 125, 125, 0.2); color: inherit; padding: 8px 18px; border-radius: 30px; cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: all 0.3s ease; }\r\n        .vdg-page-btn:hover:not(:disabled) { background: currentColor; border-color: currentColor; color: #fff; }\r\n        .vdg-page-btn.active { background: currentColor; border-color: currentColor; color: #fff; cursor: default; filter: brightness(0.9); }\r\n        .vdg-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }\r\n        .vdg-hidden { display: none !important; }\r\n        .vdg-no-results { text-align: center; opacity: 0.6; padding: 50px 0; font-size: 1.05rem; grid-column: 1 \/ -1; }\r\n        .vdg-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; padding: 20px; }\r\n        .vdg-modal.active { opacity: 1; pointer-events: auto; }\r\n        .vdg-modal-content { background: #ffffff; width: 100%; max-width: 1150px; height: 85vh; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.3); position: relative; transform: scale(0.95); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }\r\n        .vdg-modal.active .vdg-modal-content { transform: scale(1); }\r\n        .vdg-modal-header { padding: 16px 25px; background: #f8f9fa; border-bottom: 1px solid #edf2f7; display: flex; align-items: center; justify-content: space-between; }\r\n        .vdg-modal-header h3 { margin: 0; font-size: 1.15rem; color: #1e293b; font-weight: 700; }\r\n        .vdg-modal-close { background: #e2e8f0; color: #475569; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }\r\n        .vdg-modal-close:hover { background: #ef4444; color: #ffffff; transform: rotate(90deg); }\r\n        .vdg-modal-body { flex-grow: 1; background: #f1f5f9; }\r\n        .vdg-modal-body iframe { width: 100%; height: 100%; border: 0; }\r\n    <\/style>\r\n\r\n    <div class=\"vdg-main-wrapper\" id=\"vdgMainPortal\">\r\n                    <div class=\"vdg-search-box-wrapper\">\r\n                <input type=\"text\" id=\"vdgSearchInput\" class=\"vdg-search-input\" placeholder=\"Ketik nama kegiatan untuk mencari album...\">\r\n                <svg class=\"vdg-search-icon-right\" viewBox=\"0 0 24 24\"><path d=\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\"\/><\/svg>\r\n            <\/div>\r\n        \r\n        <div class=\"vdg-folder-grid\" id=\"vdgGridContainer\">\r\n                                    <div class=\"vdg-folder-card vdg-filterable-item\" data-title=\"wisuda 2026 xii fa 1\" onclick=\"openVdgModal('Wisuda 2026 XII FA 1', '1aWEULuiL6jqn3UPJ0x_9Vo3hVENxMcKL')\">\r\n                            <div class=\"vdg-icon-container\">\r\n                                <svg class=\"vdg-icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z\"\/><\/svg>\r\n                            <\/div>\r\n                            <div class=\"vdg-folder-title\">Wisuda 2026 XII FA 1<\/div>\r\n                            <div class=\"vdg-folder-meta\">12 May 2026 10:52<\/div>\r\n                        <\/div>\r\n                                            <div class=\"vdg-folder-card vdg-filterable-item\" data-title=\"wisuda 2026 xii fa 2\" onclick=\"openVdgModal('Wisuda 2026 XII FA 2', '1b5z7WbN4bHfH4tYUYtKTdwbZ1vSmNKBX')\">\r\n                            <div class=\"vdg-icon-container\">\r\n                                <svg class=\"vdg-icon-svg\" viewBox=\"0 0 24 24\"><path d=\"M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z\"\/><\/svg>\r\n                            <\/div>\r\n                            <div class=\"vdg-folder-title\">Wisuda 2026 XII FA 2<\/div>\r\n                            <div class=\"vdg-folder-meta\">12 May 2026 10:49<\/div>\r\n                        <\/div>\r\n                                <div id=\"vdgNoResultsMessage\" class=\"vdg-no-results vdg-hidden\">Album kegiatan tidak ditemukan.<\/div>\r\n        <\/div>\r\n\r\n                    <div class=\"vdg-pagination\" id=\"vdgPaginationNav\"><\/div>\r\n            <\/div>\r\n\r\n    <!-- LIGHTBOX MODAL SCREEN LAYER -->\r\n    <div id=\"vdgModalLayer\" class=\"vdg-modal\" onclick=\"closeVdgModalViaOverlay(event)\">\r\n        <div class=\"vdg-modal-content\">\r\n            <div class=\"vdg-modal-header\">\r\n                <h3 id=\"vdgModalLabel\">Nama Kegiatan<\/h3>\r\n                <button class=\"vdg-modal-close\" onclick=\"closeVdgModal()\">&times;<\/button>\r\n            <\/div>\r\n            <div class=\"vdg-modal-body\">\r\n                <iframe id=\"vdgModalIframe\" src=\"\" allow=\"autoplay\" loading=\"lazy\"><\/iframe>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const itemsPerPage = parseInt(\"6\", 10) || 6;\r\n            let currentPage = 1;\r\n            \r\n            const searchInput = document.getElementById('vdgSearchInput');\r\n            const paginationNav = document.getElementById('vdgPaginationNav');\r\n            const noResultsMsg = document.getElementById('vdgNoResultsMessage');\r\n            const allItems = Array.from(document.querySelectorAll('.vdg-filterable-item'));\r\n\r\n            if (allItems.length === 0) return;\r\n\r\n            function updateGalleryPortal() {\r\n                const query = searchInput ? searchInput.value.toLowerCase().trim() : '';\r\n                const filteredItems = allItems.filter(item => {\r\n                    const title = item.getAttribute('data-title') || '';\r\n                    return title.includes(query);\r\n                });\r\n\r\n                if (filteredItems.length === 0) {\r\n                    noResultsMsg.classList.remove('vdg-hidden');\r\n                    if(paginationNav) paginationNav.innerHTML = '';\r\n                    allItems.forEach(item => item.classList.add('vdg-hidden'));\r\n                    return;\r\n                } else {\r\n                    noResultsMsg.classList.add('vdg-hidden');\r\n                }\r\n\r\n                const totalItems = filteredItems.length;\r\n                const totalPages = Math.ceil(totalItems \/ itemsPerPage);\r\n                \r\n                if (currentPage > totalPages) currentPage = totalPages;\r\n                if (currentPage < 1) currentPage = 1;\r\n\r\n                const startIndex = (currentPage - 1) * itemsPerPage;\r\n                const endIndex = startIndex + itemsPerPage;\r\n\r\n                allItems.forEach(item => item.classList.add('vdg-hidden'));\r\n                filteredItems.forEach((item, index) => {\r\n                    if (index >= startIndex && index < endIndex) {\r\n                        item.classList.remove('vdg-hidden');\r\n                    }\r\n                });\r\n\r\n                renderPaginationControls(totalPages);\r\n            }\r\n\r\n            function renderPaginationControls(totalPages) {\r\n                if (!paginationNav) return;\r\n                paginationNav.innerHTML = '';\r\n                if (totalPages <= 1) return;\r\n\r\n                const prevBtn = document.createElement('button');\r\n                prevBtn.className = 'vdg-page-btn';\r\n                prevBtn.innerText = '\u2039';\r\n                prevBtn.disabled = (currentPage === 1);\r\n                prevBtn.onclick = () => { currentPage--; updateGalleryPortal(); scrollToGalleryTop(); };\r\n                paginationNav.appendChild(prevBtn);\r\n\r\n                for (let i = 1; i <= totalPages; i++) {\r\n                    const pageBtn = document.createElement('button');\r\n                    pageBtn.className = 'vdg-page-btn' + (i === currentPage ? ' active' : '');\r\n                    pageBtn.innerText = i;\r\n                    pageBtn.onclick = () => { currentPage = i; updateGalleryPortal(); scrollToGalleryTop(); };\r\n                    paginationNav.appendChild(pageBtn);\r\n                }\r\n\r\n                const nextBtn = document.createElement('button');\r\n                nextBtn.className = 'vdg-page-btn';\r\n                nextBtn.innerText = '\u203a';\r\n                nextBtn.disabled = (currentPage === totalPages);\r\n                nextBtn.onclick = () => { currentPage++; updateGalleryPortal(); scrollToGalleryTop(); };\r\n                paginationNav.appendChild(nextBtn);\r\n            }\r\n\r\n            function scrollToGalleryTop() {\r\n                const portal = document.getElementById('vdgMainPortal');\r\n                if(portal) portal.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n            }\r\n\r\n            if (searchInput) {\r\n                searchInput.addEventListener('input', function() {\r\n                    currentPage = 1;\r\n                    updateGalleryPortal();\r\n                });\r\n            }\r\n            updateGalleryPortal();\r\n        });\r\n\r\n        function openVdgModal(title, folderId) {\r\n            const modal = document.getElementById('vdgModalLayer');\r\n            const label = document.getElementById('vdgModalLabel');\r\n            const iframe = document.getElementById('vdgModalIframe');\r\n            label.innerText = title;\r\n            iframe.src = \"https:\/\/drive.google.com\/embeddedfolderview?id=\" + folderId + \"#grid\";\r\n            modal.classList.add('active');\r\n            document.body.style.overflow = 'hidden'; \r\n        }\r\n\r\n        function closeVdgModal() {\r\n            const modal = document.getElementById('vdgModalLayer');\r\n            const iframe = document.getElementById('vdgModalIframe');\r\n            modal.classList.remove('active');\r\n            document.body.style.overflow = 'auto'; \r\n            setTimeout(() => { iframe.src = \"\"; }, 350);\r\n        }\r\n\r\n        function closeVdgModalViaOverlay(e) {\r\n            if (e.target.id === 'vdgModalLayer') closeVdgModal();\r\n        }\r\n\r\n        document.addEventListener('keydown', function(e) {\r\n            if (e.key === 'Escape') {\r\n                const modal = document.getElementById('vdgModalLayer');\r\n                if (modal && modal.classList.contains('active')) closeVdgModal();\r\n            }\r\n        });\r\n    <\/script>\r\n    <\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"folder":[],"class_list":["post-2225","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages\/2225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2225"}],"version-history":[{"count":4,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages\/2225\/revisions"}],"predecessor-version":[{"id":2230,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=\/wp\/v2\/pages\/2225\/revisions\/2230"}],"wp:attachment":[{"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2225"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"https:\/\/sma2banguntapan.sch.id\/n\/index.php?rest_route=%2Fwp%2Fv2%2Ffolder&post=2225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}