{"id":3572,"date":"2025-10-09T07:21:22","date_gmt":"2025-10-09T07:21:22","guid":{"rendered":"https:\/\/linen-panther-804043.hostingersite.com\/engineering-and-management\/?page_id=3572"},"modified":"2025-11-13T07:10:35","modified_gmt":"2025-11-13T07:10:35","slug":"gallery","status":"publish","type":"page","link":"https:\/\/sheat.ac.in\/polytechnic\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3572\" class=\"elementor elementor-3572\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-19d5169 e-flex e-con-boxed e-con e-parent\" data-id=\"19d5169\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d1b0180 elementor-widget elementor-widget-html\" data-id=\"d1b0180\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<div class=\"college-gallery-frontend\">\n    <!-- Header removed per request; breadcrumbs will render under content header -->\n    \n    <div class=\"college-gallery-container\">\n        <!-- Sidebar with Tree Navigation -->\n        <div class=\"gallery-sidebar\" id=\"gallery-sidebar\">\n            <div class=\"sidebar-section\">\n                <h3>LATEST EVENTS<\/h3>\n                <div id=\"latest-events-list\">\n                    <div class=\"loading\">\n                        <div class=\"loading-spinner\"><\/div>\n                        <p>Loading latest events...<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"sidebar-section\">\n                <h3>ACADEMIC YEARS<\/h3>\n                <div id=\"years-tree\">\n                    <div class=\"loading\">\n                        <div class=\"loading-spinner\"><\/div>\n                        <p>Loading years...<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <!-- Main Content Area -->\n        <div class=\"main-content\">\n            <div class=\"content-header\">\n                <h2><i class=\"fas fa-folder-open\"><\/i> Gallery<\/h2>\n                <div class=\"content-breadcrumb\" id=\"content-breadcrumb\"><\/div>\n            <\/div>\n            \n            <div class=\"folder-view\" id=\"folder-view\">\n                <div class=\"loading\">\n                    <div class=\"loading-spinner\"><\/div>\n                    <p>Loading gallery content...<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Lightbox -->\n<div class=\"lightbox\" id=\"lightbox\">\n    <button class=\"lightbox-close\" id=\"lightbox-close\">\n        <i class=\"fas fa-times\"><\/i>\n    <\/button>\n    <div class=\"lightbox-content\">\n        <img decoding=\"async\" id=\"lightbox-image\" src=\"\" alt=\"\">\n        <div class=\"lightbox-nav\">\n            <button id=\"lightbox-prev\">\n                <i class=\"fas fa-chevron-left\"><\/i>\n            <\/button>\n            <button id=\"lightbox-next\">\n                <i class=\"fas fa-chevron-right\"><\/i>\n            <\/button>\n        <\/div>\n        <div class=\"lightbox-counter\">\n            <span id=\"lightbox-counter\">1 \/ 1<\/span>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* Basic styles to prevent FOUC (Flash of Unstyled Content) *\/\n.college-gallery-frontend {\n    min-height: 500px;\n    position: relative;\n}\n\n.loading {\n    text-align: center;\n    padding: 40px 20px;\n    color: #666;\n}\n\n.loading-spinner {\n    width: 40px;\n    height: 40px;\n    border: 4px solid #f3f3f3;\n    border-top: 4px solid #3498db;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n    margin: 0 auto 20px;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n\/* Temporary basic styles until CSS loads *\/\n.college-gallery-container {\n    display: grid;\n    grid-template-columns: 240px 1fr; \/* compact sidebar *\/\n    min-height: 600px;\n    background: #f8f9fa;\n}\n\n.gallery-sidebar {\n    width: 100%;\n    background: #2c3e50;\n    color: white;\n    padding: 14px; \/* compact *\/\n}\n\n.main-content {\n    padding: 16px; \/* compact *\/\n    background: white;\n}\n\n.gallery-header {\n    background: #3498db;\n    color: white;\n    padding: 12px 16px; \/* compact *\/\n    text-align: center;\n}\n\n.folder-view {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr); \/* force 4 columns *\/\n    gap: 16px;\n    padding: 12px 0;\n}\n\n.lightbox {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0,0,0,0.9);\n    z-index: 9999;\n    justify-content: center;\n    align-items: center;\n}\n\n.lightbox.active {\n    display: flex;\n}\n\n.lightbox-content img {\n    max-width: 90vw;\n    max-height: 90vh;\n}\n<\/style>\n\n<style>\n\/* Responsive override for fallback (ensures full width on mobile\/tablet even if main CSS fails) *\/\n@media (max-width: 1024px) {\n    .college-gallery-container { grid-template-columns: 1fr; }\n    #gallery-sidebar { display: none; }\n}\n<\/style>\n\n<script type=\"text\/javascript\">\n\/\/ Fallback JavaScript in case the main JS file fails to load\njQuery(document).ready(function($) {\n    console.log('College Gallery Manager Frontend Loaded');\n    \/\/ In-memory gallery data and simple navigation state\n    var CGM_GALLERY_DATA = {};\n    var CGM_STATE = { year: null, month: null, event: null };\n    \n    \/\/ Basic functionality as fallback\n    function initializeFallbackGallery() {\n        if (window.CGM_MAIN_LOADED) {\n            \/\/ Main script present; don't run fallback\n            return;\n        }\n        console.log('Initializing fallback gallery...');\n        \n        \/\/ Load gallery data\n        loadGalleryData();\n        \n        \/\/ Setup basic lightbox\n        setupLightbox();\n    }\n    \n    function loadGalleryData() {\n        $.ajax({\n            url: 'https:\/\/sheat.ac.in\/polytechnic\/wp-admin\/admin-ajax.php',\n            type: 'POST',\n            data: {\n                action: 'cgm_get_gallery_data',\n                nonce: 'c450ccacac'\n            },\n            success: function(response) {\n                if (response.success) {\n                    CGM_GALLERY_DATA = response.data || {};\n                    renderGallery(CGM_GALLERY_DATA);\n                } else {\n                    showError('Failed to load gallery data.');\n                }\n            },\n            error: function() {\n                showError('Network error. Please try again.');\n            }\n        });\n    }\n    \n    function renderGallery(data) {\n        console.log('Gallery data received:', data);\n        \/\/ Build simple sidebar tree of years and months\n        const $yearsTree = $('#years-tree');\n        $yearsTree.empty();\n        \n        const years = Object.keys(data || {});\n        if (years.length === 0) {\n            $yearsTree.html('<p>No years found.<\/p>');\n            $('#folder-view').html('<p>No gallery data available.<\/p>');\n            return;\n        }\n        \n        years.sort().reverse();\n        years.forEach(function(yearKey, idx){\n            const year = data[yearKey];\n            const months = year.months || {};\n            const containerId = 'tree-year-' + idx;\n            const $header = $('<div class=\"event-item tree-toggle\" style=\"cursor:pointer;\"><\/div>')\n                .attr('data-target', containerId)\n                .attr('data-year', yearKey)\n                .append('<i class=\"fas fa-folder\"><\/i> <span>' + (year.title || yearKey) + '<\/span>');\n            const $monthsWrap = $('<div class=\"tree-children\" id=\"'+containerId+'\" style=\"display:none; padding-left:12px;\"><\/div>');\n            \/\/ Bind click directly so toggling works immediately\n            $header.on('click', function(){\n                $('#'+containerId).slideToggle(150);\n            });\n            const monthKeys = Object.keys(months);\n            if (monthKeys.length === 0) {\n                $monthsWrap.append('<div class=\"event-item\" style=\"opacity:0.7;\">No months<\/div>');\n            } else {\n                monthKeys.forEach(function(mk){\n                    const m = months[mk];\n                    const evCount = m && m.events ? Object.keys(m.events).length : 0;\n                    $monthsWrap.append('<div class=\"event-item\" style=\"display:flex; justify-content:space-between;\">'\n                        + '<span><i class=\"fas fa-folder-open\"><\/i> '+ (m.title || mk) + '<\/span>'\n                        + '<span style=\"opacity:0.7;\">'+ evCount +' events<\/span>'\n                        + '<\/div>');\n                });\n            }\n            $yearsTree.append($header).append($monthsWrap);\n        });\n        \n        \/\/ Toggle behavior\n        $(document).off('click.cgmTree').on('click.cgmTree', '.tree-toggle', function(){\n            const targetId = $(this).data('target');\n            $('#'+targetId).slideToggle(150);\n        });\n        \n        \/\/ Clear main panel; content will be populated upon user selection\n        $('#folder-view').empty();\n    }\n    \n    function setupLightbox() {\n        \/\/ Basic lightbox functionality\n        $(document).on('click', '.image-card', function() {\n            const imgSrc = $(this).find('img').attr('src');\n            $('#lightbox-image').attr('src', imgSrc);\n            $('#lightbox').addClass('active');\n        });\n        \n        $('#lightbox-close, #lightbox').on('click', function(e) {\n            if (e.target === this || $(e.target).hasClass('lightbox-close')) {\n                $('#lightbox').removeClass('active');\n            }\n        });\n    }\n    \n    function showError(message) {\n        $('#folder-view').html(`\n            <div class=\"error-state\">\n                <h3>Error<\/h3>\n                <p>${message}<\/p>\n                <button onclick=\"location.reload()\">Retry<\/button>\n            <\/div>\n        `);\n    }\n    \n    \/\/ Initialize after a short delay to ensure DOM is ready\n    setTimeout(initializeFallbackGallery, 100);\n});\n<\/script>\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":"","protected":false},"author":1,"featured_media":4490,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3572","page","type-page","status-publish","has-post-thumbnail","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/pages\/3572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/comments?post=3572"}],"version-history":[{"count":0,"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/pages\/3572\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/media\/4490"}],"wp:attachment":[{"href":"https:\/\/sheat.ac.in\/polytechnic\/wp-json\/wp\/v2\/media?parent=3572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}