{"id":13901,"date":"2025-11-25T10:58:48","date_gmt":"2025-11-25T03:58:48","guid":{"rendered":"https:\/\/www.doa.go.th\/oard2\/?page_id=13901"},"modified":"2025-11-25T11:37:55","modified_gmt":"2025-11-25T04:37:55","slug":"%e0%b8%84%e0%b8%b8%e0%b8%93%e0%b8%98%e0%b8%a3%e0%b8%a3%e0%b8%a1-%e0%b8%88%e0%b8%a3%e0%b8%b4%e0%b8%a2%e0%b8%98%e0%b8%a3%e0%b8%a3%e0%b8%a1%e0%b9%83%e0%b8%99%e0%b8%ad%e0%b8%87%e0%b8%84%e0%b9%8c","status":"publish","type":"page","link":"https:\/\/www.doa.go.th\/oard2\/?page_id=13901","title":{"rendered":"\u0e04\u0e38\u0e13\u0e18\u0e23\u0e23\u0e21 \u2013 \u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21\u0e43\u0e19\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"13901\" class=\"elementor elementor-13901\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8b37fbf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8b37fbf\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-41e8782\" data-id=\"41e8782\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f4a358c elementor-widget elementor-widget-html\" data-id=\"f4a358c\" 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<!DOCTYPE html>\r\n<html lang=\"th\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u0e20\u0e32\u0e1e\u0e2a\u0e44\u0e25\u0e14\u0e4c\u0e42\u0e0a\u0e27\u0e4c 8 \u0e23\u0e39\u0e1b + Lightbox<\/title>\r\n\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n        \r\n        body {\r\n            background-color: #f5f5f5;\r\n            min-height: 100vh;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            padding: 20px;\r\n        }\r\n        \r\n        .slideshow-container {\r\n            width: 90vw;\r\n            max-width: 1200px;\r\n            height: 60vh;\r\n            min-height: 400px;\r\n            max-height: 700px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-radius: 15px;\r\n            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\r\n            aspect-ratio: 16\/9;\r\n        }\r\n        \r\n        .slides {\r\n            display: flex;\r\n            transition: transform 0.6s ease-in-out;\r\n            height: 100%;\r\n            width: 100%;\r\n        }\r\n        \r\n        .slide {\r\n            min-width: 100%;\r\n            height: 100%;\r\n            flex-shrink: 0;\r\n        }\r\n        \r\n        .slide img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: contain;\r\n            display: block;\r\n            background-color: white;\r\n            cursor: zoom-in;\r\n        }\r\n        \r\n        .nav-button {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            background: rgba(0, 0, 0, 0.6);\r\n            color: white;\r\n            border: none;\r\n            width: clamp(40px, 5vw, 60px);\r\n            height: clamp(40px, 5vw, 60px);\r\n            border-radius: 50%;\r\n            font-size: clamp(1.2rem, 2vw, 1.8rem);\r\n            cursor: pointer;\r\n            transition: 0.3s ease;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            z-index: 10;\r\n        }\r\n        \r\n        .nav-button:hover {\r\n            background: rgba(0, 0, 0, 0.9);\r\n            transform: translateY(-50%) scale(1.15);\r\n        }\r\n        \r\n        .prev { left: 20px; }\r\n        .next { right: 20px; }\r\n        \r\n        .dots-container {\r\n            position: absolute;\r\n            bottom: 18px;\r\n            left: 0;\r\n            right: 0;\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 10px;\r\n            z-index: 10;\r\n        }\r\n        \r\n        .dot {\r\n            width: 12px;\r\n            height: 12px;\r\n            background: rgba(255,255,255,0.6);\r\n            border-radius: 50%;\r\n            cursor: pointer;\r\n            transition: 0.3s;\r\n        }\r\n        \r\n        .dot.active {\r\n            background: #fff;\r\n            transform: scale(1.3);\r\n            box-shadow: 0 0 8px rgba(255,255,255,0.9);\r\n        }\r\n\r\n        \/* Lightbox Popup *\/\r\n        .lightbox {\r\n            display: none;\r\n            position: fixed;\r\n            z-index: 2000;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: rgba(0,0,0,0.85);\r\n            justify-content: center;\r\n            align-items: center;\r\n            backdrop-filter: blur(4px);\r\n        }\r\n\r\n        .lightbox-content {\r\n            max-width: 90%;\r\n            max-height: 90%;\r\n            object-fit: contain;\r\n            border-radius: 10px;\r\n            box-shadow: 0 0 25px rgba(255,255,255,0.4);\r\n            animation: zoomIn .3s ease;\r\n        }\r\n\r\n        @keyframes zoomIn {\r\n            from { transform: scale(0.7); opacity: 0; }\r\n            to { transform: scale(1); opacity: 1; }\r\n        }\r\n\r\n        .lightbox .close {\r\n            position: absolute;\r\n            top: 20px;\r\n            right: 30px;\r\n            color: white;\r\n            font-size: 40px;\r\n            cursor: pointer;\r\n            font-weight: bold;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body>\r\n    <div class=\"slideshow-container\">\r\n        <div class=\"slides\">\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0004.jpg\">\r\n            <\/div>\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0003.jpg\">\r\n            <\/div>\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0002.jpg\">\r\n            <\/div>\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0009.jpg\">\r\n            <\/div>\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0008.jpg\">\r\n            <\/div>\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0007.jpg\">\r\n            <\/div>\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0006.jpg\">\r\n            <\/div>\r\n            <div class=\"slide\">\r\n                <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/11\/\u0e1b\u0e0a\u0e2a.\u0e08\u0e23\u0e34\u0e22\u0e18\u0e23\u0e23\u0e21-\u0e20\u0e32\u0e1e\u0e2a\u0e35_page-0005.jpg\">\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <button class=\"nav-button prev\">&#10094;<\/button>\r\n        <button class=\"nav-button next\">&#10095;<\/button>\r\n\r\n        <div class=\"dots-container\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Lightbox Popup -->\r\n    <div id=\"lightbox\" class=\"lightbox\">\r\n        <span class=\"close\">&times;<\/span>\r\n        <img class=\"lightbox-content\" id=\"lightbox-img\">\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const slides = document.querySelector('.slides');\r\n            const slideItems = document.querySelectorAll('.slide');\r\n            const prevButton = document.querySelector('.prev');\r\n            const nextButton = document.querySelector('.next');\r\n            const dotsContainer = document.querySelector('.dots-container');\r\n            \r\n            let currentIndex = 0;\r\n\r\n            function createDots() {\r\n                dotsContainer.innerHTML = '';\r\n                slideItems.forEach((_, index) => {\r\n                    const dot = document.createElement('div');\r\n                    dot.classList.add('dot');\r\n                    if (index === 0) dot.classList.add('active');\r\n                    dot.addEventListener('click', () => goToSlide(index));\r\n                    dotsContainer.appendChild(dot);\r\n                });\r\n            }\r\n\r\n            function goToSlide(index) {\r\n                currentIndex = index;\r\n                updateSlidePosition();\r\n                updateDots();\r\n            }\r\n\r\n            function updateSlidePosition() {\r\n                slides.style.transform = `translateX(-${currentIndex * 100}%)`;\r\n            }\r\n\r\n            function updateDots() {\r\n                const dots = document.querySelectorAll('.dot');\r\n                dots.forEach((dot, index) => {\r\n                    dot.classList.toggle('active', index === currentIndex);\r\n                });\r\n            }\r\n\r\n            nextButton.addEventListener('click', () => {\r\n                currentIndex = (currentIndex + 1) % slideItems.length;\r\n                goToSlide(currentIndex);\r\n            });\r\n\r\n            prevButton.addEventListener('click', () => {\r\n                currentIndex = (currentIndex - 1 + slideItems.length) % slideItems.length;\r\n                goToSlide(currentIndex);\r\n            });\r\n\r\n            createDots();\r\n\r\n            \/\/ ============ Lightbox ============\r\n            const lightbox = document.getElementById(\"lightbox\");\r\n            const lightboxImg = document.getElementById(\"lightbox-img\");\r\n            const closeBtn = document.querySelector(\".lightbox .close\");\r\n\r\n            document.querySelectorAll('.slide img').forEach(img => {\r\n                img.addEventListener('click', () => {\r\n                    lightbox.style.display = \"flex\";\r\n                    lightboxImg.src = img.src;\r\n                });\r\n            });\r\n\r\n            closeBtn.addEventListener('click', () => {\r\n                lightbox.style.display = \"none\";\r\n            });\r\n\r\n            lightbox.addEventListener('click', (e) => {\r\n                if (e.target === lightbox) {\r\n                    lightbox.style.display = \"none\";\r\n                }\r\n            });\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e20\u0e32\u0e1e\u0e2a\u0e44\u0e25\u0e14\u0e4c\u0e42\u0e0a\u0e27\u0e4c 8 \u0e23\u0e39\u0e1b + Lightbox &#10094; &#10095; &times;<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_crdt_document":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-13901","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/pages\/13901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13901"}],"version-history":[{"count":10,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/pages\/13901\/revisions"}],"predecessor-version":[{"id":13914,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/pages\/13901\/revisions\/13914"}],"wp:attachment":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}