{"id":712,"date":"2025-09-25T05:58:57","date_gmt":"2025-09-25T05:58:57","guid":{"rendered":"https:\/\/crownhospital.ae\/hospital\/?page_id=712"},"modified":"2026-07-05T15:44:57","modified_gmt":"2026-07-05T15:44:57","slug":"gallery","status":"publish","type":"page","link":"https:\/\/crownhospital.ae\/hospital\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"712\" class=\"elementor elementor-712\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c7d90f1 e-flex e-con-boxed e-con e-parent\" data-id=\"2c7d90f1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b77d256 elementor-widget elementor-widget-heading\" data-id=\"5b77d256\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Gallery<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a51c63e e-flex e-con-boxed e-con e-parent\" data-id=\"a51c63e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ca98925 elementor-widget elementor-widget-html\" data-id=\"ca98925\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.gal-page{\r\n    --navy: #001c54;\r\n    --navy-hover: #001236;\r\n    --text-color:#222;\r\n    --text-mute:#6b7280;\r\n    --border-color:#e5e7eb;\r\n    --bg-color:#ffffff;\r\n    --sidebar-bg:#fafafa;\r\n\r\n    font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;\r\n    color: var(--text-color);\r\n    background: var(--bg-color);\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n    padding: 40px 24px;\r\n}\r\n\r\n.gal-page *{\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* ---- Header + filter tabs ---- *\/\r\n.gal-header{\r\n    margin-bottom: 24px;\r\n}\r\n\r\n.gal-title{\r\n    font-size: 26px;\r\n    font-weight: 800;\r\n    color: var(--text-color);\r\n    margin-bottom: 6px;\r\n}\r\n\r\n.gal-subtitle{\r\n    font-size: 14px;\r\n    color: var(--text-mute);\r\n    margin-bottom: 22px;\r\n}\r\n\r\n.gal-tabs{\r\n    display: flex;\r\n    gap: 10px;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.gal-tab{\r\n    background: #fff;\r\n    border: 1.5px solid var(--border-color);\r\n    color: var(--navy);\r\n    font-size: 13.5px;\r\n    font-weight: 700;\r\n    padding: 9px 20px;\r\n    border-radius: 50px;\r\n    cursor: pointer;\r\n    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;\r\n}\r\n\r\n.gal-tab:hover{\r\n    border-color: var(--navy);\r\n}\r\n\r\n.gal-tab.active{\r\n    background: var(--navy);\r\n    border-color: var(--navy);\r\n    color: #fff;\r\n}\r\n\r\n\/* ---- Grid ---- *\/\r\n.gal-grid{\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\r\n    gap: 18px;\r\n    margin-top: 26px;\r\n}\r\n\r\n.gal-item{\r\n    position: relative;\r\n    border-radius: 14px;\r\n    overflow: hidden;\r\n    aspect-ratio: 4 \/ 3;\r\n    background: var(--sidebar-bg);\r\n    cursor: pointer;\r\n    box-shadow: 0 1px 3px rgba(0,0,0,0.06);\r\n    transition: box-shadow 0.2s ease, transform 0.2s ease;\r\n}\r\n\r\n.gal-item:hover{\r\n    box-shadow: 0 14px 28px rgba(0,28,84,0.16);\r\n    transform: translateY(-3px);\r\n}\r\n\r\n.gal-item img{\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    display: block;\r\n    transition: transform 0.35s ease;\r\n}\r\n\r\n.gal-item:hover img{\r\n    transform: scale(1.06);\r\n}\r\n\r\n.gal-item-overlay{\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(to top, rgba(0,10,40,0.75) 0%, rgba(0,10,40,0) 55%);\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-end;\r\n    padding: 14px;\r\n}\r\n\r\n.gal-item-tag{\r\n    align-self: flex-start;\r\n    font-size: 10.5px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.03em;\r\n    text-transform: uppercase;\r\n    color: #fff;\r\n    background: rgba(255,255,255,0.18);\r\n    padding: 3px 9px;\r\n    border-radius: 20px;\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.gal-item-title{\r\n    color: #fff;\r\n    font-size: 14px;\r\n    font-weight: 700;\r\n    line-height: 1.3;\r\n}\r\n\r\n.gal-empty-state{\r\n    font-size: 14px;\r\n    color: var(--text-mute);\r\n    padding: 60px 0;\r\n    text-align: center;\r\n}\r\n\r\n\/* ---- Lightbox ---- *\/\r\n.gal-page .gal-lightbox-overlay{\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(0, 8, 30, 0.9);\r\n    display: none;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 99999;\r\n    padding: 24px;\r\n}\r\n\r\n.gal-page .gal-lightbox-overlay.open{\r\n    display: flex;\r\n}\r\n\r\n.gal-page .gal-lightbox-inner{\r\n    position: relative;\r\n    max-width: 1000px;\r\n    width: 100%;\r\n    max-height: 88vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.gal-page .gal-lightbox-img{\r\n    max-width: 100%;\r\n    max-height: 68vh;\r\n    border-radius: 12px;\r\n    object-fit: contain;\r\n    background: #111;\r\n}\r\n\r\n.gal-page .gal-lightbox-caption{\r\n    margin-top: 16px;\r\n    text-align: center;\r\n    color: #fff;\r\n}\r\n\r\n.gal-page .gal-lightbox-tag{\r\n    display: inline-block;\r\n    font-size: 11px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.03em;\r\n    text-transform: uppercase;\r\n    color: #fff;\r\n    background: rgba(255,255,255,0.15);\r\n    padding: 4px 10px;\r\n    border-radius: 20px;\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.gal-page .gal-lightbox-title{\r\n    font-size: 17px;\r\n    font-weight: 700;\r\n    margin-bottom: 4px;\r\n}\r\n\r\n.gal-page .gal-lightbox-desc{\r\n    font-size: 13.5px;\r\n    color: rgba(255,255,255,0.75);\r\n    max-width: 560px;\r\n    margin: 0 auto;\r\n    line-height: 1.5;\r\n}\r\n\r\n.gal-page .gal-lightbox-close{\r\n    position: absolute;\r\n    top: -10px;\r\n    right: -10px;\r\n    width: 38px;\r\n    height: 38px;\r\n    border-radius: 50%;\r\n    background: #fff;\r\n    border: none;\r\n    font-size: 20px;\r\n    color: #222;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 2;\r\n}\r\n\r\n.gal-page .gal-lightbox-close:hover{\r\n    background: #eee;\r\n}\r\n\r\n.gal-page .gal-lightbox-nav{\r\n    position: fixed;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 46px;\r\n    height: 46px;\r\n    border-radius: 50%;\r\n    background: rgba(255,255,255,0.12);\r\n    border: none;\r\n    color: #fff;\r\n    font-size: 20px;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: background 0.15s ease;\r\n}\r\n\r\n.gal-page .gal-lightbox-nav:hover{\r\n    background: rgba(255,255,255,0.25);\r\n}\r\n\r\n.gal-page .gal-lightbox-prev{ left: 24px; }\r\n.gal-page .gal-lightbox-next{ right: 24px; }\r\n\r\n@media (max-width: 640px){\r\n    .gal-page .gal-lightbox-nav{\r\n        width: 38px;\r\n        height: 38px;\r\n        font-size: 16px;\r\n    }\r\n    .gal-page .gal-lightbox-prev{ left: 10px; }\r\n    .gal-page .gal-lightbox-next{ right: 10px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"gal-page\">\r\n    <div class=\"gal-header\">\r\n        <div class=\"gal-title\">Gallery<\/div>\r\n        <div class=\"gal-subtitle\">A look inside Crown Hospital \u2014 our facility and our community.<\/div>\r\n        <div class=\"gal-tabs\" id=\"gal-tabs\">\r\n            <button type=\"button\" class=\"gal-tab active\" data-filter=\"all\">All<\/button>\r\n            <button type=\"button\" class=\"gal-tab\" data-filter=\"facility\">Facility<\/button>\r\n            <button type=\"button\" class=\"gal-tab\" data-filter=\"events\">Events<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gal-grid\" id=\"gal-grid\">\r\n        <div class=\"gal-empty-state\">Loading gallery\u2026<\/div>\r\n    <\/div>\r\n\r\n    <!-- Lightbox -->\r\n    <div class=\"gal-lightbox-overlay\" id=\"gal-lightbox-overlay\">\r\n        <button type=\"button\" class=\"gal-lightbox-nav gal-lightbox-prev\" id=\"gal-lightbox-prev\">&#8592;<\/button>\r\n        <div class=\"gal-lightbox-inner\">\r\n            <button type=\"button\" class=\"gal-lightbox-close\" id=\"gal-lightbox-close\">&times;<\/button>\r\n            <img decoding=\"async\" class=\"gal-lightbox-img\" id=\"gal-lightbox-img\" src=\"\" alt=\"\">\r\n            <div class=\"gal-lightbox-caption\">\r\n                <span class=\"gal-lightbox-tag\" id=\"gal-lightbox-tag\"><\/span>\r\n                <div class=\"gal-lightbox-title\" id=\"gal-lightbox-title\"><\/div>\r\n                <div class=\"gal-lightbox-desc\" id=\"gal-lightbox-desc\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <button type=\"button\" class=\"gal-lightbox-nav gal-lightbox-next\" id=\"gal-lightbox-next\">&#8594;<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n    const API_URL = 'https:\/\/dashboard.crownhospital.ae';\r\n    const API_KEY = 'crown_api_be60fba42921a42ef84d72cebfa42921';\r\n\r\n    \/\/ TODO: confirm this endpoint with the backend team. Expected contract:\r\n    \/\/ GET {API_URL}\/api\/gallery\r\n    \/\/ Response: array of items, each shaped like:\r\n    \/\/ {\r\n    \/\/   \"id\": 1,\r\n    \/\/   \"title\": \"New ICU Wing\",\r\n    \/\/   \"category\": \"facility\",   \/\/ or \"events\"\r\n    \/\/   \"photo\": \"https:\/\/dashboard.crownhospital.ae\/uploads\/xyz.jpg\",\r\n    \/\/   \"description\": \"Our newly renovated intensive care unit...\",\r\n    \/\/   \"created_at\": \"2026-07-05T07:22:41.000000Z\"\r\n    \/\/ }\r\n    const GALLERY_URL = API_URL + '\/api\/gallery';\r\n\r\n    const FALLBACK_IMAGE = \"https:\/\/images.unsplash.com\/photo-1519494026892-80bbd2d6fd0d?w=1200&q=80\";\r\n\r\n    \/\/ Same markdown-wrapped photo URL workaround used elsewhere on the site.\r\n    function cleanPhotoUrl(url) {\r\n        if (!url) return null;\r\n        const match = url.match(\/^(https?:\\\/\\\/)\\[([^\\]]+)\\]\\([^)]*\\)(\\\/.*)$\/);\r\n        if (match) {\r\n            return match[1] + match[2] + match[3];\r\n        }\r\n        return url;\r\n    }\r\n\r\n    function escapeHtml(str) {\r\n        return (str || '').replace(\/[&<>\"']\/g, function (c) {\r\n            return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '\"': '&quot;', \"'\": '&#39;' })[c];\r\n        });\r\n    }\r\n\r\n    const grid = document.getElementById('gal-grid');\r\n    const tabsEl = document.getElementById('gal-tabs');\r\n\r\n    const lightboxOverlay = document.getElementById('gal-lightbox-overlay');\r\n    const lightboxImg = document.getElementById('gal-lightbox-img');\r\n    const lightboxTag = document.getElementById('gal-lightbox-tag');\r\n    const lightboxTitle = document.getElementById('gal-lightbox-title');\r\n    const lightboxDesc = document.getElementById('gal-lightbox-desc');\r\n    const lightboxClose = document.getElementById('gal-lightbox-close');\r\n    const lightboxPrev = document.getElementById('gal-lightbox-prev');\r\n    const lightboxNext = document.getElementById('gal-lightbox-next');\r\n\r\n    let galleryData = [];\r\n    let filteredData = [];\r\n    let currentFilter = 'all';\r\n    let currentIndex = 0;\r\n\r\n    fetch(GALLERY_URL, {\r\n        headers: {\r\n            'Accept': 'application\/json',\r\n            'X-API-KEY': API_KEY\r\n        }\r\n    })\r\n        .then(res => res.json())\r\n        .then(data => {\r\n            galleryData = Array.isArray(data) ? data : (data.data || []);\r\n            applyFilter('all');\r\n        })\r\n        .catch(err => {\r\n            console.error(\"Error loading gallery:\", err);\r\n            grid.innerHTML = '<div class=\"gal-empty-state\">Unable to load the gallery right now.<\/div>';\r\n        });\r\n\r\n    tabsEl.querySelectorAll('.gal-tab').forEach(tab => {\r\n        tab.addEventListener('click', function () {\r\n            tabsEl.querySelectorAll('.gal-tab').forEach(t => t.classList.remove('active'));\r\n            this.classList.add('active');\r\n            applyFilter(this.dataset.filter);\r\n        });\r\n    });\r\n\r\n    function applyFilter(filter) {\r\n        currentFilter = filter;\r\n        filteredData = filter === 'all'\r\n            ? galleryData\r\n            : galleryData.filter(item => item.category === filter);\r\n        renderGrid();\r\n    }\r\n\r\n    function renderGrid() {\r\n        grid.innerHTML = '';\r\n        if (!filteredData.length) {\r\n            grid.innerHTML = '<div class=\"gal-empty-state\">No photos in this category yet.<\/div>';\r\n            return;\r\n        }\r\n        filteredData.forEach((item, idx) => {\r\n            const el = document.createElement('div');\r\n            el.className = 'gal-item';\r\n            const photo = cleanPhotoUrl(item.photo) || FALLBACK_IMAGE;\r\n            el.innerHTML =\r\n                '<img decoding=\"async\" src=\"' + photo + '\" alt=\"' + escapeHtml(item.title || '') + '\">' +\r\n                '<div class=\"gal-item-overlay\">' +\r\n                    '<span class=\"gal-item-tag\">' + escapeHtml(item.category || '') + '<\/span>' +\r\n                    '<div class=\"gal-item-title\">' + escapeHtml(item.title || '') + '<\/div>' +\r\n                '<\/div>';\r\n            el.addEventListener('click', function () {\r\n                openLightbox(idx);\r\n            });\r\n            grid.appendChild(el);\r\n        });\r\n    }\r\n\r\n    function openLightbox(index) {\r\n        currentIndex = index;\r\n        renderLightbox();\r\n        lightboxOverlay.classList.add('open');\r\n        document.body.style.overflow = 'hidden';\r\n    }\r\n\r\n    function closeLightbox() {\r\n        lightboxOverlay.classList.remove('open');\r\n        document.body.style.overflow = '';\r\n    }\r\n\r\n    function renderLightbox() {\r\n        const item = filteredData[currentIndex];\r\n        if (!item) return;\r\n        lightboxImg.src = cleanPhotoUrl(item.photo) || FALLBACK_IMAGE;\r\n        lightboxImg.alt = item.title || '';\r\n        lightboxTag.textContent = item.category || '';\r\n        lightboxTitle.textContent = item.title || '';\r\n        lightboxDesc.textContent = item.description || '';\r\n    }\r\n\r\n    lightboxClose.addEventListener('click', closeLightbox);\r\n    lightboxOverlay.addEventListener('click', function (e) {\r\n        if (e.target === lightboxOverlay) closeLightbox();\r\n    });\r\n\r\n    lightboxPrev.addEventListener('click', function () {\r\n        currentIndex = (currentIndex - 1 + filteredData.length) % filteredData.length;\r\n        renderLightbox();\r\n    });\r\n    lightboxNext.addEventListener('click', function () {\r\n        currentIndex = (currentIndex + 1) % filteredData.length;\r\n        renderLightbox();\r\n    });\r\n\r\n    document.addEventListener('keydown', function (e) {\r\n        if (!lightboxOverlay.classList.contains('open')) return;\r\n        if (e.key === 'Escape') closeLightbox();\r\n        if (e.key === 'ArrowLeft') lightboxPrev.click();\r\n        if (e.key === 'ArrowRight') lightboxNext.click();\r\n    });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Gallery Gallery A look inside Crown Hospital \u2014 our facility and our community. All Facility Events Loading gallery\u2026 &#8592; [&hellip;]<\/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":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-712","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crownhospital.ae\/hospital\/wp-json\/wp\/v2\/pages\/712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crownhospital.ae\/hospital\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crownhospital.ae\/hospital\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crownhospital.ae\/hospital\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crownhospital.ae\/hospital\/wp-json\/wp\/v2\/comments?post=712"}],"version-history":[{"count":0,"href":"https:\/\/crownhospital.ae\/hospital\/wp-json\/wp\/v2\/pages\/712\/revisions"}],"wp:attachment":[{"href":"https:\/\/crownhospital.ae\/hospital\/wp-json\/wp\/v2\/media?parent=712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}