Gallery – ISPF Programs (With Photo Viewer)<\/title><\/p>\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: #f8f9fa;\n line-height: 1.6;\n }<\/p>\n<p> \/* Navigation *\/\n .nav {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 20px 0;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }<\/p>\n<p> .nav-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }<\/p>\n<p> .nav h2 {\n color: white;\n font-size: 1.8rem;\n }<\/p>\n<p> .nav a {\n color: white;\n text-decoration: none;\n margin-left: 30px;\n font-weight: 500;\n transition: opacity 0.3s;\n }<\/p>\n<p> .nav a:hover {\n opacity: 0.8;\n }<\/p>\n<p> \/* Main Container *\/\n .main-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 60px 20px;\n }<\/p>\n<p> \/* Section Styles *\/\n .gallery-section {\n margin-bottom: 80px;\n }<\/p>\n<p> .section-header {\n display: flex;\n align-items: center;\n margin-bottom: 30px;\n padding-bottom: 15px;\n border-bottom: 3px solid #667eea;\n }<\/p>\n<p> .section-icon {\n font-size: 3rem;\n margin-right: 20px;\n }<\/p>\n<p> .section-header h2 {\n font-size: 2rem;\n color: #2c3e50;\n }<\/p>\n<p> .section-description {\n color: #666;\n margin-bottom: 30px;\n font-size: 1.1rem;\n line-height: 1.8;\n }<\/p>\n<p> \/* Photo Grid *\/\n .photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n }<\/p>\n<p> .photo-item {\n position: relative;\n overflow: hidden;\n border-radius: 12px;\n cursor: pointer;\n height: 250px;\n background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);\n transition: transform 0.3s ease;\n }<\/p>\n<p> .photo-item:hover {\n transform: scale(1.05);\n }<\/p>\n<p> .photo-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }<\/p>\n<p> .photo-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n opacity: 0.3;\n }<\/p>\n<p> .photo-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\n color: white;\n padding: 15px;\n transform: translateY(100%);\n transition: transform 0.3s ease;\n }<\/p>\n<p> .photo-item:hover .photo-overlay {\n transform: translateY(0);\n }<\/p>\n<p> \/* Modal\/Lightbox *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n animation: fadeIn 0.3s;\n }<\/p>\n<p> .modal.active {\n display: flex;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }<\/p>\n<p> .modal-content {\n max-width: 90%;\n max-height: 90%;\n position: relative;\n }<\/p>\n<p> .modal-content img {\n max-width: 100%;\n max-height: 90vh;\n border-radius: 8px;\n }<\/p>\n<p> .close-modal {\n position: absolute;\n top: 20px;\n right: 40px;\n color: white;\n font-size: 40px;\n font-weight: bold;\n cursor: pointer;\n z-index: 1001;\n transition: color 0.3s;\n }<\/p>\n<p> .close-modal:hover {\n color: #667eea;\n }<\/p>\n<p> .modal-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.2);\n color: white;\n font-size: 40px;\n padding: 20px;\n cursor: pointer;\n border-radius: 8px;\n transition: background 0.3s;\n }<\/p>\n<p> .modal-nav:hover {\n background: rgba(255, 255, 255, 0.3);\n }<\/p>\n<p> .modal-prev {\n left: 20px;\n }<\/p>\n<p> .modal-next {\n right: 20px;\n }<\/p>\n<p> .modal-caption {\n color: white;\n text-align: center;\n padding: 15px;\n font-size: 1.2rem;\n }<\/p>\n<p> \/* Load More Button *\/\n .load-more-container {\n text-align: center;\n margin-top: 30px;\n }<\/p>\n<p> .load-more-btn {\n display: inline-block;\n padding: 12px 30px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.3s, box-shadow 0.3s;\n }<\/p>\n<p> .load-more-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }<\/p>\n<p> \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-container {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .nav a {\n margin: 10px 0 0 0;\n }<\/p>\n<p> .section-header {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .section-icon {\n margin-right: 0;\n margin-bottom: 10px;\n }<\/p>\n<p> .photo-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .modal-nav {\n font-size: 30px;\n padding: 15px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><br \/>\n <\/p>\n<nav class=\"nav\">\n<div class=\"nav-container\">\n<h2>ISPF Gallery<\/h2>\n<div>\n <a href=\"#science\">Science<\/a><br \/>\n <a href=\"#maths\">Maths<\/a><br \/>\n <a href=\"#training\">Training<\/a><br \/>\n <a href=\"#clubs\">STEM Clubs<\/a><br \/>\n <a href=\"#robotics\">Robotics<\/a><br \/>\n <a href=\"#coding\">Coding<\/a><br \/>\n <a href=\"#astronomy\">Astronomy<\/a><br \/>\n <a href=\"#awards\">Awards<\/a><br \/>\n <a href=\"#fairs\">Fairs<\/a>\n <\/div>\n<\/p><\/div>\n<\/nav>\n<p> <\/p>\n<div class=\"main-container\">\n<p> <\/p>\n<section id=\"science\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udd2c<\/span><\/p>\n<h2>Experiential Science Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Hands-on science experiments and activities that bring complex concepts to life. Students engage in practical learning experiences that foster curiosity, scientific thinking, and a deep understanding of natural phenomena.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('science', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udd2c<\/div>\n<div class=\"photo-overlay\">\n<p>Chemistry Experiments<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('science', 1)\">\n<div class=\"photo-placeholder\">\ud83e\uddea<\/div>\n<div class=\"photo-overlay\">\n<p>Physics Demonstrations<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('science', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udd2d<\/div>\n<div class=\"photo-overlay\">\n<p>Biology Activities<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('science', 3)\">\n<div class=\"photo-placeholder\">\u2697\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>Lab Work<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (24)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"maths\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udcd0<\/span><\/p>\n<h2>Experiential Maths Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Interactive mathematics learning through TACtivities. Making abstract concepts tangible through hands-on manipulatives, real-world problem-solving, and collaborative learning experiences.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('maths', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udcca<\/div>\n<div class=\"photo-overlay\">\n<p>Geometry Activities<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('maths', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udccf<\/div>\n<div class=\"photo-overlay\">\n<p>Algebra Manipulatives<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('maths', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udd22<\/div>\n<div class=\"photo-overlay\">\n<p>Number Games<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('maths', 3)\">\n<div class=\"photo-placeholder\">\ud83d\udcc8<\/div>\n<div class=\"photo-overlay\">\n<p>Data Visualization<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (18)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"training\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udc68\u200d\ud83c\udfeb<\/span><\/p>\n<h2>Teacher Training<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Empowering educators with inquiry-based pedagogy and hands-on teaching methodologies. Professional development programs that transform teaching practices and enhance classroom engagement.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('training', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udcda<\/div>\n<div class=\"photo-overlay\">\n<p>Workshop Sessions<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('training', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udc65<\/div>\n<div class=\"photo-overlay\">\n<p>Collaborative Learning<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('training', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udf93<\/div>\n<div class=\"photo-overlay\">\n<p>Certification Programs<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('training', 3)\">\n<div class=\"photo-placeholder\">\ud83d\udca1<\/div>\n<div class=\"photo-overlay\">\n<p>Innovation Sessions<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (32)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"clubs\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83c\udf1f<\/span><\/p>\n<h2>STEM Clubs<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Collaborative learning spaces where students explore science, technology, engineering, and mathematics through projects, teamwork, and peer mentorship.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('clubs', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udd2c<\/div>\n<div class=\"photo-overlay\">\n<p>Club Activities<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('clubs', 1)\">\n<div class=\"photo-placeholder\">\ud83e\udd1d<\/div>\n<div class=\"photo-overlay\">\n<p>Team Projects<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('clubs', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udfa8<\/div>\n<div class=\"photo-overlay\">\n<p>Creative Challenges<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('clubs', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udfc6<\/div>\n<div class=\"photo-overlay\">\n<p>Competitions<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (28)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"robotics\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83e\udd16<\/span><\/p>\n<h2>Robotics Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Building and programming robots to develop computational thinking, engineering skills, and creative problem-solving abilities in the next generation of innovators.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('robotics', 0)\">\n<div class=\"photo-placeholder\">\ud83e\udd16<\/div>\n<div class=\"photo-overlay\">\n<p>Robot Building<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('robotics', 1)\">\n<div class=\"photo-placeholder\">\u2699\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>Mechanical Design<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('robotics', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udd0c<\/div>\n<div class=\"photo-overlay\">\n<p>Electronics Workshop<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('robotics', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udfae<\/div>\n<div class=\"photo-overlay\">\n<p>Programming Robots<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (36)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"coding\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udcbb<\/span><\/p>\n<h2>Coding Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Introduction to programming and computational thinking, equipping students with essential 21st-century digital skills through block-based and text-based coding.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('coding', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udcbb<\/div>\n<div class=\"photo-overlay\">\n<p>Coding Workshops<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('coding', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udda5\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>App Development<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('coding', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udfae<\/div>\n<div class=\"photo-overlay\">\n<p>Game Design<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('coding', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udf10<\/div>\n<div class=\"photo-overlay\">\n<p>Web Development<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (42)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"astronomy\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udd2d<\/span><\/p>\n<h2>Astronomy Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Exploring the wonders of the universe through stargazing, telescope observations, planetarium visits, and celestial science activities that inspire cosmic curiosity.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udd2d<\/div>\n<div class=\"photo-overlay\">\n<p>Telescope Observations<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 1)\">\n<div class=\"photo-placeholder\">\ud83c\udf19<\/div>\n<div class=\"photo-overlay\">\n<p>Moon Watching<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udf0c<\/div>\n<div class=\"photo-overlay\">\n<p>Stargazing Events<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 3)\">\n<div class=\"photo-placeholder\">\ud83e\ude90<\/div>\n<div class=\"photo-overlay\">\n<p>Planetary Studies<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (22)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"awards\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83c\udfc6<\/span><\/p>\n<h2>Raman Award<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Celebrating excellence in science and innovation. Recognizing outstanding student achievements, research contributions, and innovative projects that advance scientific knowledge.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('awards', 0)\">\n<div class=\"photo-placeholder\">\ud83c\udfc6<\/div>\n<div class=\"photo-overlay\">\n<p>Award Ceremony<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('awards', 1)\">\n<div class=\"photo-placeholder\">\ud83c\udf96\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>Winners<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('awards', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udf1f<\/div>\n<div class=\"photo-overlay\">\n<p>Student Projects<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('awards', 3)\">\n<div class=\"photo-placeholder\">\ud83d\udcdc<\/div>\n<div class=\"photo-overlay\">\n<p>Recognition<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (16)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"fairs\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83c\udfaa<\/span><\/p>\n<h2>STEM Fairs<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Large-scale exhibitions where students showcase innovative projects, experiments, and research to the wider community. A celebration of creativity, science, and innovation.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('fairs', 0)\">\n<div class=\"photo-placeholder\">\ud83c\udfaa<\/div>\n<div class=\"photo-overlay\">\n<p>Fair Exhibition<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('fairs', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udd2c<\/div>\n<div class=\"photo-overlay\">\n<p>Project Displays<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('fairs', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udc65<\/div>\n<div class=\"photo-overlay\">\n<p>Student Presentations<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('fairs', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udfa8<\/div>\n<div class=\"photo-overlay\">\n<p>Interactive Exhibits<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (48)<\/button>\n <\/div>\n<\/section><\/div>\n<p> <\/p>\n<div id=\"imageModal\" class=\"modal\">\n <span class=\"close-modal\" onclick=\"closeModal()\">×<\/span><\/p>\n<div class=\"modal-nav modal-prev\" onclick=\"changeImage(-1)\">❮<\/div>\n<div class=\"modal-content\">\n <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\"><\/p>\n<div class=\"modal-caption\" id=\"modalCaption\"><\/div>\n<\/p><\/div>\n<div class=\"modal-nav modal-next\" onclick=\"changeImage(1)\">❯<\/div>\n<\/p><\/div>\n<p> <script>\n let currentSection = '';\n let currentIndex = 0;<\/p>\n<p> function openModal(section, index) {\n currentSection = section;\n currentIndex = index;\n document.getElementById('imageModal').classList.add('active');\n \/\/ In a real implementation, you would load actual image here\n document.getElementById('modalCaption').textContent = `${section} - Image ${index + 1}`;\n }<\/p>\n<p> function closeModal() {\n document.getElementById('imageModal').classList.remove('active');\n }<\/p>\n<p> function changeImage(direction) {\n currentIndex += direction;\n \/\/ Add logic here to handle image navigation\n document.getElementById('modalCaption').textContent = `${currentSection} - Image ${currentIndex + 1}`;\n }<\/p>\n<p> \/\/ Close modal when clicking outside the image\n document.getElementById('imageModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeModal();\n }\n });<\/p>\n<p> \/\/ Keyboard navigation\n document.addEventListener('keydown', function(e) {\n const modal = document.getElementById('imageModal');\n if (modal.classList.contains('active')) {\n if (e.key === 'Escape') closeModal();\n if (e.key === 'ArrowLeft') changeImage(-1);\n if (e.key === 'ArrowRight') changeImage(1);\n }\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gallery – ISPF Programs (With Photo Viewer) ISPF Gallery Science Maths Training STEM Clubs Robotics Coding Astronomy Awards Fairs \ud83d\udd2c Experiential Science Sessions Hands-on science experiments and activities that bring complex concepts to life. Students engage in practical learning experiences that foster curiosity, scientific thinking, and a deep understanding of natural phenomena. \ud83d\udd2c Chemistry Experiments […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-356","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":2,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":358,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts\/356\/revisions\/358"}],"wp:attachment":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":356,"date":"2025-11-10T22:48:31","date_gmt":"2025-11-10T17:18:31","guid":{"rendered":"https:\/\/www.ispf.ngo\/?p=356"},"modified":"2025-11-10T22:53:09","modified_gmt":"2025-11-10T17:23:09","slug":"356","status":"publish","type":"post","link":"https:\/\/www.ispf.ngo\/index.php\/2025\/11\/10\/356\/","title":{"rendered":""},"content":{"rendered":"

