Media Gallery | The SEEALL Academy<\/title>\n <style>\n \/* Base Styles *\/\n body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: #fcfcfc;\n color: #333;\n }\n\n \/* Gallery Header *\/\n .gallery-header {\n background-color: #001528;\n background-image: linear-gradient(135deg, #001528 0%, #005a9c 100%);\n padding: 4rem 2rem;\n text-align: center;\n border-bottom: 8px solid #F9B000;\n }\n\n .gallery-header h1 {\n color: #ffffff;\n font-size: 3rem;\n font-weight: 800;\n margin: 0 0 0.5rem 0;\n letter-spacing: -0.5px;\n text-shadow: 2px 2px 8px rgba(0,0,0,0.4);\n }\n\n .gallery-header p {\n color: #e6f0f7;\n font-size: 1.2rem;\n margin: 0;\n max-width: 600px;\n margin: 0 auto;\n }\n\n .accent-line {\n width: 60px;\n height: 6px;\n background-color: #F9B000;\n margin: 1.5rem auto 0 auto;\n border-radius: 3px;\n }\n\n \/* Gallery Grid Container *\/\n .gallery-container {\n max-width: 1400px;\n margin: 4rem auto;\n padding: 0 2rem;\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 1.5rem;\n align-items: stretch;\n }\n\n \/* Individual Image Item *\/\n .gallery-item {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n cursor: pointer;\n background-color: #eee;\n aspect-ratio: 4 \/ 3;\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;\n }\n\n .gallery-item:hover, .gallery-item:focus-visible {\n transform: translateY(-8px);\n box-shadow: 0 15px 30px rgba(0, 90, 156, 0.2);\n outline: none;\n }\n\n .gallery-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n display: block;\n }\n\n .gallery-item:hover img {\n transform: scale(1.08);\n }\n\n \/* Hover Overlay with Icon *\/\n .gallery-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0, 90, 156, 0.8) 0%, rgba(0, 90, 156, 0.2) 100%);\n opacity: 0;\n transition: opacity 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .gallery-item:hover .gallery-overlay {\n opacity: 1;\n }\n\n .expand-icon {\n color: #ffffff;\n width: 48px;\n height: 48px;\n transform: scale(0.5);\n opacity: 0;\n transition: transform 0.4s ease, opacity 0.4s ease;\n }\n\n .gallery-item:hover .expand-icon {\n transform: scale(1);\n opacity: 1;\n }\n\n \/* Lightbox Modal *\/\n .lightbox {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 15, 30, 0.95);\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n }\n\n .lightbox.active {\n opacity: 1;\n visibility: visible;\n }\n\n .lightbox-img-wrapper {\n position: relative;\n max-width: 90%;\n max-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .lightbox img {\n max-width: 100%;\n max-height: 85vh;\n border-radius: 8px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n border: 4px solid #ffffff;\n object-fit: contain;\n }\n\n \/* Lightbox Controls *\/\n .lightbox-btn {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n border-radius: 50%;\n }\n\n .lightbox-btn:hover {\n background: #F9B000;\n border-color: #F9B000;\n color: #005a9c;\n transform: scale(1.1);\n }\n\n .lightbox-close {\n position: absolute;\n top: 20px;\n right: 30px;\n width: 50px;\n height: 50px;\n font-size: 24px;\n z-index: 10000;\n }\n\n .lightbox-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 60px;\n height: 60px;\n font-size: 24px;\n z-index: 10000;\n }\n\n .lightbox-prev { left: 30px; }\n .lightbox-next { right: 30px; }\n\n \/* Mobile Adjustments *\/\n @media (max-width: 768px) {\n .gallery-header h1 { font-size: 2.2rem; }\n .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n .lightbox-nav {\n width: 45px;\n height: 45px;\n }\n .lightbox-prev { left: 10px; }\n .lightbox-next { right: 10px; }\n .lightbox-close { top: 15px; right: 15px; width: 40px; height: 40px; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"gallery-header\">\n <h1>Media Gallery<\/h1>\n <p>A glimpse into the life, community, and achievements at The SEEALL Academy.<\/p>\n <div class=\"accent-line\"><\/div>\n <\/header>\n\n \n <main class=\"gallery-container\">\n <div class=\"gallery-grid\" id=\"galleryGrid\">\n \n <\/div>\n <\/main>\n\n \n <div class=\"lightbox\" id=\"lightbox\" aria-modal=\"true\" role=\"dialog\">\n <button class=\"lightbox-btn lightbox-close\" id=\"lightboxClose\" aria-label=\"Close Gallery\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n <\/button>\n \n <button class=\"lightbox-btn lightbox-nav lightbox-prev\" id=\"lightboxPrev\" aria-label=\"Previous Image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n <\/button>\n\n <div class=\"lightbox-img-wrapper\">\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Full Screen Gallery Image\">\n <\/div>\n\n <button class=\"lightbox-btn lightbox-nav lightbox-next\" id=\"lightboxNext\" aria-label=\"Next Image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/button>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Array of the specific image URLs provided\n const imageUrls = [\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.12.24-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.10.48-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.11.51-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.09.57-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.06.05-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/IMG_5965-2.jpeg\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/IMG_8892.jpeg\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/download.jpg\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/download-1.jpg\"\n ];\n\n const galleryGrid = document.getElementById('galleryGrid');\n const lightbox = document.getElementById('lightbox');\n const lightboxImg = document.getElementById('lightboxImg');\n const btnClose = document.getElementById('lightboxClose');\n const btnPrev = document.getElementById('lightboxPrev');\n const btnNext = document.getElementById('lightboxNext');\n \n let currentIndex = 0;\n\n \/\/ Generate Gallery Grid\n imageUrls.forEach((url, index) => {\n const item = document.createElement('div');\n item.className = 'gallery-item';\n item.setAttribute('tabindex', '0');\n item.setAttribute('role', 'button');\n item.setAttribute('aria-label', `View image ${index + 1} full screen`);\n \n \/\/ Magnifying glass icon for overlay\n const iconSvg = `<svg class=\"expand-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"><\/line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>`;\n \n item.innerHTML = `\n <img decoding=\"async\" src=\"${url}\" alt=\"SEEALL Academy Photo ${index + 1}\" loading=\"lazy\">\n <div class=\"gallery-overlay\">\n ${iconSvg}\n <\/div>\n `;\n\n \/\/ Open lightbox on click or Enter key\n item.addEventListener('click', () => openLightbox(index));\n item.addEventListener('keydown', (e) => {\n if (e.key === 'Enter') openLightbox(index);\n });\n\n galleryGrid.appendChild(item);\n });\n\n \/\/ Lightbox Functions\n function openLightbox(index) {\n currentIndex = index;\n updateLightboxImage();\n lightbox.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\n }\n\n function closeLightbox() {\n lightbox.classList.remove('active');\n document.body.style.overflow = '';\n \/\/ Return focus to the grid item that was clicked (accessibility)\n const items = document.querySelectorAll('.gallery-item');\n if(items[currentIndex]) items[currentIndex].focus();\n }\n\n function updateLightboxImage() {\n \/\/ Fade effect between images\n lightboxImg.style.opacity = 0;\n setTimeout(() => {\n lightboxImg.src = imageUrls[currentIndex];\n lightboxImg.alt = `SEEALL Academy Photo ${currentIndex + 1}`;\n lightboxImg.onload = () => { lightboxImg.style.opacity = 1; };\n }, 150);\n }\n\n function showNext() {\n currentIndex = (currentIndex + 1) % imageUrls.length;\n updateLightboxImage();\n }\n\n function showPrev() {\n currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;\n updateLightboxImage();\n }\n\n \/\/ Event Listeners for Lightbox Controls\n btnClose.addEventListener('click', closeLightbox);\n btnNext.addEventListener('click', showNext);\n btnPrev.addEventListener('click', showPrev);\n\n \/\/ Close lightbox when clicking outside the image\n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox || e.target.classList.contains('lightbox-img-wrapper')) {\n closeLightbox();\n }\n });\n\n \/\/ Keyboard Navigation for Lightbox\n document.addEventListener('keydown', (e) => {\n if (!lightbox.classList.contains('active')) return;\n \n if (e.key === 'Escape') closeLightbox();\n if (e.key === 'ArrowRight') showNext();\n if (e.key === 'ArrowLeft') showPrev();\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Media Gallery | The SEEALL Academy Media Gallery A glimpse into the life, community, and achievements at The SEEALL Academy.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4082","page","type-page","status-publish","hentry","odd"],"_links":{"self":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/pages\/4082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seeallacademy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4082"}],"version-history":[{"count":0,"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/pages\/4082\/revisions"}],"wp:attachment":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\n\n \n \n Media Gallery | The SEEALL Academy<\/title>\n <style>\n \/* Base Styles *\/\n body {\n margin: 0;\n padding: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n background-color: #fcfcfc;\n color: #333;\n }\n\n \/* Gallery Header *\/\n .gallery-header {\n background-color: #001528;\n background-image: linear-gradient(135deg, #001528 0%, #005a9c 100%);\n padding: 4rem 2rem;\n text-align: center;\n border-bottom: 8px solid #F9B000;\n }\n\n .gallery-header h1 {\n color: #ffffff;\n font-size: 3rem;\n font-weight: 800;\n margin: 0 0 0.5rem 0;\n letter-spacing: -0.5px;\n text-shadow: 2px 2px 8px rgba(0,0,0,0.4);\n }\n\n .gallery-header p {\n color: #e6f0f7;\n font-size: 1.2rem;\n margin: 0;\n max-width: 600px;\n margin: 0 auto;\n }\n\n .accent-line {\n width: 60px;\n height: 6px;\n background-color: #F9B000;\n margin: 1.5rem auto 0 auto;\n border-radius: 3px;\n }\n\n \/* Gallery Grid Container *\/\n .gallery-container {\n max-width: 1400px;\n margin: 4rem auto;\n padding: 0 2rem;\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n gap: 1.5rem;\n align-items: stretch;\n }\n\n \/* Individual Image Item *\/\n .gallery-item {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n cursor: pointer;\n background-color: #eee;\n aspect-ratio: 4 \/ 3;\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);\n transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;\n }\n\n .gallery-item:hover, .gallery-item:focus-visible {\n transform: translateY(-8px);\n box-shadow: 0 15px 30px rgba(0, 90, 156, 0.2);\n outline: none;\n }\n\n .gallery-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n display: block;\n }\n\n .gallery-item:hover img {\n transform: scale(1.08);\n }\n\n \/* Hover Overlay with Icon *\/\n .gallery-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0, 90, 156, 0.8) 0%, rgba(0, 90, 156, 0.2) 100%);\n opacity: 0;\n transition: opacity 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .gallery-item:hover .gallery-overlay {\n opacity: 1;\n }\n\n .expand-icon {\n color: #ffffff;\n width: 48px;\n height: 48px;\n transform: scale(0.5);\n opacity: 0;\n transition: transform 0.4s ease, opacity 0.4s ease;\n }\n\n .gallery-item:hover .expand-icon {\n transform: scale(1);\n opacity: 1;\n }\n\n \/* Lightbox Modal *\/\n .lightbox {\n position: fixed;\n inset: 0;\n background-color: rgba(0, 15, 30, 0.95);\n z-index: 9999;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n }\n\n .lightbox.active {\n opacity: 1;\n visibility: visible;\n }\n\n .lightbox-img-wrapper {\n position: relative;\n max-width: 90%;\n max-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .lightbox img {\n max-width: 100%;\n max-height: 85vh;\n border-radius: 8px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);\n border: 4px solid #ffffff;\n object-fit: contain;\n }\n\n \/* Lightbox Controls *\/\n .lightbox-btn {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n color: white;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.2s ease;\n border-radius: 50%;\n }\n\n .lightbox-btn:hover {\n background: #F9B000;\n border-color: #F9B000;\n color: #005a9c;\n transform: scale(1.1);\n }\n\n .lightbox-close {\n position: absolute;\n top: 20px;\n right: 30px;\n width: 50px;\n height: 50px;\n font-size: 24px;\n z-index: 10000;\n }\n\n .lightbox-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: 60px;\n height: 60px;\n font-size: 24px;\n z-index: 10000;\n }\n\n .lightbox-prev { left: 30px; }\n .lightbox-next { right: 30px; }\n\n \/* Mobile Adjustments *\/\n @media (max-width: 768px) {\n .gallery-header h1 { font-size: 2.2rem; }\n .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }\n .lightbox-nav {\n width: 45px;\n height: 45px;\n }\n .lightbox-prev { left: 10px; }\n .lightbox-next { right: 10px; }\n .lightbox-close { top: 15px; right: 15px; width: 40px; height: 40px; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <header class=\"gallery-header\">\n <h1>Media Gallery<\/h1>\n <p>A glimpse into the life, community, and achievements at The SEEALL Academy.<\/p>\n <div class=\"accent-line\"><\/div>\n <\/header>\n\n \n <main class=\"gallery-container\">\n <div class=\"gallery-grid\" id=\"galleryGrid\">\n \n <\/div>\n <\/main>\n\n \n <div class=\"lightbox\" id=\"lightbox\" aria-modal=\"true\" role=\"dialog\">\n <button class=\"lightbox-btn lightbox-close\" id=\"lightboxClose\" aria-label=\"Close Gallery\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"><\/line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"><\/line><\/svg>\n <\/button>\n \n <button class=\"lightbox-btn lightbox-nav lightbox-prev\" id=\"lightboxPrev\" aria-label=\"Previous Image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n <\/button>\n\n <div class=\"lightbox-img-wrapper\">\n <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Full Screen Gallery Image\">\n <\/div>\n\n <button class=\"lightbox-btn lightbox-nav lightbox-next\" id=\"lightboxNext\" aria-label=\"Next Image\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/button>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Array of the specific image URLs provided\n const imageUrls = [\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.12.24-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.10.48-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.11.51-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.09.57-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-09-at-4.06.05-PM.png\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/IMG_5965-2.jpeg\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/IMG_8892.jpeg\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/download.jpg\",\n \"https:\/\/seeallacademy.com\/wp-content\/uploads\/2026\/06\/download-1.jpg\"\n ];\n\n const galleryGrid = document.getElementById('galleryGrid');\n const lightbox = document.getElementById('lightbox');\n const lightboxImg = document.getElementById('lightboxImg');\n const btnClose = document.getElementById('lightboxClose');\n const btnPrev = document.getElementById('lightboxPrev');\n const btnNext = document.getElementById('lightboxNext');\n \n let currentIndex = 0;\n\n \/\/ Generate Gallery Grid\n imageUrls.forEach((url, index) => {\n const item = document.createElement('div');\n item.className = 'gallery-item';\n item.setAttribute('tabindex', '0');\n item.setAttribute('role', 'button');\n item.setAttribute('aria-label', `View image ${index + 1} full screen`);\n \n \/\/ Magnifying glass icon for overlay\n const iconSvg = `<svg class=\"expand-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"><\/circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"><\/line><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"><\/line><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"><\/line><\/svg>`;\n \n item.innerHTML = `\n <img decoding=\"async\" src=\"${url}\" alt=\"SEEALL Academy Photo ${index + 1}\" loading=\"lazy\">\n <div class=\"gallery-overlay\">\n ${iconSvg}\n <\/div>\n `;\n\n \/\/ Open lightbox on click or Enter key\n item.addEventListener('click', () => openLightbox(index));\n item.addEventListener('keydown', (e) => {\n if (e.key === 'Enter') openLightbox(index);\n });\n\n galleryGrid.appendChild(item);\n });\n\n \/\/ Lightbox Functions\n function openLightbox(index) {\n currentIndex = index;\n updateLightboxImage();\n lightbox.classList.add('active');\n document.body.style.overflow = 'hidden'; \/\/ Prevent background scrolling\n }\n\n function closeLightbox() {\n lightbox.classList.remove('active');\n document.body.style.overflow = '';\n \/\/ Return focus to the grid item that was clicked (accessibility)\n const items = document.querySelectorAll('.gallery-item');\n if(items[currentIndex]) items[currentIndex].focus();\n }\n\n function updateLightboxImage() {\n \/\/ Fade effect between images\n lightboxImg.style.opacity = 0;\n setTimeout(() => {\n lightboxImg.src = imageUrls[currentIndex];\n lightboxImg.alt = `SEEALL Academy Photo ${currentIndex + 1}`;\n lightboxImg.onload = () => { lightboxImg.style.opacity = 1; };\n }, 150);\n }\n\n function showNext() {\n currentIndex = (currentIndex + 1) % imageUrls.length;\n updateLightboxImage();\n }\n\n function showPrev() {\n currentIndex = (currentIndex - 1 + imageUrls.length) % imageUrls.length;\n updateLightboxImage();\n }\n\n \/\/ Event Listeners for Lightbox Controls\n btnClose.addEventListener('click', closeLightbox);\n btnNext.addEventListener('click', showNext);\n btnPrev.addEventListener('click', showPrev);\n\n \/\/ Close lightbox when clicking outside the image\n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox || e.target.classList.contains('lightbox-img-wrapper')) {\n closeLightbox();\n }\n });\n\n \/\/ Keyboard Navigation for Lightbox\n document.addEventListener('keydown', (e) => {\n if (!lightbox.classList.contains('active')) return;\n \n if (e.key === 'Escape') closeLightbox();\n if (e.key === 'ArrowRight') showNext();\n if (e.key === 'ArrowLeft') showPrev();\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Media Gallery | The SEEALL Academy Media Gallery A glimpse into the life, community, and achievements at The SEEALL Academy.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4082","page","type-page","status-publish","hentry","odd"],"_links":{"self":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/pages\/4082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/seeallacademy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4082"}],"version-history":[{"count":0,"href":"https:\/\/seeallacademy.com\/index.php?rest_route=\/wp\/v2\/pages\/4082\/revisions"}],"wp:attachment":[{"href":"https:\/\/seeallacademy.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}