{"id":90,"date":"2024-07-25T20:41:14","date_gmt":"2024-07-25T13:41:14","guid":{"rendered":"https:\/\/tubtimsiam04.ac.th\/?page_id=90"},"modified":"2025-03-01T15:38:39","modified_gmt":"2025-03-01T08:38:39","slug":"%e0%b8%9c%e0%b8%a5%e0%b8%87%e0%b8%b2%e0%b8%99%e0%b8%94%e0%b8%b5%e0%b9%80%e0%b8%94%e0%b9%88%e0%b8%99","status":"publish","type":"page","link":"https:\/\/tubtimsiam04.ac.th\/?page_id=90","title":{"rendered":"\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e14\u0e35\u0e40\u0e14\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19"},"content":{"rendered":"\n<!-- \u0e2a\u0e48\u0e27\u0e19 CSS \u0e43\u0e2b\u0e49\u0e43\u0e2a\u0e48\u0e44\u0e27\u0e49\u0e43\u0e19 <head> -->\n<style>\n    .youtube-container {\n        position: relative;\n        width: 100%;\n        height: 0;\n        padding-top: 56.25%;  \/* \u0e2d\u0e31\u0e15\u0e23\u0e32\u0e2a\u0e48\u0e27\u0e19 16:9 \u0e17\u0e35\u0e48\u0e41\u0e21\u0e48\u0e19\u0e22\u0e33 *\/\n        margin-top: 1.0em;\n        margin-bottom: 1.0em;\n        overflow: hidden;\n        border-radius: 8px;\n        will-change: transform;\n        box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16);\n    }\n    \n    .youtube-embed {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border: none !important;\n        padding: 0 !important;\n        margin: 0 !important;\n    }\n<\/style>\n\n<!-- \u0e2a\u0e48\u0e27\u0e19 JavaScript \u0e43\u0e2b\u0e49\u0e43\u0e2a\u0e48\u0e01\u0e48\u0e2d\u0e19\u0e1b\u0e34\u0e14 <\/body> -->\n<script>\n    \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07 YouTube embed\n    function createYouTubeEmbed(videoId) {\n        const container = document.createElement('div');\n        container.className = 'youtube-container';\n        \n        container.innerHTML = `\n            <iframe \n                class=\"youtube-embed\"\n                src=\"https:\/\/www.youtube.com\/embed\/${videoId}\"\n                title=\"YouTube video player\"\n                loading=\"lazy\"\n                frameborder=\"0\"\n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n                referrerpolicy=\"strict-origin-when-cross-origin\"\n                allowfullscreen>\n            <\/iframe>\n        `;\n        \n        return container;\n    }\n\n    \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d\u0e25\u0e07\u0e43\u0e19\u0e04\u0e2d\u0e19\u0e40\u0e17\u0e19\u0e40\u0e19\u0e2d\u0e23\u0e4c\u0e17\u0e35\u0e48\u0e23\u0e30\u0e1a\u0e38\n    function addVideosToContainer(containerId, videoIds) {\n        const container = document.getElementById(containerId);\n        if (container) {\n            videoIds.forEach(id => {\n                container.appendChild(createYouTubeEmbed(id));\n            });\n        }\n    }\n\n    \/\/ \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19:\n    \/\/addVideosToContainer('videos1', ['VIDEO_ID_1', 'VIDEO_ID_2']);\n    \/\/addVideosToContainer('videos2', ['VIDEO_ID_3', 'VIDEO_ID_4']);\n<\/script>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e14\u0e35\u0e40\u0e14\u0e48\u0e19\u0e01\u0e32\u0e23 Coding \u0e2b\u0e38\u0e48\u0e19\u0e22\u0e19\u0e15\u0e4c<\/strong><\/p>\n<\/blockquote>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69fb33f229bd6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69fb33f229bd6\" class=\"wp-block-image size-large has-custom-border wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/drive.google.com\/thumbnail?id=1Aj71-JIZkleHrsJ9oycPf2RQ3GYKtggk&amp;sz=s1920\" alt=\"\" class=\"has-border-color has-cyan-bluish-gray-border-color\" style=\"border-width:1px;border-radius:8px\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos1\"><\/div>\n<script>\naddVideosToContainer('videos1', ['p9vQ5J5gZEo?si=RVPCv8yrbKnw4pu5']);\n<\/script>\n\n\n\n<p class=\"has-text-align-center\">\u0e14\u0e23.\u0e1a\u0e38\u0e0d\u0e23\u0e31\u0e01\u0e29\u0e4c \u0e22\u0e2d\u0e14\u0e40\u0e1e\u0e0a\u0e23 \u0e01\u0e25\u0e48\u0e32\u0e27\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e37\u0e48\u0e19\u0e0a\u0e21\u0e22\u0e34\u0e19\u0e14\u0e35\u0e01\u0e31\u0e1a\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19<br>\u0e42\u0e23\u0e07\u0e40\u0e23\u0e35\u0e22\u0e19\u0e21\u0e31\u0e18\u0e22\u0e21\u0e17\u0e31\u0e1a\u0e17\u0e34\u0e21\u0e2a\u0e22\u0e32\u0e21\u0e50\u0e54 \u0e43\u0e19\u0e1e\u0e23\u0e30\u0e2d\u0e38\u0e1b\u0e16\u0e31\u0e21\u0e20\u0e4c \u0e2a\u0e1e\u0e21.33 \u0e08\u0e31\u0e07\u0e2b\u0e27\u0e31\u0e14\u0e2a\u0e38\u0e23\u0e34\u0e19\u0e17\u0e23\u0e4c  <br>\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e23\u0e32\u0e07\u0e27\u0e31\u0e25\u0e0a\u0e19\u0e30\u0e40\u0e25\u0e34\u0e28\u0e01\u0e32\u0e23\u0e41\u0e02\u0e48\u0e07\u0e02\u0e31\u0e19\u0e2b\u0e38\u0e48\u0e19\u0e22\u0e19\u0e15\u0e4c\u0e19\u0e32\u0e19\u0e32\u0e0a\u0e32\u0e15\u0e34 <br>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 International micro:coding Championship 2019 \u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 1 <br>\u0e13 \u0e1b\u0e23\u0e30\u0e40\u0e17\u0e28\u0e2a\u0e34\u0e07\u0e04\u0e4c\u0e42\u0e1b\u0e23\u0e4c \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 16-19 \u0e40\u0e21\u0e29\u0e32\u0e22\u0e19 2562  <br>\u0e43\u0e19\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u0e1e\u0e38\u0e18\u0e40\u0e0a\u0e49\u0e32\u2026\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e1e\u0e10. \u0e04\u0e23\u0e31\u0e49\u0e07\u0e17\u0e35\u0e48 17\/2562 <br>\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e27\u0e31\u0e19\u0e1e\u0e38\u0e18\u0e17\u0e35\u0e48 24 \u0e40\u0e21\u0e29\u0e32\u0e22\u0e19 2562<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos2\"><\/div>\n<script>\naddVideosToContainer('videos2', ['u6TGqBOKHnE?si=lWV9ojT6N5FAVvhP']);\n<\/script>\n\n\n\n<p class=\"has-text-align-center\">\u0e08\u0e32\u0e01\u0e40\u0e14\u0e47\u0e01\u0e41\u0e27\u0e49\u0e19 \u0e40\u0e14\u0e47\u0e01\u0e15\u0e34\u0e14\u0e40\u0e01\u0e21\u0e2a\u0e4c \u0e21\u0e32\u0e2a\u0e39\u0e48\u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e14\u0e35\u0e40\u0e14\u0e48\u0e19\u0e14\u0e49\u0e32\u0e19\u0e2b\u0e38\u0e48\u0e19\u0e22\u0e19\u0e15\u0e4c<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><a href=\"https:\/\/tubtimsiam04.ac.th\/?p=3451\" target=\"_blank\" rel=\" noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/drive.google.com\/thumbnail?id=1tEtYkrnKxh8tSILIpKDYCcFOz81rzp4t&amp;sz=s1024\" alt=\"\" style=\"border-style:none;border-width:0px;border-radius:10px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\">\u0e1c\u0e48\u0e32\u0e19\u0e01\u0e32\u0e23\u0e04\u0e31\u0e14\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e40\u0e02\u0e49\u0e32\u0e28\u0e36\u0e01\u0e29\u0e32\u0e15\u0e48\u0e2d \u0e19\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e19\u0e1c\u0e39\u0e49\u0e21\u0e35\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e14\u0e49\u0e32\u0e19\u0e2b\u0e38\u0e48\u0e19\u0e22\u0e19\u0e15\u0e4c<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large has-custom-border\"><a href=\"https:\/\/tubtimsiam04.ac.th\/?p=4542\" target=\"_blank\" rel=\" noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/drive.google.com\/thumbnail?id=1AR_SLqo8eQVfUmqvyGkULdoFyFAEajfH&amp;sz=s1024\" alt=\"\" style=\"border-radius:10px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\">\u201c\u0e2a\u0e38\u0e14\u0e22\u0e2d\u0e14\u0e04\u0e23\u0e39\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e21\u0e31\u0e18\u0e22\u0e21\u0e28\u0e36\u0e01\u0e29\u0e32 \u0e2a\u0e31\u0e07\u0e01\u0e31\u0e14\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19\u0e04\u0e13\u0e30\u0e01\u0e23\u0e23\u0e21\u0e01\u0e32\u0e23\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e02\u0e31\u0e49\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 \u0e1e.\u0e28. 2567\u201c \u0e01\u0e25\u0e38\u0e48\u0e21\u0e2a\u0e32\u0e23\u0e30\u0e01\u0e32\u0e23\u0e40\u0e23\u0e35\u0e22\u0e19\u0e23\u0e39\u0e49 \u0e27\u0e34\u0e17\u0e22\u0e32\u0e28\u0e32\u0e2a\u0e15\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35 \u0e2a\u0e32\u0e02\u0e32\u0e27\u0e34\u0e0a\u0e32 \u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e1b\u0e31\u0e0d\u0e0d\u0e32\u0e1b\u0e23\u0e30\u0e14\u0e34\u0e29\u0e10\u0e4c<\/p>\n<\/div>\n<\/div>\n\n\n\n<script>\n\tconst gd_link = 'https:\/\/drive.google.com\/drive\/u\/2\/folders\/17Mm9TBWtGkEhzhFkgM_KI6tRTssc2cc6';\n\tconst FOLDER_ID = gd_link.split('\/').pop();\n\n\tdocument.addEventListener('DOMContentLoaded', function() {\n\t\tconst linkElement = document.getElementById('driveLink');\n\t\tlinkElement.href = gd_link;\n\t\tlinkElement.textContent = gd_link;\n\t});\n<\/script>\n\n\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e08\u0e32\u0e01 Google Drive<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/1.6.7\/axios.min.js\"><\/script>\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/400.min.css\" rel=\"stylesheet\">\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/700.min.css\" rel=\"stylesheet\">\n    <style>\n        body {\n            font-family: 'Open Sans', sans-serif;\n            line-height: 1.6;\n            color: #333;\n            margin: 0 auto;\n            padding: 0px;\n            \/\/max-width: 1100px;\n        }\n        h1 {\n            color: #2c3e50;\n            text-align: center;\n            font-weight: 700;\n        }\n        .image-gallery {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr);\n            gap: 10px;\n            margin-bottom: 10px;\n            justify-content: center;\n        }\n        .image-item {\n            text-align: center;\n        }\n        .image-item img {\n            width: 500px;\n            height: auto;\n            border-radius: 5px;\n            box-shadow: 0 2px 5px rgba(0,0,0,0.3);\n            cursor: pointer;\ntransition: transform 0.3s ease, box-shadow 0.3s ease;\n\n        }\n\t\t.image-item img:hover {\n\t\t\ttransform: scale(1.05);\n\t\t\tbox-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);\n\t\t}\n        .pagination {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            margin: 20px 0;\n            flex-wrap: wrap;\n        }\n        .pagination button {\n            background-color: #3498db;\n            color: white;\n            border: none;\n            padding: 10px 15px;\n            margin: 5px;\n            cursor: pointer;\n            border-radius: 5px;\n            font-weight: 700;\n        }\n        .pagination button:hover {\n            background-color: #2980b9;\n        }\n        .pagination button:disabled {\n            background-color: #bdc3c7;\n            cursor: not-allowed;\n        }\n        .pagination button.active {\n            background-color: #95a5a6;\n        }\n        .reload-button {\n            display: block;\n            margin: 20px auto;\n            padding: 10px 20px;\n            background-color: #3498db;\n            color: white;\n            border: none;\n            border-radius: 5px;\n            cursor: pointer;\n            font-weight: 700;\n        }\n        .reload-button:hover {\n            background-color: #2980b9;\n        }\n        .fullscreen-overlay {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(0, 0, 0, 0.9);\n            z-index: 1000;\n            justify-content: center;\n            align-items: center;\n        }\n        .fullscreen-image {\n            max-width: 90%;\n            max-height: 90%;\n            object-fit: contain;\n        }\n        .close-button {\n            position: absolute;\n            top: 20px;\n            right: 30px;\n            color: #f1f1f1;\n            font-size: 40px;\n            font-weight: bold;\n            transition: 0.3s;\n            cursor: pointer;\n        }\n        .close-button:hover {\n            color: #bbb;\n        }\n        .nav-button {\n            position: absolute;\n            top: 50%;\n            transform: translateY(-50%);\n            color: #f1f1f1;\n            font-size: 40px;\n            font-weight: bold;\n            transition: 0.3s;\n            cursor: pointer;\n            background: none;\n            border: none;\n            padding: 0 20px;\n        }\n        .nav-button:hover {\n            color: #bbb;\n        }\n        .nav-button.prev {\n            left: 20px;\n        }\n        .nav-button.next {\n            right: 20px;\n        }\n    <\/style>\n<\/head>\n<body>\n\t<div id=\"paginationTop\" class=\"pagination\"><\/div>\n    <div id=\"imageGallery\" class=\"image-gallery\"><\/div>\n    <div id=\"paginationBottom\" class=\"pagination\"><\/div>\n\n    <div id=\"fullscreenOverlay\" class=\"fullscreen-overlay\">\n        <span class=\"close-button\" onclick=\"closeFullscreen()\">&times;<\/span>\n        <button class=\"nav-button prev\" onclick=\"navigateFullscreen(-1)\">&#10094;<\/button>\n        <img decoding=\"async\" id=\"fullscreenImage\" class=\"fullscreen-image\" src=\"\" alt=\"Fullscreen Image\">\n        <button class=\"nav-button next\" onclick=\"navigateFullscreen(1)\">&#10095;<\/button>\n    <\/div>\n\n    <script>\n        const API_KEY = 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo';\n        \/\/const FOLDER_ID = '1UhhfcpKYuEEOhufRz3RENcCxRtjTzi-1';\n        const IMAGES_PER_PAGE = 4;\n        let allImages = [];\n        let currentPage = 1;\n        let currentFullscreenIndex = 0;\n\n        async function loadImages() {\n            try {\n                const response = await axios.get(`https:\/\/www.googleapis.com\/drive\/v3\/files`, {\n                    params: {\n                        q: `'${FOLDER_ID}' in parents and mimeType contains 'image\/'`,\n                        fields: 'files(id, name, modifiedTime, webViewLink, thumbnailLink)',\n                        key: API_KEY\n                    }\n                });\n\n                allImages = response.data.files.sort((a, b) => a.name.localeCompare(b.name));\n                displayImages(1);\n                setupPagination();\n            } catch (error) {\n                console.error('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:', error);\n                document.getElementById('imageGallery').innerHTML = '<p style=\"color: red; text-align: center;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/p>';\n            }\n        }\n\n        function displayImages(page) {\n            const gallery = document.getElementById('imageGallery');\n            const startIndex = (page - 1) * IMAGES_PER_PAGE;\n            const endIndex = startIndex + IMAGES_PER_PAGE;\n            const pageImages = allImages.slice(startIndex, endIndex);\n\n            gallery.innerHTML = '';\n            pageImages.forEach((image, index) => {\n                const imageElement = document.createElement('div');\n                imageElement.className = 'image-item';\n                imageElement.innerHTML = `\n                    <img decoding=\"async\" src=\"${image.thumbnailLink.replace('=s220', '=w500')}\" alt=\"${image.name}\" onclick=\"openFullscreen(${startIndex + index})\">\n                `;\n                gallery.appendChild(imageElement);\n            });\n\n            currentPage = page;\n            updatePaginationButtons();\n        }\n\n        function setupPagination() {\n            const totalPages = Math.ceil(allImages.length \/ IMAGES_PER_PAGE);\n            const paginationTop = document.getElementById('paginationTop');\n            const paginationBottom = document.getElementById('paginationBottom');\n            paginationTop.innerHTML = '';\n            paginationBottom.innerHTML = '';\n\n            [paginationTop, paginationBottom].forEach(pagination => {\n                const prevButton = createButton('\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a', () => displayImages(currentPage - 1));\n                pagination.appendChild(prevButton);\n\n                for (let i = 1; i <= totalPages; i++) {\n                    if (i <= 3 || i > totalPages - 2 || Math.abs(i - currentPage) <= 1) {\n                        const pageButton = createButton(i.toString(), () => displayImages(i));\n                        pagination.appendChild(pageButton);\n                    } else if (pagination.lastChild.textContent !== '...') {\n                        const ellipsis = document.createElement('span');\n                        ellipsis.textContent = '...';\n                        pagination.appendChild(ellipsis);\n                    }\n                }\n\n                const nextButton = createButton('\u0e16\u0e31\u0e14\u0e44\u0e1b', () => displayImages(currentPage + 1));\n                pagination.appendChild(nextButton);\n            });\n\n            updatePaginationButtons();\n        }\n\n        function createButton(text, onClick) {\n            const button = document.createElement('button');\n            button.textContent = text;\n            button.onclick = onClick;\n            return button;\n        }\n\n        function updatePaginationButtons() {\n            const buttons = document.querySelectorAll('.pagination button');\n            const totalPages = Math.ceil(allImages.length \/ IMAGES_PER_PAGE);\n\n            buttons.forEach(button => {\n                if (button.textContent === '\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a') {\n                    button.disabled = currentPage === 1;\n                } else if (button.textContent === '\u0e16\u0e31\u0e14\u0e44\u0e1b') {\n                    button.disabled = currentPage === totalPages;\n                } else {\n                    button.classList.toggle('active', parseInt(button.textContent) === currentPage);\n                }\n            });\n        }\n\n        function openFullscreen(index) {\n            currentFullscreenIndex = index;\n            const fullscreenOverlay = document.getElementById('fullscreenOverlay');\n            const fullscreenImage = document.getElementById('fullscreenImage');\n            fullscreenImage.src = allImages[index].thumbnailLink.replace('=s220', '=w1920');\n            fullscreenOverlay.style.display = 'flex';\n        }\n\n        function closeFullscreen() {\n            const fullscreenOverlay = document.getElementById('fullscreenOverlay');\n            fullscreenOverlay.style.display = 'none';\n        }\n\n        function navigateFullscreen(direction) {\n            currentFullscreenIndex += direction;\n            if (currentFullscreenIndex < 0) {\n                currentFullscreenIndex = allImages.length - 1;\n            } else if (currentFullscreenIndex >= allImages.length) {\n                currentFullscreenIndex = 0;\n            }\n            openFullscreen(currentFullscreenIndex);\n        }\n\n        document.getElementById('fullscreenImage').addEventListener('click', function(e) {\n            e.stopPropagation();\n            navigateFullscreen(1);\n        });\n\n        document.addEventListener('keydown', function(e) {\n            if (document.getElementById('fullscreenOverlay').style.display === 'flex') {\n                if (e.key === 'ArrowLeft') {\n                    navigateFullscreen(-1);\n                } else if (e.key === 'ArrowRight') {\n                    navigateFullscreen(1);\n                } else if (e.key === 'Escape') {\n                    closeFullscreen();\n                }\n            }\n        });\n\n        loadImages();\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>best Practice \u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e41\u0e25\u0e30\u0e2a\u0e16\u0e32\u0e19\u0e28\u0e36\u0e01\u0e29\u0e32<\/strong><\/p>\n<\/blockquote>\n\n\n\n<!DOCTYPE html>\n<html lang=\"th\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e08\u0e32\u0e01 Google Drive<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/axios\/1.6.7\/axios.min.js\"><\/script>\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/400.min.css\" rel=\"stylesheet\">\n    <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/open-sans\/1.1.0\/sans\/700.min.css\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n    \n    <!-- \u0e22\u0e49\u0e32\u0e22\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e21\u0e32\u0e44\u0e27\u0e49\u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27 -->\n    <script>\n        \/\/ Global Configuration\n        const GALLERY_CONFIG = {\n            DRIVE_LINK: 'https:\/\/drive.google.com\/drive\/u\/2\/folders\/1BD7i8S2UCilmJ_M9o7xChQ5aWgGm0zpc',\n            API_KEY: 'AIzaSyDESM8XwBxuDqRj-yW-2cHHBEyf8NJ5CUo',\n            FOLDER_ID: '1BD7i8S2UCilmJ_M9o7xChQ5aWgGm0zpc', \/\/ Extract from DRIVE_LINK\n            IMAGES_PER_PAGE: 6\n        };\n    <\/script>\n    \n    <style>\n        \/* ... \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e40\u0e14\u0e34\u0e21 ... *\/\n    <\/style>\n<\/head>\n<body>\n    <script>\n        \/\/ Loading indicator functions\n        function toggleLoadingIndicator(show = true) {\n            const loadingDiv = document.createElement('div');\n            loadingDiv.id = 'gallery-loading-indicator';\n            loadingDiv.className = 'loading';\n            loadingDiv.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i>  \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14... ';\n            \n            if (show) {\n                document.body.appendChild(loadingDiv);\n            } else {\n                const existingLoader = document.getElementById('gallery-loading-indicator');\n                if (existingLoader) {\n                    existingLoader.remove();\n                }\n            }\n        }\n        \n        function delay(ms) {\n            return new Promise(resolve => setTimeout(resolve, ms));\n        }\n\n        \/\/ Set up drive link when document is ready\n        document.addEventListener('DOMContentLoaded', function() {\n            const driveLinkElement = document.getElementById('gallery-drive-link');\n            driveLinkElement.href = GALLERY_CONFIG.DRIVE_LINK;\n            driveLinkElement.textContent = GALLERY_CONFIG.DRIVE_LINK;\n        });\n\n        toggleLoadingIndicator(true);\n    <\/script>\n\n    <div id=\"gallery-scroll-anchor\"><\/div>\n   \n    <div id=\"gallery-pagination-top\" class=\"pagination\"><\/div>\n    <div id=\"gallery-image-container\" class=\"image-gallery\"><\/div>\n    <div id=\"gallery-pagination-bottom\" class=\"pagination\"><\/div>\n\n    <div id=\"gallery-fullscreen-overlay\" class=\"fullscreen-overlay\">\n        <span id=\"gallery-close-button\" class=\"close-button\" onclick=\"closeFullscreenView()\">&times;<\/span>\n        <button id=\"gallery-prev-button\" class=\"nav-button prev\" onclick=\"navigateFullscreenImage(-1)\">&#10094;<\/button>\n        <img decoding=\"async\" id=\"gallery-fullscreen-image\" class=\"fullscreen-image\" src=\"\" alt=\"Fullscreen Image\">\n        <button id=\"gallery-next-button\" class=\"nav-button next\" onclick=\"navigateFullscreenImage(1)\">&#10095;<\/button>\n    <\/div>\n\n    <script>\n        let galleryImages = [];\n        let currentGalleryPage = 1;\n        let currentImageIndex = 0;\n\n        async function loadGalleryImages() {\n            try {\n                const response = await axios.get(`https:\/\/www.googleapis.com\/drive\/v3\/files`, {\n                    params: {\n                        q: `'${GALLERY_CONFIG.FOLDER_ID}' in parents and mimeType contains 'image\/'`,\n                        fields: 'files(id, name, modifiedTime, webViewLink, thumbnailLink)',\n                        key: GALLERY_CONFIG.API_KEY\n                    }\n                });\n\n                galleryImages = response.data.files.sort((b, a) => a.name.localeCompare(b.name));\n                displayGalleryPage(1);\n                setupGalleryPagination();\n                \n                await delay(1000);\n                toggleLoadingIndicator(false);\n            } catch (error) {\n                console.error('\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25:', error);\n                document.getElementById('gallery-image-container').innerHTML = \n                    '<p style=\"color: red; text-align: center;\">\u0e40\u0e01\u0e34\u0e14\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e43\u0e19\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e01\u0e23\u0e38\u0e13\u0e32\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07<\/p>';\n            }\n        }\n\n        function displayGalleryPage(page) {\n            const galleryContainer = document.getElementById('gallery-image-container');\n            const startIndex = (page - 1) * GALLERY_CONFIG.IMAGES_PER_PAGE;\n            const endIndex = startIndex + GALLERY_CONFIG.IMAGES_PER_PAGE;\n            const pageImages = galleryImages.slice(startIndex, endIndex);\n\n            galleryContainer.innerHTML = '';\n            pageImages.forEach((image, index) => {\n                const imageElement = document.createElement('div');\n                imageElement.className = 'image-item';\n                imageElement.innerHTML = `\n                    <img decoding=\"async\" src=\"${image.thumbnailLink.replace('=s220', '=w525')}\" \n                         alt=\"${image.name}\" \n                         onclick=\"openFullscreenView(${startIndex + index})\">\n                `;\n                galleryContainer.appendChild(imageElement);\n            });\n\n            currentGalleryPage = page;\n            updateGalleryPaginationButtons();\n        }\n\n        function setupGalleryPagination() {\n            const totalPages = Math.ceil(galleryImages.length \/ GALLERY_CONFIG.IMAGES_PER_PAGE);\n            const topPagination = document.getElementById('gallery-pagination-top');\n            const bottomPagination = document.getElementById('gallery-pagination-bottom');\n            topPagination.innerHTML = '';\n            bottomPagination.innerHTML = '';\n\n            [topPagination, bottomPagination].forEach(pagination => {\n                pagination.appendChild(createGalleryButton('\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a', () => displayGalleryPage(currentGalleryPage - 1)));\n\n                for (let i = 1; i <= totalPages; i++) {\n                    if (i <= 3 || i > totalPages - 2 || Math.abs(i - currentGalleryPage) <= 1) {\n                        pagination.appendChild(createGalleryButton(i.toString(), () => displayGalleryPage(i)));\n                    } else if (pagination.lastChild.textContent !== '...') {\n                        const ellipsis = document.createElement('span');\n                        ellipsis.textContent = '...';\n                        pagination.appendChild(ellipsis);\n                    }\n                }\n\n                pagination.appendChild(createGalleryButton('\u0e16\u0e31\u0e14\u0e44\u0e1b', () => displayGalleryPage(currentGalleryPage + 1)));\n            });\n\n            updateGalleryPaginationButtons();\n        }\n\n        function updateGalleryPaginationButtons() {\n            const buttons = document.querySelectorAll('.pagination button');\n            const totalPages = Math.ceil(galleryImages.length \/ GALLERY_CONFIG.IMAGES_PER_PAGE);\n\n            buttons.forEach(button => {\n                if (button.textContent === '\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a') {\n                    button.disabled = currentGalleryPage === 1;\n                } else if (button.textContent === '\u0e16\u0e31\u0e14\u0e44\u0e1b') {\n                    button.disabled = currentGalleryPage === totalPages;\n                } else {\n                    button.classList.toggle('active', parseInt(button.textContent) === currentGalleryPage);\n                }\n            });\n        }\n\n        function openFullscreenView(index) {\n            currentImageIndex = index;\n            const overlay = document.getElementById('gallery-fullscreen-overlay');\n            const fullscreenImage = document.getElementById('gallery-fullscreen-image');\n            fullscreenImage.src = galleryImages[index].thumbnailLink.replace('=s220', '=w1920');\n            overlay.style.display = 'flex';\n        }\n\n        function closeFullscreenView() {\n            document.getElementById('gallery-fullscreen-overlay').style.display = 'none';\n        }\n\n        function navigateFullscreenImage(direction) {\n            currentImageIndex += direction;\n            if (currentImageIndex < 0) {\n                currentImageIndex = galleryImages.length - 1;\n            } else if (currentImageIndex >= galleryImages.length) {\n                currentImageIndex = 0;\n            }\n            openFullscreenView(currentImageIndex);\n        }\n\n        function scrollToGalleryTop() {\n            document.getElementById('gallery-scroll-anchor').scrollIntoView({ behavior: 'smooth' });\n        }\n\n        function createGalleryButton(text, onClick) {\n            const button = document.createElement('button');\n            button.textContent = text;\n            button.onclick = () => {\n                onClick();\n                scrollToGalleryTop();\n            };\n            return button;\n        }\n\n        \/\/ Event Listeners\n        document.getElementById('gallery-fullscreen-image').addEventListener('click', function(e) {\n            e.stopPropagation();\n            navigateFullscreenImage(1);\n        });\n\n        document.addEventListener('keydown', function(e) {\n            if (document.getElementById('gallery-fullscreen-overlay').style.display === 'flex') {\n                if (e.key === 'ArrowLeft') {\n                    navigateFullscreenImage(-1);\n                } else if (e.key === 'ArrowRight') {\n                    navigateFullscreenImage(1);\n                } else if (e.key === 'Escape') {\n                    closeFullscreenView();\n                }\n            }\n        });\n\n        \/\/ Initialize gallery\n        loadGalleryImages();\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos3\"><\/div>\n<script>\naddVideosToContainer('videos3', [\n'hwlUDmdZi-I?si=SE6vcwxQqKxLIudt' , \n'mF44lRSP8wA?si=DobTMpk9C1F2Y-TL' , \n'YRDB98uT4D4?si=UIlEJdKXHP6Du6_X' ,  \n'iDHE8x_GDwo?si=vqMec7EmEURtikqH'\n] );\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos4\"><\/div>\n<script>\naddVideosToContainer('videos4',[\n'XVqCYCjCTpg?si=dES16YD3_FiyrN3y',\n'sWE7eEWAspc?si=eWtUKfUDWgnOV_9T', \n'oMpLM6CVYU0?si=Su0oblgnQewQ3Qcd',   \n'lQ_UMGazOdU?si=ma_g3kqAIt4Izmp_'\n]);\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e01\u0e32\u0e23\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d \u0e17\u0e35\u0e21\u0e02\u0e48\u0e32\u0e27\u0e40\u0e22\u0e32\u0e27\u0e0a\u0e19<\/strong><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos5\"><\/div>\n<script>\naddVideosToContainer('videos5', [\n'lGDxAJ9drpo?si=ChHr2qR2o5MOIG8Q' , \n'cO8jSVhyQcM?si=Iptz13VtxF4BRZJz' ] );\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos6\"><\/div>\n<script>\naddVideosToContainer('videos6', [\n'PLoZpSb1Vfc?si=UZECLdj3Grw_nrwM'] );\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e40\u0e2a\u0e23\u0e34\u0e21\u0e07\u0e32\u0e19\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/strong><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos7\"><\/div>\n<script>\naddVideosToContainer('videos7', [\n'8lrq2Ti2ZWw?si=Y38cDswUHFKBitVS'] );\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos8\"><\/div>\n<script>\naddVideosToContainer('videos8', [\n'85sbUqIztVg?si=IPimVlsTc8ZX1txM'] );\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>\u0e14\u0e49\u0e32\u0e19\u0e14\u0e19\u0e15\u0e23\u0e35 \u0e41\u0e25\u0e30\u0e19\u0e32\u0e0e\u0e28\u0e34\u0e25\u0e1b\u0e4c<\/strong><\/p>\n<\/blockquote>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos9\"><\/div>\n<script>\naddVideosToContainer('videos9', [\n'1-O7bIipaiU?si=ok2tBCVJiDi8MGd1'] );\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div id=\"videos10\"><\/div>\n<script>\naddVideosToContainer('videos10', [\n'8Yd3oA9STSo?si=r-uKrL918OcwNXzs'] );\n<\/script>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0e1c\u0e25\u0e07\u0e32\u0e19\u0e14\u0e35\u0e40\u0e14\u0e48\u0e19\u0e01\u0e32\u0e23 Codin<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"colormag_page_container_layout":"no_sidebar_full_width","colormag_page_sidebar_layout":"no_sidebar","footnotes":""},"class_list":["post-90","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=90"}],"version-history":[{"count":79,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":4794,"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=\/wp\/v2\/pages\/90\/revisions\/4794"}],"wp:attachment":[{"href":"https:\/\/tubtimsiam04.ac.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}