\n
\n
\n
\n
\n Gallery – ISPF Programs (With Photo Viewer)<\/title><\/p>\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background: #f8f9fa;\n line-height: 1.6;\n }<\/p>\n<p> \/* Navigation *\/\n .nav {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 20px 0;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n }<\/p>\n<p> .nav-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 0 20px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }<\/p>\n<p> .nav h2 {\n color: white;\n font-size: 1.8rem;\n }<\/p>\n<p> .nav a {\n color: white;\n text-decoration: none;\n margin-left: 30px;\n font-weight: 500;\n transition: opacity 0.3s;\n }<\/p>\n<p> .nav a:hover {\n opacity: 0.8;\n }<\/p>\n<p> \/* Main Container *\/\n .main-container {\n max-width: 1400px;\n margin: 0 auto;\n padding: 60px 20px;\n }<\/p>\n<p> \/* Section Styles *\/\n .gallery-section {\n margin-bottom: 80px;\n }<\/p>\n<p> .section-header {\n display: flex;\n align-items: center;\n margin-bottom: 30px;\n padding-bottom: 15px;\n border-bottom: 3px solid #667eea;\n }<\/p>\n<p> .section-icon {\n font-size: 3rem;\n margin-right: 20px;\n }<\/p>\n<p> .section-header h2 {\n font-size: 2rem;\n color: #2c3e50;\n }<\/p>\n<p> .section-description {\n color: #666;\n margin-bottom: 30px;\n font-size: 1.1rem;\n line-height: 1.8;\n }<\/p>\n<p> \/* Photo Grid *\/\n .photo-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n }<\/p>\n<p> .photo-item {\n position: relative;\n overflow: hidden;\n border-radius: 12px;\n cursor: pointer;\n height: 250px;\n background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);\n transition: transform 0.3s ease;\n }<\/p>\n<p> .photo-item:hover {\n transform: scale(1.05);\n }<\/p>\n<p> .photo-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }<\/p>\n<p> .photo-placeholder {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n opacity: 0.3;\n }<\/p>\n<p> .photo-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\n color: white;\n padding: 15px;\n transform: translateY(100%);\n transition: transform 0.3s ease;\n }<\/p>\n<p> .photo-item:hover .photo-overlay {\n transform: translateY(0);\n }<\/p>\n<p> \/* Modal\/Lightbox *\/\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n animation: fadeIn 0.3s;\n }<\/p>\n<p> .modal.active {\n display: flex;\n align-items: center;\n justify-content: center;\n }<\/p>\n<p> @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }<\/p>\n<p> .modal-content {\n max-width: 90%;\n max-height: 90%;\n position: relative;\n }<\/p>\n<p> .modal-content img {\n max-width: 100%;\n max-height: 90vh;\n border-radius: 8px;\n }<\/p>\n<p> .close-modal {\n position: absolute;\n top: 20px;\n right: 40px;\n color: white;\n font-size: 40px;\n font-weight: bold;\n cursor: pointer;\n z-index: 1001;\n transition: color 0.3s;\n }<\/p>\n<p> .close-modal:hover {\n color: #667eea;\n }<\/p>\n<p> .modal-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.2);\n color: white;\n font-size: 40px;\n padding: 20px;\n cursor: pointer;\n border-radius: 8px;\n transition: background 0.3s;\n }<\/p>\n<p> .modal-nav:hover {\n background: rgba(255, 255, 255, 0.3);\n }<\/p>\n<p> .modal-prev {\n left: 20px;\n }<\/p>\n<p> .modal-next {\n right: 20px;\n }<\/p>\n<p> .modal-caption {\n color: white;\n text-align: center;\n padding: 15px;\n font-size: 1.2rem;\n }<\/p>\n<p> \/* Load More Button *\/\n .load-more-container {\n text-align: center;\n margin-top: 30px;\n }<\/p>\n<p> .load-more-btn {\n display: inline-block;\n padding: 12px 30px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 25px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: transform 0.3s, box-shadow 0.3s;\n }<\/p>\n<p> .load-more-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }<\/p>\n<p> \/* Responsive *\/\n @media (max-width: 768px) {\n .nav-container {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .nav a {\n margin: 10px 0 0 0;\n }<\/p>\n<p> .section-header {\n flex-direction: column;\n text-align: center;\n }<\/p>\n<p> .section-icon {\n margin-right: 0;\n margin-bottom: 10px;\n }<\/p>\n<p> .photo-grid {\n grid-template-columns: 1fr;\n }<\/p>\n<p> .modal-nav {\n font-size: 30px;\n padding: 15px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><br \/>\n <\/p>\n<nav class=\"nav\">\n<div class=\"nav-container\">\n<h2>ISPF Gallery<\/h2>\n<div>\n <a href=\"#science\">Science<\/a><br \/>\n <a href=\"#maths\">Maths<\/a><br \/>\n <a href=\"#training\">Training<\/a><br \/>\n <a href=\"#clubs\">STEM Clubs<\/a><br \/>\n <a href=\"#robotics\">Robotics<\/a><br \/>\n <a href=\"#coding\">Coding<\/a><br \/>\n <a href=\"#astronomy\">Astronomy<\/a><br \/>\n <a href=\"#awards\">Awards<\/a><br \/>\n <a href=\"#fairs\">Fairs<\/a>\n <\/div>\n<\/p><\/div>\n<\/nav>\n<p> <\/p>\n<div class=\"main-container\">\n<p> <\/p>\n<section id=\"science\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udd2c<\/span><\/p>\n<h2>Experiential Science Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Hands-on science experiments and activities that bring complex concepts to life. Students engage in practical learning experiences that foster curiosity, scientific thinking, and a deep understanding of natural phenomena.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('science', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udd2c<\/div>\n<div class=\"photo-overlay\">\n<p>Chemistry Experiments<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('science', 1)\">\n<div class=\"photo-placeholder\">\ud83e\uddea<\/div>\n<div class=\"photo-overlay\">\n<p>Physics Demonstrations<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('science', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udd2d<\/div>\n<div class=\"photo-overlay\">\n<p>Biology Activities<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('science', 3)\">\n<div class=\"photo-placeholder\">\u2697\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>Lab Work<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (24)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"maths\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udcd0<\/span><\/p>\n<h2>Experiential Maths Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Interactive mathematics learning through TACtivities. Making abstract concepts tangible through hands-on manipulatives, real-world problem-solving, and collaborative learning experiences.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('maths', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udcca<\/div>\n<div class=\"photo-overlay\">\n<p>Geometry Activities<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('maths', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udccf<\/div>\n<div class=\"photo-overlay\">\n<p>Algebra Manipulatives<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('maths', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udd22<\/div>\n<div class=\"photo-overlay\">\n<p>Number Games<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('maths', 3)\">\n<div class=\"photo-placeholder\">\ud83d\udcc8<\/div>\n<div class=\"photo-overlay\">\n<p>Data Visualization<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (18)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"training\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udc68\u200d\ud83c\udfeb<\/span><\/p>\n<h2>Teacher Training<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Empowering educators with inquiry-based pedagogy and hands-on teaching methodologies. Professional development programs that transform teaching practices and enhance classroom engagement.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('training', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udcda<\/div>\n<div class=\"photo-overlay\">\n<p>Workshop Sessions<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('training', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udc65<\/div>\n<div class=\"photo-overlay\">\n<p>Collaborative Learning<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('training', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udf93<\/div>\n<div class=\"photo-overlay\">\n<p>Certification Programs<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('training', 3)\">\n<div class=\"photo-placeholder\">\ud83d\udca1<\/div>\n<div class=\"photo-overlay\">\n<p>Innovation Sessions<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (32)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"clubs\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83c\udf1f<\/span><\/p>\n<h2>STEM Clubs<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Collaborative learning spaces where students explore science, technology, engineering, and mathematics through projects, teamwork, and peer mentorship.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('clubs', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udd2c<\/div>\n<div class=\"photo-overlay\">\n<p>Club Activities<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('clubs', 1)\">\n<div class=\"photo-placeholder\">\ud83e\udd1d<\/div>\n<div class=\"photo-overlay\">\n<p>Team Projects<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('clubs', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udfa8<\/div>\n<div class=\"photo-overlay\">\n<p>Creative Challenges<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('clubs', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udfc6<\/div>\n<div class=\"photo-overlay\">\n<p>Competitions<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (28)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"robotics\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83e\udd16<\/span><\/p>\n<h2>Robotics Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Building and programming robots to develop computational thinking, engineering skills, and creative problem-solving abilities in the next generation of innovators.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('robotics', 0)\">\n<div class=\"photo-placeholder\">\ud83e\udd16<\/div>\n<div class=\"photo-overlay\">\n<p>Robot Building<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('robotics', 1)\">\n<div class=\"photo-placeholder\">\u2699\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>Mechanical Design<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('robotics', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udd0c<\/div>\n<div class=\"photo-overlay\">\n<p>Electronics Workshop<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('robotics', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udfae<\/div>\n<div class=\"photo-overlay\">\n<p>Programming Robots<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (36)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"coding\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udcbb<\/span><\/p>\n<h2>Coding Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Introduction to programming and computational thinking, equipping students with essential 21st-century digital skills through block-based and text-based coding.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('coding', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udcbb<\/div>\n<div class=\"photo-overlay\">\n<p>Coding Workshops<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('coding', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udda5\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>App Development<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('coding', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udfae<\/div>\n<div class=\"photo-overlay\">\n<p>Game Design<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('coding', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udf10<\/div>\n<div class=\"photo-overlay\">\n<p>Web Development<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (42)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"astronomy\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83d\udd2d<\/span><\/p>\n<h2>Astronomy Sessions<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Exploring the wonders of the universe through stargazing, telescope observations, planetarium visits, and celestial science activities that inspire cosmic curiosity.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 0)\">\n<div class=\"photo-placeholder\">\ud83d\udd2d<\/div>\n<div class=\"photo-overlay\">\n<p>Telescope Observations<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 1)\">\n<div class=\"photo-placeholder\">\ud83c\udf19<\/div>\n<div class=\"photo-overlay\">\n<p>Moon Watching<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udf0c<\/div>\n<div class=\"photo-overlay\">\n<p>Stargazing Events<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('astronomy', 3)\">\n<div class=\"photo-placeholder\">\ud83e\ude90<\/div>\n<div class=\"photo-overlay\">\n<p>Planetary Studies<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (22)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"awards\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83c\udfc6<\/span><\/p>\n<h2>Raman Award<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Celebrating excellence in science and innovation. Recognizing outstanding student achievements, research contributions, and innovative projects that advance scientific knowledge.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('awards', 0)\">\n<div class=\"photo-placeholder\">\ud83c\udfc6<\/div>\n<div class=\"photo-overlay\">\n<p>Award Ceremony<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('awards', 1)\">\n<div class=\"photo-placeholder\">\ud83c\udf96\ufe0f<\/div>\n<div class=\"photo-overlay\">\n<p>Winners<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('awards', 2)\">\n<div class=\"photo-placeholder\">\ud83c\udf1f<\/div>\n<div class=\"photo-overlay\">\n<p>Student Projects<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('awards', 3)\">\n<div class=\"photo-placeholder\">\ud83d\udcdc<\/div>\n<div class=\"photo-overlay\">\n<p>Recognition<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (16)<\/button>\n <\/div>\n<\/section>\n<p> <\/p>\n<section id=\"fairs\" class=\"gallery-section\">\n<div class=\"section-header\">\n <span class=\"section-icon\">\ud83c\udfaa<\/span><\/p>\n<h2>STEM Fairs<\/h2>\n<\/p><\/div>\n<p class=\"section-description\">\n Large-scale exhibitions where students showcase innovative projects, experiments, and research to the wider community. A celebration of creativity, science, and innovation.\n <\/p>\n<div class=\"photo-grid\">\n<div class=\"photo-item\" onclick=\"openModal('fairs', 0)\">\n<div class=\"photo-placeholder\">\ud83c\udfaa<\/div>\n<div class=\"photo-overlay\">\n<p>Fair Exhibition<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('fairs', 1)\">\n<div class=\"photo-placeholder\">\ud83d\udd2c<\/div>\n<div class=\"photo-overlay\">\n<p>Project Displays<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('fairs', 2)\">\n<div class=\"photo-placeholder\">\ud83d\udc65<\/div>\n<div class=\"photo-overlay\">\n<p>Student Presentations<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"photo-item\" onclick=\"openModal('fairs', 3)\">\n<div class=\"photo-placeholder\">\ud83c\udfa8<\/div>\n<div class=\"photo-overlay\">\n<p>Interactive Exhibits<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"load-more-container\">\n <button class=\"load-more-btn\">View All Photos (48)<\/button>\n <\/div>\n<\/section><\/div>\n<p> <\/p>\n<div id=\"imageModal\" class=\"modal\">\n <span class=\"close-modal\" onclick=\"closeModal()\">×<\/span><\/p>\n<div class=\"modal-nav modal-prev\" onclick=\"changeImage(-1)\">❮<\/div>\n<div class=\"modal-content\">\n <img decoding=\"async\" id=\"modalImage\" src=\"\" alt=\"\"><\/p>\n<div class=\"modal-caption\" id=\"modalCaption\"><\/div>\n<\/p><\/div>\n<div class=\"modal-nav modal-next\" onclick=\"changeImage(1)\">❯<\/div>\n<\/p><\/div>\n<p> <script>\n let currentSection = '';\n let currentIndex = 0;<\/p>\n<p> function openModal(section, index) {\n currentSection = section;\n currentIndex = index;\n document.getElementById('imageModal').classList.add('active');\n \/\/ In a real implementation, you would load actual image here\n document.getElementById('modalCaption').textContent = `${section} - Image ${index + 1}`;\n }<\/p>\n<p> function closeModal() {\n document.getElementById('imageModal').classList.remove('active');\n }<\/p>\n<p> function changeImage(direction) {\n currentIndex += direction;\n \/\/ Add logic here to handle image navigation\n document.getElementById('modalCaption').textContent = `${currentSection} - Image ${currentIndex + 1}`;\n }<\/p>\n<p> \/\/ Close modal when clicking outside the image\n document.getElementById('imageModal').addEventListener('click', function(e) {\n if (e.target === this) {\n closeModal();\n }\n });<\/p>\n<p> \/\/ Keyboard navigation\n document.addEventListener('keydown', function(e) {\n const modal = document.getElementById('imageModal');\n if (modal.classList.contains('active')) {\n if (e.key === 'Escape') closeModal();\n if (e.key === 'ArrowLeft') changeImage(-1);\n if (e.key === 'ArrowRight') changeImage(1);\n }\n });\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gallery – ISPF Programs (With Photo Viewer) ISPF Gallery Science Maths Training STEM Clubs Robotics Coding Astronomy Awards Fairs \ud83d\udd2c Experiential Science Sessions Hands-on science experiments and activities that bring complex concepts to life. Students engage in practical learning experiences that foster curiosity, scientific thinking, and a deep understanding of natural phenomena. \ud83d\udd2c Chemistry Experiments […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-356","post","type-post","status-publish","format-standard","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":2,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":358,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/posts\/356\/revisions\/358"}],"wp:attachment":[{"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ispf.ngo\/index.php\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}