{"id":29,"date":"2026-05-20T06:25:02","date_gmt":"2026-05-20T06:25:02","guid":{"rendered":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/?page_id=29"},"modified":"2026-05-20T09:39:44","modified_gmt":"2026-05-20T09:39:44","slug":"media-gallery","status":"publish","type":"page","link":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/","title":{"rendered":"Media Gallery"},"content":{"rendered":"\n<pre class=\"wp-block-preformatted\">        <div class=\"wpmg-all-in-one\">\n            <!-- Hero Section -->\n            <div class=\"wpmg-hero\" style=\" border-radius: 20px; border:1px solid; text-align: center; color: white;\">\n                <h1 style=\"margin-bottom: 15px;\"><i class=\"fas fa-images\"><\/i> Media Gallery<\/h1>\n                <p style=\"margin-bottom: 25px;\">Discover amazing images, trending videos, and social media content<\/p>\n                \n                                <div style=\"max-width: 500px; margin: 0 auto; display: flex;\">\n                    <input type=\"text\" id=\"wpmg-all-search\" placeholder=\"Search...\" style=\"flex: 1; padding: 12px 20px; border: none; border-radius: 30px 0 0 30px; font-size: 16px;\">\n                    <button id=\"wpmg-all-search-btn\" style=\"padding: 12px 25px; background: #ff6b6b; border: none; border-radius: 0 30px 30px 0; color: white; cursor: pointer;\">Search<\/button>\n                <\/div>\n                            <\/div>\n            \n            <!-- Stats -->\n                        <div style=\"display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;\">\n                <div style=\"text-align: center;  border: 1px solid; padding:10px; border-radius: 12px;\"><i class=\"fas fa-image\" style=\"font-size: 36px; color: #667eea;\"><\/i><div style=\"font-size: 28px; font-weight: bold;\">1+<\/div><div>Images<\/div><\/div>\n                <div style=\"text-align: center;  border: 1px solid; padding:10px; border-radius: 12px;\"><i class=\"fas fa-video\" style=\"font-size: 36px; color: #667eea;\"><\/i><div style=\"font-size: 28px; font-weight: bold;\">0+<\/div><div>Videos<\/div><\/div>\n                <div style=\"text-align: center;  border: 1px solid; padding:10px; border-radius: 12px;\"><i class=\"fas fa-mobile-alt\" style=\"font-size: 36px; color: #667eea;\"><\/i><div style=\"font-size: 28px; font-weight: bold;\">0+<\/div><div>Shorts<\/div><\/div>\n                <div style=\"text-align: center;  border: 1px solid; padding:10px; border-radius: 12px;\"><i class=\"fas fa-share-alt\" style=\"font-size: 36px; color: #667eea;\"><\/i><div style=\"font-size: 28px; font-weight: bold;\">0+<\/div><div>Social Posts<\/div><\/div>\n            <\/div>\n                        \n            <!-- Tabs -->\n            <div style=\"display: flex; justify-content: center; gap: 10px; border-bottom: 2px solid #e0e0e0; padding-bottom: 10px;\">\n                <button class=\"wpmg-tab active\" data-tab=\"images\" style=\"padding: 12px 30px; background: #b68b18; border: #b68b18; font-size: 16px; cursor: pointer; border-radius: 30px;\"><i class=\"fas fa-image\"><\/i> Images<\/button>\n                <button class=\"wpmg-tab\" data-tab=\"videos\" style=\"padding: 12px 30px; background: #b68b18; border: #b68b18; font-size: 16px; cursor: pointer; border-radius: 30px;\"><i class=\"fas fa-video\"><\/i> Videos<\/button>\n                <button class=\"wpmg-tab\" data-tab=\"social\" style=\"padding: 12px 30px; background: #b68b18; border: #b68b18; font-size: 16px; cursor: pointer; border-radius: 30px;\"><i class=\"fab fa-instagram\"><\/i> Social<\/button>\n            <\/div>\n            \n            <!-- Category Filters -->\n            <div id=\"wpmg-category-filters\" class=\"wpmg-filters\" style=\"display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 25px;\">\n                <button class=\"filter-btn active\" data-cat=\"all\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">All<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"festival\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Festival<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"technology\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Technology<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"travel\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Travel<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"food\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Food<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"sports\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Sports<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"art\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Art<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"animals\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Animals<\/button>\n                                    <button class=\"filter-btn\" data-cat=\"architecture\" style=\"padding: 8px 20px; background: #b68b18; border: none; border-radius: 25px; cursor: pointer;\">Architecture<\/button>\n                            <\/div>\n            \n            <!-- Images Grid -->\n            <div id=\"wpmg-images-container\" class=\"wpmg-grid\" style=\"display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 30px;\">\n                <div class=\"wpmg-loader\" style=\"text-align: center; padding: 40px; grid-column: 1\/-1;\">Loading images...<\/div>\n            <\/div>\n            \n            <!-- Videos Grid -->\n            <div id=\"wpmg-videos-container\" class=\"wpmg-grid\" style=\"display: none; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-bottom: 30px;\"><\/div>\n            \n            <!-- Social Grid -->\n            <div id=\"wpmg-social-container\" class=\"wpmg-grid\" style=\"display: none; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-bottom: 30px;\"><\/div>\n            \n            <!-- Load More -->\n            <div style=\"text-align: center;\">\n                <button id=\"wpmg-load-more\" class=\"wpmg-load-more\" style=\"padding: 12px 35px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 40px; cursor: pointer;\">Load More<\/button>\n            <\/div>\n        <\/div>\n        \n        <style>\n            .wpmg-tab.active { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }\n            .filter-btn.active { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }\n            .wpmg-image-card { background: green; border-radius: 15px; overflow: hidden; cursor: pointer; transition: transform 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }\n            .wpmg-image-card:hover { transform: translateY(-5px); }\n            .wpmg-image-card img { width: 100%; height: 220px; object-fit: cover; }\n            .wpmg-image-card .info { padding: 15px; }\n            .wpmg-image-card .info h4 { margin: 0 0 8px; font-size: 16px; }\n            .wpmg-video-card { background: white; border-radius: 15px; overflow: hidden; cursor: pointer; transition: transform 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }\n            .wpmg-video-card:hover { transform: translateY(-5px); }\n            .wpmg-video-card .thumbnail { position: relative; }\n            .wpmg-video-card .thumbnail img { width: 100%; height: 180px; object-fit: cover; }\n            .wpmg-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n            .wpmg-play-overlay i { font-size: 24px; color: #ff4757; }\n            .wpmg-shorts-badge { position: absolute; top: 10px; right: 10px; background: #ff4757; color: white; padding: 4px 8px; border-radius: 5px; font-size: 10px; }\n            .wpmg-social-post { background: white; border-radius: 15px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); }\n            .wpmg-social-post img { width: 100%; border-radius: 10px; margin: 12px 0; }\n            @media (max-width: 992px) { .wpmg-grid { grid-template-columns: repeat(3, 1fr) !important; } }\n            @media (max-width: 768px) { .wpmg-grid { grid-template-columns: repeat(2, 1fr) !important; } }\n            @media (max-width: 480px) { .wpmg-grid { grid-template-columns: 1fr !important; } }\n        <\/style>\n        \n        <script>\n        jQuery(document).ready(function($) {\n            var currentTab = 'images';\n            var currentCat = 'all';\n            var currentSearch = '';\n            var imagesPage = 1;\n            var videosPage = 1;\n            var socialPage = 1;\n            var hasMoreImages = true;\n            var hasMoreVideos = true;\n            var hasMoreSocial = true;\n            var isLoading = false;\n            \n            function loadImages(reset = true) {\n                if (isLoading) return;\n                isLoading = true;\n                \n                if (reset) {\n                    imagesPage = 1;\n                    hasMoreImages = true;\n                    $('#wpmg-images-container').html('<div class=\"wpmg-loader\" style=\"text-align: center; padding: 40px; grid-column: 1\/-1;\">Loading...<\/div>');\n                }\n                \n                $.ajax({\n                    url: wpmg_frontend.rest_url + 'wpmg\/v1\/images',\n                    type: 'GET',\n                    data: { category: currentCat, search: currentSearch, page: imagesPage, per_page: 12 },\n                    success: function(res) {\n                        if (res.images && res.images.length) {\n                            var html = '';\n                            $.each(res.images, function(i, img) {\n                                html += '<div class=\"wpmg-image-card\" data-id=\"' + img.id + '\">' +\n                                    '<img decoding=\"async\" src=\"' + img.thumbnail_url + '\" alt=\"' + img.title + '\" loading=\"lazy\">' +\n                                    '<div class=\"info\"><h4>' + img.title + '<\/h4>' +\n                                    '<div><i class=\"fas fa-eye\"><\/i> ' + formatNumber(img.views) + ' views<\/div>' +\n                                    '<button class=\"wpmg-view-trigger\" data-id=\"' + img.id + '\" style=\"margin-top: 10px; padding: 5px 12px; background: #667eea; color: white; border: none; border-radius: 20px; cursor: pointer;\">View<\/button>' +\n                                    '<\/div><\/div>';\n                            });\n                            if (reset) $('#wpmg-images-container').html(html);\n                            else $('#wpmg-images-container').append(html);\n                            \n                            hasMoreImages = res.current_page < res.pages;\n                            if (!hasMoreImages && currentTab === 'images') $('#wpmg-load-more').hide();\n                            else if (currentTab === 'images') $('#wpmg-load-more').show();\n                        } else if (reset) {\n                            $('#wpmg-images-container').html('<div class=\"wpmg-no-results\" style=\"text-align: center; padding: 40px; grid-column: 1\/-1;\">No images found.<\/div>');\n                        }\n                        isLoading = false;\n                    },\n                    error: function() { isLoading = false; }\n                });\n            }\n            \n            function loadVideos(reset = true) {\n                if (isLoading) return;\n                isLoading = true;\n                \n                if (reset) { videosPage = 1; hasMoreVideos = true; $('#wpmg-videos-container').html('<div class=\"wpmg-loader\">Loading...<\/div>'); }\n                \n                $.ajax({\n                    url: wpmg_frontend.rest_url + 'wpmg\/v1\/videos',\n                    type: 'GET',\n                    data: { type: 'all', search: currentSearch, page: videosPage, per_page: 8 },\n                    success: function(res) {\n                        if (res.videos && res.videos.length) {\n                            var html = '';\n                            $.each(res.videos, function(i, vid) {\n                                var isShort = vid.is_short;\n                                html += '<div class=\"wpmg-video-card\" data-id=\"' + vid.youtube_id + '\">' +\n                                    '<div class=\"thumbnail\"><img decoding=\"async\" src=\"' + vid.thumbnail_url + '\" alt=\"' + vid.title + '\">' +\n                                    (isShort ? '<span class=\"wpmg-shorts-badge\">#Shorts<\/span>' : '') +\n                                    '<div class=\"wpmg-play-overlay\"><i class=\"fas fa-play\"><\/i><\/div><\/div>' +\n                                    '<div class=\"info\"><h4>' + vid.title + '<\/h4><div><i class=\"fas fa-eye\"><\/i> ' + formatNumber(vid.views) + ' views<\/div><\/div><\/div>';\n                            });\n                            if (reset) $('#wpmg-videos-container').html(html);\n                            else $('#wpmg-videos-container').append(html);\n                            \n                            hasMoreVideos = res.current_page < res.pages;\n                        } else if (reset) {\n                            $('#wpmg-videos-container').html('<div class=\"wpmg-no-results\">No videos found.<\/div>');\n                        }\n                        isLoading = false;\n                    },\n                    error: function() { isLoading = false; }\n                });\n            }\n            \n            function loadSocial(reset = true) {\n                if (isLoading) return;\n                isLoading = true;\n                \n                if (reset) { socialPage = 1; hasMoreSocial = true; $('#wpmg-social-container').html('<div class=\"wpmg-loader\">Loading...<\/div>'); }\n                \n                $.ajax({\n                    url: wpmg_frontend.rest_url + 'wpmg\/v1\/social-feeds',\n                    type: 'GET',\n                    data: { platform: currentCat === 'all' ? 'all' : currentCat, page: socialPage, per_page: 6 },\n                    success: function(res) {\n                        if (res.feeds && res.feeds.length) {\n                            var html = '';\n                            $.each(res.feeds, function(i, feed) {\n                                html += '<div class=\"wpmg-social-post\">' +\n                                    '<div><strong>' + feed.platform + '<\/strong> <small>' + (feed.time_ago || 'recent') + '<\/small><\/div>' +\n                                    '<p>' + (feed.content || '') + '<\/p>' +\n                                    (feed.media_url ? '<img decoding=\"async\" src=\"' + feed.media_url + '\" alt=\"Post\">' : '') +\n                                    '<div><i class=\"fas fa-heart\"><\/i> ' + formatNumber(feed.likes) + ' likes<\/div><\/div>';\n                            });\n                            if (reset) $('#wpmg-social-container').html(html);\n                            else $('#wpmg-social-container').append(html);\n                            \n                            hasMoreSocial = res.current_page < res.pages;\n                        } else if (reset) {\n                            $('#wpmg-social-container').html('<div class=\"wpmg-no-results\">No social posts found.<\/div>');\n                        }\n                        isLoading = false;\n                    },\n                    error: function() { isLoading = false; }\n                });\n            }\n            \n            function formatNumber(num) {\n                if (num >= 1000000) return (num \/ 1000000).toFixed(1) + 'M';\n                if (num >= 1000) return (num \/ 1000).toFixed(1) + 'K';\n                return num.toString();\n            }\n            \n            \/\/ Tab switching\n            $('.wpmg-tab').on('click', function() {\n                $('.wpmg-tab').removeClass('active');\n                $(this).addClass('active');\n                currentTab = $(this).data('tab');\n                \n                $('#wpmg-images-container, #wpmg-videos-container, #wpmg-social-container').hide();\n                if (currentTab === 'images') {\n                    $('#wpmg-images-container').show();\n                    $('#wpmg-category-filters').show();\n                    if ($('#wpmg-images-container').children().length <= 1) loadImages();\n                } else if (currentTab === 'videos') {\n                    $('#wpmg-videos-container').show();\n                    $('#wpmg-category-filters').hide();\n                    if ($('#wpmg-videos-container').children().length <= 1) loadVideos();\n                } else {\n                    $('#wpmg-social-container').show();\n                    $('#wpmg-category-filters').show();\n                    if ($('#wpmg-social-container').children().length <= 1) loadSocial();\n                }\n            });\n            \n            \/\/ Category filter\n            $('.filter-btn').on('click', function() {\n                $('.filter-btn').removeClass('active');\n                $(this).addClass('active');\n                currentCat = $(this).data('cat');\n                if (currentTab === 'images') loadImages();\n                else if (currentTab === 'social') loadSocial();\n            });\n            \n            \/\/ Search\n            $('#wpmg-all-search-btn').on('click', function() {\n                currentSearch = $('#wpmg-all-search').val();\n                if (currentTab === 'images') loadImages();\n                else if (currentTab === 'videos') loadVideos();\n                else loadSocial();\n            });\n            \n            $('#wpmg-all-search').on('keypress', function(e) {\n                if (e.which === 13) $('#wpmg-all-search-btn').click();\n            });\n            \n            \/\/ Load more\n            $('#wpmg-load-more').on('click', function() {\n                if (currentTab === 'images' && hasMoreImages) { imagesPage++; loadImages(false); }\n                else if (currentTab === 'videos' && hasMoreVideos) { videosPage++; loadVideos(false); }\n                else if (currentTab === 'social' && hasMoreSocial) { socialPage++; loadSocial(false); }\n            });\n            \n            \/\/ Image view\n            $(document).on('click', '.wpmg-image-card, .wpmg-view-trigger', function(e) {\n                e.stopPropagation();\n                var id = $(this).closest('.wpmg-image-card').data('id') || $(this).data('id');\n                if (typeof WPMG_Lightbox !== 'undefined' && id) WPMG_Lightbox.open(id);\n            });\n            \n            \/\/ Video play\n            $(document).on('click', '.wpmg-video-card', function() {\n                var videoId = $(this).data('id');\n                if (videoId) {\n                    var modal = $('<div class=\"wpmg-video-modal\" style=\"position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:999999;display:flex;align-items:center;justify-content:center;\"><div style=\"position:relative;width:90%;max-width:900px;\"><button style=\"position:absolute;top:-40px;right:0;background:none;border:none;color:white;font-size:30px;cursor:pointer;\">&times;<\/button><iframe src=\"https:\/\/www.youtube.com\/embed\/' + videoId + '?autoplay=1\" style=\"width:100%;height:500px;border:none;\" allowfullscreen><\/iframe><\/div><\/div>');\n                    $('body').append(modal).css('overflow', 'hidden');\n                    modal.find('button').on('click', function() { modal.remove(); $('body').css('overflow', ''); });\n                    modal.on('click', function(e) { if ($(e.target).is(modal)) { modal.remove(); $('body').css('overflow', ''); } });\n                }\n            });\n            \n            \/\/ Initial load\n            loadImages();\n        });\n        <\/script>\n        <\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":8,"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":45,"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/pages\/29\/revisions\/45"}],"wp:attachment":[{"href":"https:\/\/www.delhipublicschoolbhiwadi.com\/media-gallery\/wp-json\/wp\/v2\/media?parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}