{"id":446,"date":"2025-09-25T07:18:31","date_gmt":"2025-09-25T07:18:31","guid":{"rendered":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/?page_id=446"},"modified":"2026-06-13T20:47:18","modified_gmt":"2026-06-13T20:47:18","slug":"gallery","status":"publish","type":"page","link":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"446\" class=\"elementor elementor-446\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea7b6a8 e-con-full e-flex e-con e-parent\" data-id=\"ea7b6a8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9a02dc6 elementor-widget elementor-widget-goarch_empty_space\" data-id=\"9a02dc6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"goarch_empty_space.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"goarch-empty-space\" aria-hidden=\"true\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-18a23104 e-flex e-con-boxed e-con e-parent\" data-id=\"18a23104\" 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<div class=\"elementor-element elementor-element-8e9aac e-con-full e-flex e-con e-child\" data-id=\"8e9aac\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-430c5916 elementor-widget elementor-widget-heading\" data-id=\"430c5916\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h5 class=\"elementor-heading-title elementor-size-default\">Gallery<\/h5>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1aa71bc1 elementor-widget__width-auto elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"1aa71bc1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f004f8b elementor-widget elementor-widget-heading\" data-id=\"5f004f8b\" 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\">View All Gallery<\/h2>\t\t\t\t<\/div>\n\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-378b5a9c e-flex e-con-boxed e-con e-parent\" data-id=\"378b5a9c\" 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<div class=\"elementor-element elementor-element-5fe8cc5f e-con-full e-flex e-con e-child\" data-id=\"5fe8cc5f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8ac3c4 elementor-widget elementor-widget-goarch_gallery\" data-id=\"e8ac3c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"goarch_gallery.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t    <style>\r\n    .gallery-demo2 {\r\n        display: grid;\r\n        gap: 1rem;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .grid-cols-2 {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n\r\n    .grid-cols-3 {\r\n        grid-template-columns: repeat(3, 1fr);\r\n    }\r\n\r\n    .grid-cols-4 {\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n\r\n    .gallery-item {\r\n        position: relative;\r\n        border-radius: 0px;\r\n        overflow: hidden;\r\n        cursor: pointer;\r\n        height: 480px;\r\n        transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n    }\r\n\r\n    .gallery-item:hover {\r\n        transform: scale(1.01);\r\n        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    .gallery-image {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        display: block;\r\n        transition: transform 0.3s ease;\r\n    }\r\n\r\n    .gallery-item:hover .gallery-image {\r\n        transform: scale(1.1);\r\n    }\r\n\r\n    \/* Lightbox Styles *\/\r\n    .lightbox-overlay-demo2 {\r\n        display: none;\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background: rgba(0, 0, 0, 0.95);\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 9999;\r\n        opacity: 0;\r\n        transition: opacity 0.3s ease;\r\n    }\r\n\r\n    .lightbox-overlay-demo2.active {\r\n        display: flex;\r\n        opacity: 1;\r\n    }\r\n\r\n    .lightbox-content {\r\n        position: relative;\r\n        max-width: 90%;\r\n        max-height: 90%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n    }\r\n\r\n    .lightbox-image {\r\n        max-width: 100%;\r\n        max-height: 90vh;\r\n        object-fit: contain;\r\n        border-radius: 8px;\r\n    }\r\n\r\n    .lightbox-nav {\r\n        position: absolute;\r\n        top: 50%;\r\n        transform: translateY(-50%);\r\n        background: rgba(255, 255, 255, 0.1);\r\n        border: none;\r\n        color: white;\r\n        width: 50px;\r\n        height: 50px;\r\n        border-radius: 50%;\r\n        font-size: 24px;\r\n        cursor: pointer;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: background 0.3s ease;\r\n        backdrop-filter: blur(10px);\r\n    }\r\n\r\n    .lightbox-nav:hover {\r\n        background: rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .lightbox-prev {\r\n        left: 20px;\r\n    }\r\n\r\n    .lightbox-next {\r\n        right: 20px;\r\n    }\r\n\r\n    .lightbox-close {\r\n        position: absolute;\r\n        top: 20px;\r\n        right: 20px;\r\n        background: rgba(255, 255, 255, 0.1);\r\n        border: none;\r\n        color: white;\r\n        width: 40px;\r\n        height: 40px;\r\n        border-radius: 50%;\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.3s ease;\r\n        backdrop-filter: blur(10px);\r\n    }\r\n\r\n    .lightbox-close:hover {\r\n        background: rgba(255, 255, 255, 0.2);\r\n    }\r\n\r\n    .lightbox-counter {\r\n        position: absolute;\r\n        bottom: 20px;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        color: white;\r\n        font-size: 16px;\r\n        background: rgba(0, 0, 0, 0.5);\r\n        padding: 5px 15px;\r\n        border-radius: 20px;\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 1024px) {\r\n        .grid-cols-4 {\r\n            grid-template-columns: repeat(3, 1fr);\r\n        }\r\n        \r\n        .gallery-item {\r\n            height: 432px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .grid-cols-3,\r\n        .grid-cols-4 {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n        \r\n        .gallery-item {\r\n            height: 384px;\r\n        }\r\n        \r\n        .lightbox-nav {\r\n            width: 40px;\r\n            height: 40px;\r\n            font-size: 20px;\r\n        }\r\n        \r\n        .lightbox-prev {\r\n            left: 10px;\r\n        }\r\n        \r\n        .lightbox-next {\r\n            right: 10px;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .grid-cols-2,\r\n        .grid-cols-3,\r\n        .grid-cols-4 {\r\n            grid-template-columns: 1fr;\r\n        }\r\n        \r\n        .gallery-item {\r\n            height: 336px;\r\n        }\r\n    }\r\n    <\/style>\r\n\r\n    <div class=\"gallery-demo2 grid-cols-3\">\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"0\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-37.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-37.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"1\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-38.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-38.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"2\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-39.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-39.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"3\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-40.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-40.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"4\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-41.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-41.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"5\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-42.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-42.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"6\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-43.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-43.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"7\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-44.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-44.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n                    <div class=\"gallery-item\" \r\n                 data-index=\"8\" \r\n                 data-src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-45.png\">\r\n                <img decoding=\"async\" src=\"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-content\/uploads\/2025\/09\/Rectangle-45.png\" \r\n                     alt=\"Architecture Build\" \r\n                     class=\"gallery-image\">\r\n            <\/div>\r\n            <\/div>\r\n\r\n    <!-- Lightbox -->\r\n    <div class=\"lightbox-overlay-demo2\">\r\n        <button class=\"lightbox-close\">&times;<\/button>\r\n        <button class=\"lightbox-nav lightbox-prev\">&#10094;<\/button>\r\n        <div class=\"lightbox-content\">\r\n            <img decoding=\"async\" src=\"\" alt=\"\" class=\"lightbox-image\">\r\n            <div class=\"lightbox-counter\"><\/div>\r\n        <\/div>\r\n        <button class=\"lightbox-nav lightbox-next\">&#10095;<\/button>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n        const galleryItems = document.querySelectorAll('.gallery-demo2 .gallery-item');\r\n        const lightbox = document.querySelector('.lightbox-overlay-demo2');\r\n        const lightboxImage = lightbox.querySelector('.lightbox-image');\r\n        const lightboxClose = lightbox.querySelector('.lightbox-close');\r\n        const lightboxPrev = lightbox.querySelector('.lightbox-prev');\r\n        const lightboxNext = lightbox.querySelector('.lightbox-next');\r\n        const lightboxCounter = lightbox.querySelector('.lightbox-counter');\r\n        \r\n        let currentIndex = 0;\r\n        const totalImages = galleryItems.length;\r\n        \r\n        \/\/ Open lightbox\r\n        galleryItems.forEach((item, index) => {\r\n            item.addEventListener('click', function() {\r\n                currentIndex = parseInt(this.getAttribute('data-index'));\r\n                openLightbox(currentIndex);\r\n            });\r\n        });\r\n        \r\n        function openLightbox(index) {\r\n            const imageSrc = galleryItems[index].getAttribute('data-src');\r\n            lightboxImage.src = imageSrc;\r\n            updateCounter();\r\n            lightbox.classList.add('active');\r\n            document.body.style.overflow = 'hidden';\r\n        }\r\n        \r\n        function closeLightbox() {\r\n            lightbox.classList.remove('active');\r\n            document.body.style.overflow = '';\r\n            setTimeout(() => {\r\n                lightboxImage.src = '';\r\n            }, 300);\r\n        }\r\n        \r\n        function navigate(direction) {\r\n            if (direction === 'next') {\r\n                currentIndex = (currentIndex + 1) % totalImages;\r\n            } else {\r\n                currentIndex = (currentIndex - 1 + totalImages) % totalImages;\r\n            }\r\n            openLightbox(currentIndex);\r\n        }\r\n        \r\n        function updateCounter() {\r\n            lightboxCounter.textContent = `${currentIndex + 1} \/ ${totalImages}`;\r\n        }\r\n        \r\n        \/\/ Event listeners\r\n        lightboxClose.addEventListener('click', closeLightbox);\r\n        lightboxPrev.addEventListener('click', () => navigate('prev'));\r\n        lightboxNext.addEventListener('click', () => navigate('next'));\r\n        \r\n        \/\/ Keyboard navigation\r\n        document.addEventListener('keydown', function(e) {\r\n            if (!lightbox.classList.contains('active')) return;\r\n            \r\n            switch(e.key) {\r\n                case 'Escape':\r\n                    closeLightbox();\r\n                    break;\r\n                case 'ArrowLeft':\r\n                    navigate('prev');\r\n                    break;\r\n                case 'ArrowRight':\r\n                    navigate('next');\r\n                    break;\r\n            }\r\n        });\r\n        \r\n        \/\/ Close lightbox when clicking on overlay (but not on content)\r\n        lightbox.addEventListener('click', function(e) {\r\n            if (e.target === lightbox) {\r\n                closeLightbox();\r\n            }\r\n        });\r\n        \r\n        \/\/ Preload adjacent images for smoother navigation\r\n        function preloadAdjacentImages() {\r\n            const prevIndex = (currentIndex - 1 + totalImages) % totalImages;\r\n            const nextIndex = (currentIndex + 1) % totalImages;\r\n            \r\n            const preloadPrev = new Image();\r\n            preloadPrev.src = galleryItems[prevIndex].getAttribute('data-src');\r\n            \r\n            const preloadNext = new Image();\r\n            preloadNext.src = galleryItems[nextIndex].getAttribute('data-src');\r\n        }\r\n        \r\n        \/\/ Update preload when lightbox opens\r\n        lightbox.addEventListener('transitionend', function() {\r\n            if (lightbox.classList.contains('active')) {\r\n                preloadAdjacentImages();\r\n            }\r\n        });\r\n    });\r\n    <\/script>\r\n    \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>Gallery View All Gallery &times; &#10094; &#10095;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-446","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/pages\/446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/comments?post=446"}],"version-history":[{"count":73,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/pages\/446\/revisions"}],"predecessor-version":[{"id":1612,"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/pages\/446\/revisions\/1612"}],"wp:attachment":[{"href":"https:\/\/theblackpearlspro.com\/goarch\/goarch-demo-1\/wp-json\/wp\/v2\/media?parent=446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}