{"id":662,"date":"2025-12-09T11:28:15","date_gmt":"2025-12-09T11:28:15","guid":{"rendered":"https:\/\/suryansh.brightcodeapp.com\/?page_id=662"},"modified":"2025-12-10T05:13:08","modified_gmt":"2025-12-10T05:13:08","slug":"gallery","status":"publish","type":"page","link":"https:\/\/suryansh.brightcodeapp.com\/index.php\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Gallery Lightbox<\/title>\r\n\r\n <style>\r\n body {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n background: #f5f5f5;\r\n }\r\n\r\n .gallery-section {\r\n padding: 60px 20px;\r\n max-width: 1200px;\r\n margin: auto;\r\n text-align: center;\r\n }\r\n\r\n .gallery-section h2 {\r\n font-size: 52px;\r\n font-family: \"Rajdhani , sans-serif;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n color: #222;\r\n }\r\n\r\n .gallery-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n margin-top: 30px;\r\n }\r\n\r\n .gallery-item {\r\n overflow: hidden;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n }\r\n\r\n .gallery-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: 0.4s ease;\r\n }\r\n\r\n .gallery-item:hover img {\r\n transform: scale(1.1);\r\n filter: brightness(70%);\r\n }\r\n\r\n \/* --- LIGHTBOX STYLING --- *\/\r\n\r\n .lightbox {\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.8);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n }\r\n\r\n .lightbox img {\r\n max-width: 90%;\r\n max-height: 90%;\r\n border-radius: 10px;\r\n box-shadow: 0 0 20px rgba(255,255,255,0.5);\r\n }\r\n\r\n .lightbox:active {\r\n display: none;\r\n }\r\n\r\n \/* Close button *\/\r\n .close-btn {\r\n position: absolute;\r\n top: 20px;\r\n right: 30px;\r\n font-size: 40px;\r\n color: #fff;\r\n cursor: pointer;\r\n font-weight: bold;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"gallery-section\">\r\n <h2>Our Gallery<\/h2>\r\n\r\n <div class=\"gallery-grid\">\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/suryansh.brightcodeapp.com\/wp-content\/uploads\/2025\/12\/Untitled-design-2025-12-09T125000.947.jpg\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/suryansh.brightcodeapp.com\/wp-content\/uploads\/2024\/02\/5-1.jpg\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/suryansh.brightcodeapp.com\/wp-content\/uploads\/2025\/12\/Untitled-design-2025-12-09T103539.542.jpg\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/suryansh.brightcodeapp.com\/wp-content\/uploads\/2025\/12\/Untitled-design-2025-12-09T105537.249.jpg\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/suryansh.brightcodeapp.com\/wp-content\/uploads\/2024\/02\/3-3.jpg\" alt=\"\">\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/suryansh.brightcodeapp.com\/wp-content\/uploads\/2024\/02\/1-2.jpg\" alt=\"\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- LIGHTBOX POPUP -->\r\n <div class=\"lightbox\" id=\"lightbox\">\r\n <span class=\"close-btn\" onclick=\"closeLightbox()\">×<\/span>\r\n <img decoding=\"async\" id=\"lightbox-img\" src=\"\" alt=\"\">\r\n <\/div>\r\n\r\n <script>\r\n const lightbox = document.getElementById(\"lightbox\");\r\n const lightboxImg = document.getElementById(\"lightbox-img\");\r\n const galleryItems = document.querySelectorAll(\".gallery-item img\");\r\n\r\n galleryItems.forEach(img => {\r\n img.addEventListener(\"click\", () => {\r\n lightbox.style.display = \"flex\";\r\n lightboxImg.src = img.src;\r\n });\r\n });\r\n\r\n function closeLightbox() {\r\n lightbox.style.display = \"none\";\r\n }\r\n\r\n \/\/ Close when clicking outside the image\r\n lightbox.addEventListener(\"click\", (e) => {\r\n if (e.target === lightbox) {\r\n lightbox.style.display = \"none\";\r\n }\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\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 Lightbox Our Gallery ×<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-builder.php","meta":{"footnotes":""},"class_list":["post-662","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/suryansh.brightcodeapp.com\/index.php\/wp-json\/wp\/v2\/pages\/662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suryansh.brightcodeapp.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/suryansh.brightcodeapp.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/suryansh.brightcodeapp.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suryansh.brightcodeapp.com\/index.php\/wp-json\/wp\/v2\/comments?post=662"}],"version-history":[{"count":0,"href":"https:\/\/suryansh.brightcodeapp.com\/index.php\/wp-json\/wp\/v2\/pages\/662\/revisions"}],"wp:attachment":[{"href":"https:\/\/suryansh.brightcodeapp.com\/index.php\/wp-json\/wp\/v2\/media?parent=662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}