{"id":262,"date":"2026-06-23T20:50:51","date_gmt":"2026-06-23T20:50:51","guid":{"rendered":"https:\/\/jsparmarcollege.in\/?page_id=262"},"modified":"2026-06-23T21:02:49","modified_gmt":"2026-06-23T21:02:49","slug":"gallery","status":"publish","type":"page","link":"https:\/\/jsparmarcollege.in\/index.php\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"262\" class=\"elementor elementor-262\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e8dc16 e-con e-atomic-element e-flexbox-base e-8185bee \" data-id=\"3e8dc16\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3e8dc16\">\n    \t\t<div class=\"elementor-element elementor-element-ded770d elementor-widget elementor-widget-shortcode\" data-id=\"ded770d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <!-- Font Awesome -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    \n    <!-- Fancybox for beautiful Lightbox Carousel -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fancyapps\/ui@5.0\/dist\/fancybox\/fancybox.css\"\/>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@fancyapps\/ui@5.0\/dist\/fancybox\/fancybox.umd.js\"><\/script>\n    \n    <style>\n        .sg-wrapper { font-family: 'Open Sans', Arial, sans-serif; width: 100%; max-width: 1200px; margin: 0 auto; padding: 40px 15px; box-sizing: border-box; }\n        .sg-wrapper * { box-sizing: border-box; }\n\n        \/* Filter Bar *\/\n        .sg-filter-container { border-bottom: 1px solid #e2e8f0; margin-bottom: 40px; text-align: center; }\n        .sg-filters { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 30px; list-style: none; padding: 0; margin: 0; }\n        .sg-filter-btn { background: none; border: none; color: #64748b; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 15px 5px; cursor: pointer; position: relative; transition: color 0.3s; }\n        .sg-filter-btn:hover { color: #1e3a8a; }\n        .sg-filter-btn.active { color: #1e3a8a; }\n        .sg-filter-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: #f59e0b; }\n\n        \/* Grid *\/\n        .sg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }\n\n        \/* Card Design *\/\n        .sg-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; animation: sgFadeIn 0.5s ease; }\n        .sg-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }\n        @keyframes sgFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }\n\n        \/* Image Area *\/\n        .sg-img-wrapper { position: relative; width: 100%; height: 220px; background: #f1f5f9; overflow: hidden; }\n        .sg-img-wrapper > a { display: block; width: 100%; height: 100%; }\n        .sg-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }\n        .sg-card:hover .sg-img-wrapper img { transform: scale(1.06); } \/* Hover Zoom Effect *\/\n\n        \/* Badges Over Image *\/\n        .sg-badge { position: absolute; top: 15px; left: 15px; background: rgba(15, 23, 42, 0.9); color: #f59e0b; font-size: 10px; font-weight: 800; padding: 5px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; z-index: 2; pointer-events: none; }\n        .sg-photo-count { position: absolute; top: 15px; right: 15px; background: rgba(255, 255, 255, 0.95); color: #1e3a8a; font-size: 10px; font-weight: 800; padding: 5px 10px; border-radius: 4px; text-transform: uppercase; z-index: 2; pointer-events: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }\n\n        \/* Content Area *\/\n        .sg-content { padding: 25px 20px; flex-grow: 1; display: flex; flex-direction: column; }\n        .sg-title { color: #1e3a8a; font-family: 'Times New Roman', serif; font-size: 18px; font-weight: bold; text-transform: uppercase; margin: 0 0 10px 0; line-height: 1.4; }\n        .sg-desc { color: #475569; font-size: 13px; line-height: 1.6; margin: 0 0 20px 0; flex-grow: 1; }\n        .sg-footer { border-top: 1px solid #f1f5f9; padding-top: 15px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #94a3b8; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }\n        .sg-footer-item { display: flex; align-items: center; gap: 5px; }\n\n        @media (max-width: 992px) { .sg-grid { grid-template-columns: repeat(2, 1fr); } }\n        @media (max-width: 768px) { .sg-grid { grid-template-columns: 1fr; } .sg-filters { gap: 15px; } .sg-filter-btn { padding: 10px 5px; font-size: 11px; } }\n    <\/style>\n\n    <div class=\"sg-wrapper\">\n        \n        <!-- Filter Bar -->\n        <div class=\"sg-filter-container\">\n            <ul class=\"sg-filters\">\n                <li><button class=\"sg-filter-btn active\" data-filter=\"all\">ALL<\/button><\/li>\n                                    <li><button class=\"sg-filter-btn\" data-filter=\"college-pogramme\">College Pogramme<\/button><\/li>\n                            <\/ul>\n        <\/div>\n\n        <!-- Gallery Grid -->\n        <div class=\"sg-grid\" id=\"sg-gallery-grid\">\n                                \n                    <!-- Card -->\n                    <div class=\"sg-card\" data-category=\"college-pogramme\">\n                        <div class=\"sg-img-wrapper\">\n                            \n                            <!-- Badges -->\n                            <span class=\"sg-badge\">College Pogramme<\/span>\n                                                            <span class=\"sg-photo-count\"><i class=\"fas fa-images\"><\/i> 10 Photos<\/span>\n                                                        \n                            <!-- Cover Image (Triggers Lightbox) -->\n                            <a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9561-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\">\n                                <img decoding=\"async\" src=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9561-1024x683.jpg\" alt=\"College\">\n                            <\/a>\n\n                            <!-- Hidden Images for Lightbox Carousel -->\n                            <a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9559-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9558-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9556-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9554-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9553-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9552-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9551-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9550-1-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a><a href=\"https:\/\/jsparmarcollege.in\/wp-content\/uploads\/2026\/06\/DSC_9549-1024x683.jpg\" data-fancybox=\"gallery-267\" data-caption=\"College\" style=\"display:none;\"><\/a>                        <\/div>\n                        \n                        <!-- Text -->\n                        <div class=\"sg-content\">\n                            <h3 class=\"sg-title\">College<\/h3>\n                            <div class=\"sg-desc\"><\/div>\n                            <div class=\"sg-footer\">\n                                <span class=\"sg-footer-item\"><i class=\"fas fa-tag\"><\/i> CATEGORY: College Pogramme<\/span>\n                                <span class=\"sg-footer-item\"><i class=\"far fa-calendar-alt\"><\/i> 2026-06-23<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                                    <\/div>\n\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Initialize Fancybox (Lightbox)\n            Fancybox.bind('[data-fancybox]', {\n                Toolbar: { display: { left: [], middle: [\"infobar\"], right: [\"close\"] } },\n                Thumbs: { autoStart: true }\n            });\n\n            \/\/ Category Filtering Logic\n            const filterBtns = document.querySelectorAll('.sg-filter-btn');\n            const galleryCards = document.querySelectorAll('.sg-card');\n\n            filterBtns.forEach(btn => {\n                btn.addEventListener('click', function() {\n                    filterBtns.forEach(b => b.classList.remove('active'));\n                    this.classList.add('active');\n                    const filterValue = this.getAttribute('data-filter');\n\n                    galleryCards.forEach(card => {\n                        const cardCategories = card.getAttribute('data-category').split(' ');\n                        if (filterValue === 'all' || cardCategories.includes(filterValue)) {\n                            card.style.display = 'flex';\n                            card.style.animation = 'none';\n                            card.offsetHeight; \n                            card.style.animation = 'sgFadeIn 0.5s ease';\n                        } else {\n                            card.style.display = 'none';\n                        }\n                    });\n                });\n            });\n        });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-262","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":7,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages\/262\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/pages\/262\/revisions\/273"}],"wp:attachment":[{"href":"https:\/\/jsparmarcollege.in\/index.php\/wp-json\/wp\/v2\/media?parent=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}