AETA Community Outreach - Brgy. Tubo Tubo, Dinalupihan, Bataan<\/title>\r\n \r\n \r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n \r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.css\"\/>\r\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick-theme.css\"\/>\r\n \r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n color: #2d3436;\r\n }\r\n \r\n \/* Header Section *\/\r\n .hero-section {\r\n background: linear-gradient(135deg, #1a472a 0%, #2d5a3b 100%);\r\n padding: 80px 0 60px;\r\n text-align: center;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .hero-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('https:\/\/images.unsplash.com\/photo-1593113598332-cd288d649433?w=1920&h=400&fit=crop') center\/cover;\r\n opacity: 0.15;\r\n }\r\n \r\n .hero-title {\r\n font-size: 3rem;\r\n font-weight: 800;\r\n margin-bottom: 15px;\r\n position: relative;\r\n z-index: 1;\r\n animation: fadeInDown 1s ease;\r\n }\r\n \r\n .hero-subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n position: relative;\r\n z-index: 1;\r\n animation: fadeInUp 1s ease;\r\n }\r\n \r\n .community-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.2);\r\n backdrop-filter: blur(10px);\r\n padding: 8px 20px;\r\n border-radius: 50px;\r\n margin-bottom: 20px;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n \/* Gallery Section *\/\r\n .gallery-section {\r\n padding: 60px 0;\r\n }\r\n \r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n \r\n .section-title {\r\n font-size: 2.5rem;\r\n font-weight: 700;\r\n color: #1a472a;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .section-divider {\r\n width: 80px;\r\n height: 4px;\r\n background: linear-gradient(90deg, #FF013C, #00E6F6);\r\n margin: 0 auto 20px;\r\n border-radius: 2px;\r\n }\r\n \r\n .section-subtitle {\r\n color: #666;\r\n font-size: 1.1rem;\r\n }\r\n \r\n \/* Statistics Cards *\/\r\n .stats-section {\r\n padding: 40px 0 60px;\r\n }\r\n \r\n .stat-card {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 30px;\r\n text-align: center;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .stat-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.15);\r\n }\r\n \r\n .stat-number {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n color: #FF013C;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .stat-label {\r\n color: #555;\r\n font-weight: 500;\r\n }\r\n \r\n \/* Image Slider Styles *\/\r\n .image-slider-wrapper {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 30px;\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 40px;\r\n }\r\n \r\n .image-slider {\r\n margin-bottom: 20px;\r\n }\r\n \r\n .slider-item {\r\n padding: 10px;\r\n }\r\n \r\n .slider-item img {\r\n width: 100%;\r\n height: 300px;\r\n object-fit: cover;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n }\r\n \r\n .slider-item img:hover {\r\n transform: scale(1.03);\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.2);\r\n }\r\n \r\n \/* Slick Carousel Customization *\/\r\n .slick-prev, .slick-next {\r\n width: 45px;\r\n height: 45px;\r\n background: linear-gradient(135deg, #FF013C, #FF6B6B);\r\n border-radius: 50%;\r\n z-index: 10;\r\n }\r\n \r\n .slick-prev:hover, .slick-next:hover {\r\n background: linear-gradient(135deg, #00E6F6, #667eea);\r\n }\r\n \r\n .slick-prev:before, .slick-next:before {\r\n font-size: 24px;\r\n }\r\n \r\n .slick-dots li button:before {\r\n font-size: 12px;\r\n color: #FF013C;\r\n }\r\n \r\n .slick-dots li.slick-active button:before {\r\n color: #FF013C;\r\n opacity: 1;\r\n }\r\n \r\n \/* Thumbnail Gallery *\/\r\n .thumbnail-gallery {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n gap: 20px;\r\n margin-top: 40px;\r\n }\r\n \r\n .thumbnail-item {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .thumbnail-item img {\r\n width: 100%;\r\n height: 180px;\r\n object-fit: cover;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .thumbnail-item:hover img {\r\n transform: scale(1.1);\r\n }\r\n \r\n .thumbnail-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(transparent, rgba(0,0,0,0.7));\r\n padding: 10px;\r\n color: white;\r\n font-size: 0.8rem;\r\n transform: translateY(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .thumbnail-item:hover .thumbnail-overlay {\r\n transform: translateY(0);\r\n }\r\n \r\n \/* Lightbox Modal *\/\r\n .lightbox-modal {\r\n display: none;\r\n position: fixed;\r\n z-index: 9999;\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 cursor: pointer;\r\n }\r\n \r\n .lightbox-content {\r\n position: relative;\r\n width: 90%;\r\n max-width: 1200px;\r\n margin: 50px auto;\r\n height: calc(100% - 100px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .lightbox-img {\r\n max-width: 100%;\r\n max-height: 80vh;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n }\r\n \r\n .lightbox-close {\r\n position: absolute;\r\n top: 20px;\r\n right: 40px;\r\n color: white;\r\n font-size: 40px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .lightbox-close:hover {\r\n transform: rotate(90deg);\r\n color: #FF013C;\r\n }\r\n \r\n .lightbox-caption {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 0;\r\n right: 0;\r\n text-align: center;\r\n color: white;\r\n background: rgba(0,0,0,0.7);\r\n padding: 10px;\r\n margin: 0 auto;\r\n width: 90%;\r\n border-radius: 10px;\r\n }\r\n \r\n \/* Footer *\/\r\n .footer {\r\n background: #1a1a2e;\r\n color: white;\r\n padding: 40px 0 20px;\r\n margin-top: 60px;\r\n }\r\n \r\n \/* Animations *\/\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .hero-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .hero-subtitle {\r\n font-size: 1rem;\r\n }\r\n \r\n .section-title {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .slider-item img {\r\n height: 200px;\r\n }\r\n \r\n .thumbnail-gallery {\r\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\r\n }\r\n \r\n .thumbnail-item img {\r\n height: 140px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .hero-title {\r\n font-size: 1.5rem;\r\n }\r\n \r\n .slider-item img {\r\n height: 180px;\r\n }\r\n \r\n .thumbnail-gallery {\r\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"hero-section\">\r\n <div class=\"container\">\r\n <div class=\"community-badge\">\r\n <i class=\"fas fa-hand-holding-heart me-2\"><\/i>\r\n Community Outreach Program\r\n <\/div>\r\n <h1 class=\"hero-title\">Helping the AETA Community<\/h1>\r\n <p class=\"hero-subtitle\">San Ramon Chapter - Brgy Tubo Tubo, Dinalupihan, Bataan<\/p>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <section class=\"gallery-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Community Impact Gallery<\/h2>\r\n <div class=\"section-divider\"><\/div>\r\n <p class=\"section-subtitle\">Documenting our journey of helping the AETA community in Brgy Tobotubo<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"image-slider-wrapper\">\r\n <div class=\"image-slider\">\r\n \r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/Xx5848Dz\/viber-image-2026-04-24-13-43-28-177.jpg\"\" alt=\"Community Help 1\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/Kp62g9c8\/viber-image-2026-04-24-13-44-07-432.jpg\" alt=\"Community Help 2\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/Nnnjz4fp\/viber-image-2026-04-24-13-44-07-740.jpg\" alt=\"Community Help 3\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/B8CZGDF\/viber-image-2026-04-24-13-44-07-792.jpg\" alt=\"Community Help 4\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/7tr9LSqp\/viber-image-2026-04-24-13-44-07-932.jpg\" alt=\"Community Help 5\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/qYktHYk7\/viber-image-2026-04-24-13-44-08-073.jpg\" alt=\"Community Help 6\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/FbMxMsCj\/viber-image-2026-04-24-13-44-08-217.jpg\" alt=\"Community Help 7\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/0RhF2KgG\/viber-image-2026-04-24-13-44-08-323.jpg\" alt=\"Community Help 8\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/CKjXhp58\/viber-image-2026-04-24-13-44-08-595.jpg\" alt=\"Community Help 9\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/9mTybRjz\/viber-image-2026-04-24-13-44-08-790.jpg\" alt=\"Community Help 10\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/ycGrxqF1\/viber-image-2026-04-24-13-44-09-007.jpg\" alt=\"Community Help 11\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/KcnHmX8W\/viber-image-2026-04-24-13-44-09-193.jpg\" alt=\"Community Help 12\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/FbgVfxnt\/viber-image-2026-04-24-13-44-09-390.jpg\" alt=\"Community Help 13\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/KxhfN6Vc\/viber-image-2026-04-24-13-44-09-520.jpg\" alt=\"Community Help 14\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/sJm7Q2Yy\/viber-image-2026-04-24-13-44-09-670.jpg\" alt=\"Community Help 15\">\r\n <\/div>\r\n <div class=\"slider-item\">\r\n <img decoding=\"async\" src=\"https:\/\/i.ibb.co\/DD5xCfJD\/viber-image-2026-04-24-13-44-09-782.jpg\" alt=\"Community Help 16\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"thumbnail-gallery\" id=\"thumbnailGallery\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"stats-section\">\r\n <div class=\"container\">\r\n <div class=\"row justify-content-center\">\r\n <div class=\"col-md-8 text-center\">\r\n <div class=\"stat-card\" style=\"background: linear-gradient(135deg, #1a472a, #2d5a3b); color: white;\">\r\n <h3 style=\"color: white; margin-bottom: 15px;\">Get Involved<\/h3>\r\n <p style=\"color: rgba(255,255,255,0.9); margin-bottom: 25px;\">\r\n Join us in making a difference in the AETA community of Brgy Tobutubo.\r\n Your support can change lives.\r\n <\/p>\r\n <a href=\"#\" class=\"btn-esg\" style=\"display: inline-block; background: white; color: #1a472a; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600;\">\r\n <i class=\"fas fa-hand-holding-heart me-2\"><\/i>\r\n Support Now\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <div id=\"lightbox\" class=\"lightbox-modal\">\r\n <span class=\"lightbox-close\">×<\/span>\r\n <div class=\"lightbox-content\">\r\n <img decoding=\"async\" class=\"lightbox-img\" id=\"lightbox-img\" src=\"\" alt=\"\">\r\n <div class=\"lightbox-caption\" id=\"lightbox-caption\"><\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <footer class=\"footer\">\r\n <div class=\"container\">\r\n <div class=\"row\">\r\n <div class=\"col-md-6 text-center text-md-start\">\r\n <h5><i class=\"fas fa-heart text-danger me-2\"><\/i>AETA Community Outreach<\/h5>\r\n <p class=\"mt-3\">Barangay Tobu Tubo, Dinalupihan, Bataan, Philippines<\/p>\r\n <\/div>\r\n <div class=\"col-md-6 text-center text-md-end\">\r\n <p>© 2026 AETA Community Support. All rights reserved.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n \r\n \r\n <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\r\n <script type=\"text\/javascript\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/slick-carousel@1.8.1\/slick\/slick.min.js\"><\/script>\r\n \r\n <script>\r\n $(document).ready(function(){\r\n \/\/ Initialize Slick Slider\r\n $('.image-slider').slick({\r\n slidesToShow: 4,\r\n slidesToScroll: 1,\r\n autoplay: true,\r\n autoplaySpeed: 3000,\r\n dots: true,\r\n arrows: true,\r\n responsive: [\r\n {\r\n breakpoint: 1024,\r\n settings: {\r\n slidesToShow: 3,\r\n slidesToScroll: 1\r\n }\r\n },\r\n {\r\n breakpoint: 768,\r\n settings: {\r\n slidesToShow: 2,\r\n slidesToScroll: 1\r\n }\r\n },\r\n {\r\n breakpoint: 480,\r\n settings: {\r\n slidesToShow: 1,\r\n slidesToScroll: 1\r\n }\r\n }\r\n ]\r\n });\r\n \r\n \/\/ Generate Thumbnail Gallery\r\n const images = [\r\n \"https:\/\/i.ibb.co\/Xx5848Dz\/viber-image-2026-04-24-13-43-28-177.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/Kp62g9c8\/viber-image-2026-04-24-13-44-07-432.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/Nnnjz4fp\/viber-image-2026-04-24-13-44-07-740.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/B8CZGDF\/viber-image-2026-04-24-13-44-07-792.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/7tr9LSqp\/viber-image-2026-04-24-13-44-07-932.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/qYktHYk7\/viber-image-2026-04-24-13-44-08-073.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/FbMxMsCj\/viber-image-2026-04-24-13-44-08-217.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/0RhF2KgG\/viber-image-2026-04-24-13-44-08-323.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/CKjXhp58\/viber-image-2026-04-24-13-44-08-595.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/9mTybRjz\/viber-image-2026-04-24-13-44-08-790.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/ycGrxqF1\/viber-image-2026-04-24-13-44-09-007.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/KcnHmX8W\/viber-image-2026-04-24-13-44-09-193.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/FbgVfxnt\/viber-image-2026-04-24-13-44-09-390.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/KxhfN6Vc\/viber-image-2026-04-24-13-44-09-520.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/sJm7Q2Yy\/viber-image-2026-04-24-13-44-09-670.jpg?w=400&h=300&fit=crop\",\r\n \"https:\/\/i.ibb.co\/DD5xCfJD\/viber-image-2026-04-24-13-44-09-782.jpg?w=400&h=300&fit=crop\"\r\n ];\r\n \r\n const captions = [\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\",\r\n \"Food Distribution Program\"\r\n ];\r\n \r\n const gallery = document.getElementById('thumbnailGallery');\r\n \r\n images.forEach((img, index) => {\r\n const thumbnail = document.createElement('div');\r\n thumbnail.className = 'thumbnail-item';\r\n thumbnail.innerHTML = `\r\n <img decoding=\"async\" src=\"${img}\" alt=\"${captions[index]}\">\r\n <div class=\"thumbnail-overlay\">\r\n <i class=\"fas fa-camera me-1\"><\/i> ${captions[index]}\r\n <\/div>\r\n `;\r\n thumbnail.addEventListener('click', () => openLightbox(img, captions[index]));\r\n gallery.appendChild(thumbnail);\r\n });\r\n \r\n \/\/ Lightbox Functionality\r\n const lightbox = document.getElementById('lightbox');\r\n const lightboxImg = document.getElementById('lightbox-img');\r\n const lightboxCaption = document.getElementById('lightbox-caption');\r\n const closeBtn = document.querySelector('.lightbox-close');\r\n \r\n function openLightbox(src, caption) {\r\n lightbox.style.display = 'block';\r\n lightboxImg.src = src;\r\n lightboxCaption.textContent = caption;\r\n document.body.style.overflow = 'hidden';\r\n }\r\n \r\n function closeLightbox() {\r\n lightbox.style.display = 'none';\r\n document.body.style.overflow = '';\r\n }\r\n \r\n closeBtn.addEventListener('click', closeLightbox);\r\n lightbox.addEventListener('click', function(e) {\r\n if (e.target === lightbox) {\r\n closeLightbox();\r\n }\r\n });\r\n \r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && lightbox.style.display === 'block') {\r\n closeLightbox();\r\n }\r\n });\r\n \r\n \/\/ Also make slider images clickable\r\n $('.slider-item img').click(function() {\r\n const src = $(this).attr('src');\r\n const alt = $(this).attr('alt');\r\n openLightbox(src, alt);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Society AETA Community Outreach – Brgy. Tubo Tubo, Dinalupihan, Bataan Community Outreach Program Helping the AETA Community San Ramon Chapter – Brgy Tubo Tubo, Dinalupihan, Bataan Community Impact Gallery Documenting our journey of helping the AETA community in Brgy Tobotubo<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"class_list":["post-6737","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","vertical_spacing_source":"custom","content_area_spacing":"none","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/turbomek.com\/index.php?rest_route=\/wp\/v2\/pages\/6737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/turbomek.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/turbomek.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/turbomek.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/turbomek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6737"}],"version-history":[{"count":55,"href":"https:\/\/turbomek.com\/index.php?rest_route=\/wp\/v2\/pages\/6737\/revisions"}],"predecessor-version":[{"id":6816,"href":"https:\/\/turbomek.com\/index.php?rest_route=\/wp\/v2\/pages\/6737\/revisions\/6816"}],"wp:attachment":[{"href":"https:\/\/turbomek.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}