{"id":12626,"date":"2025-03-18T14:21:11","date_gmt":"2025-03-18T07:21:11","guid":{"rendered":"https:\/\/www.doa.go.th\/oard2\/?p=12626"},"modified":"2025-03-18T14:31:59","modified_gmt":"2025-03-18T07:31:59","slug":"%e0%b8%9c%e0%b8%ad-%e0%b8%aa%e0%b8%a7%e0%b8%9e-2-%e0%b8%aa%e0%b8%b1%e0%b8%81%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%b0%e0%b8%aa%e0%b8%b4%e0%b9%88%e0%b8%87%e0%b8%a8%e0%b8%b1%e0%b8%81%e0%b8%94%e0%b8%b4","status":"publish","type":"post","link":"https:\/\/www.doa.go.th\/oard2\/?p=12626","title":{"rendered":"\u0e1c\u0e2d.\u0e2a\u0e27\u0e1e.2 \u0e2a\u0e31\u0e01\u0e01\u0e32\u0e23\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19 \u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e43\u0e19\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e43\u0e2b\u0e21\u0e48"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"12626\" class=\"elementor elementor-12626\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6697765c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"6697765c\" 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-33a68c3b\" data-id=\"33a68c3b\" 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-54ac119b elementor-widget elementor-widget-text-editor\" data-id=\"54ac119b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p data-pm-slice=\"1 1 []\">\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 18 \u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 2568 \u0e19\u0e32\u0e22\u0e18\u0e07\u0e0a\u0e31\u0e22 \u0e04\u0e33\u0e42\u0e04\u0e15\u0e23 \u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e27\u0e34\u0e08\u0e31\u0e22\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e40\u0e02\u0e15\u0e17\u0e35\u0e48 2 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e14\u0e49\u0e27\u0e22\u0e04\u0e13\u0e30\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23 \u0e02\u0e49\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23 \u0e41\u0e25\u0e30\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48 \u0e44\u0e14\u0e49\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e1e\u0e34\u0e18\u0e35\u0e2a\u0e31\u0e01\u0e01\u0e32\u0e23\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c \u0e13 \u0e28\u0e32\u0e25\u0e1e\u0e23\u0e30\u0e1e\u0e23\u0e2b\u0e21 \u0e1a\u0e23\u0e34\u0e40\u0e27\u0e13\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e27\u0e34\u0e08\u0e31\u0e22\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e40\u0e02\u0e15\u0e17\u0e35\u0e48 2 \u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e2a\u0e31\u0e01\u0e01\u0e32\u0e23\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e28\u0e31\u0e01\u0e14\u0e34\u0e4c\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e07\u0e32\u0e19 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e34\u0e23\u0e34\u0e21\u0e07\u0e04\u0e25 \u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e43\u0e19\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e40\u0e02\u0e49\u0e32\u0e23\u0e31\u0e1a\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23<\/p>\r\n<p data-pm-slice=\"1 1 []\">\u0e17\u0e31\u0e49\u0e07\u0e19\u0e35\u0e49 \u0e19\u0e32\u0e22\u0e18\u0e07\u0e0a\u0e31\u0e22 \u0e04\u0e33\u0e42\u0e04\u0e15\u0e23 \u0e44\u0e14\u0e49\u0e01\u0e25\u0e48\u0e32\u0e27 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e02\u0e31\u0e1a\u0e40\u0e04\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e20\u0e32\u0e23\u0e01\u0e34\u0e08\u0e02\u0e2d\u0e07\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e27\u0e34\u0e08\u0e31\u0e22\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e01\u0e32\u0e23\u0e40\u0e01\u0e29\u0e15\u0e23\u0e40\u0e02\u0e15\u0e17\u0e35\u0e48 2 \u0e43\u0e2b\u0e49\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e30\u0e40\u0e01\u0e34\u0e14\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e2a\u0e39\u0e07\u0e2a\u0e38\u0e14<\/p>\t\t\t\t\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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1ae5afa elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1ae5afa\" 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-a45f136\" data-id=\"a45f136\" 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-dc7dd42 elementor-widget elementor-widget-html\" data-id=\"dc7dd42\" 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=\"en\">\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>Image Slideshow with Zoom<\/title>\r\n    <style>\r\n        * {\r\n            box-sizing: border-box;\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n        \r\n        body {\r\n            font-family: Arial, sans-serif;\r\n            background-color: #f5f5f5;\r\n            padding: 20px;\r\n        }\r\n        \r\n        .slideshow-container {\r\n            max-width: 800px;\r\n            position: relative;\r\n            margin: 0 auto;\r\n            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\r\n            background-color: white;\r\n            padding: 10px;\r\n        }\r\n        \r\n        .mySlides {\r\n            display: none;\r\n            text-align: center;\r\n        }\r\n        \r\n        .mySlides img {\r\n            max-width: 100%;\r\n            height: auto;\r\n            cursor: zoom-in;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .prev, .next {\r\n            cursor: pointer;\r\n            position: absolute;\r\n            top: 50%;\r\n            width: auto;\r\n            margin-top: -22px;\r\n            padding: 16px;\r\n            color: white;\r\n            font-weight: bold;\r\n            font-size: 18px;\r\n            transition: 0.6s ease;\r\n            border-radius: 0 3px 3px 0;\r\n            user-select: none;\r\n            background-color: rgba(0, 0, 0, 0.5);\r\n        }\r\n        \r\n        .next {\r\n            right: 10px;\r\n            border-radius: 3px 0 0 3px;\r\n        }\r\n        \r\n        .prev {\r\n            left: 10px;\r\n        }\r\n        \r\n        .prev:hover, .next:hover {\r\n            background-color: rgba(0, 0, 0, 0.8);\r\n        }\r\n        \r\n        .dot-container {\r\n            text-align: center;\r\n            padding: 20px 0;\r\n        }\r\n        \r\n        .dot {\r\n            cursor: pointer;\r\n            height: 15px;\r\n            width: 15px;\r\n            margin: 0 2px;\r\n            background-color: #bbb;\r\n            border-radius: 50%;\r\n            display: inline-block;\r\n            transition: background-color 0.6s ease;\r\n        }\r\n        \r\n        .active, .dot:hover {\r\n            background-color: #717171;\r\n        }\r\n        \r\n        .slide-number {\r\n            color: #f2f2f2;\r\n            font-size: 12px;\r\n            padding: 8px 12px;\r\n            position: absolute;\r\n            top: 0;\r\n        }\r\n        \r\n        \/* Modal (background) *\/\r\n        .modal {\r\n            display: none;\r\n            position: fixed;\r\n            z-index: 1;\r\n            padding-top: 50px;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            overflow: auto;\r\n            background-color: rgba(0, 0, 0, 0.9);\r\n        }\r\n        \r\n        \/* Modal Content *\/\r\n        .modal-content {\r\n            margin: auto;\r\n            display: block;\r\n            max-width: 90%;\r\n            max-height: 90%;\r\n        }\r\n        \r\n        \/* Close Button *\/\r\n        .close {\r\n            position: absolute;\r\n            top: 15px;\r\n            right: 35px;\r\n            color: #f1f1f1;\r\n            font-size: 40px;\r\n            font-weight: bold;\r\n            transition: 0.3s;\r\n            z-index: 2;\r\n        }\r\n        \r\n        .close:hover,\r\n        .close:focus {\r\n            color: #bbb;\r\n            text-decoration: none;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        \/* Caption *\/\r\n        .caption {\r\n            margin: auto;\r\n            display: block;\r\n            width: 80%;\r\n            max-width: 700px;\r\n            text-align: center;\r\n            color: #ccc;\r\n            padding: 10px 0;\r\n            height: 50px;\r\n        }\r\n        \r\n        \/* Modal Navigation *\/\r\n        .modal-prev, .modal-next {\r\n            cursor: pointer;\r\n            position: absolute;\r\n            top: 50%;\r\n            width: auto;\r\n            padding: 16px;\r\n            margin-top: -50px;\r\n            color: white;\r\n            font-weight: bold;\r\n            font-size: 30px;\r\n            transition: 0.6s ease;\r\n            border-radius: 0 3px 3px 0;\r\n            user-select: none;\r\n            background-color: rgba(0, 0, 0, 0.5);\r\n            z-index: 2;\r\n        }\r\n        \r\n        .modal-next {\r\n            right: 20px;\r\n            border-radius: 3px 0 0 3px;\r\n        }\r\n        \r\n        .modal-prev {\r\n            left: 20px;\r\n        }\r\n        \r\n        .modal-prev:hover, .modal-next:hover {\r\n            background-color: rgba(0, 0, 0, 0.8);\r\n        }\r\n        \r\n        \/* Animation *\/\r\n        .fade {\r\n            animation-name: fade;\r\n            animation-duration: 1.5s;\r\n        }\r\n        \r\n        @keyframes fade {\r\n            from {opacity: .4} \r\n            to {opacity: 1}\r\n        }\r\n        \r\n        \/* Responsive design *\/\r\n        @media only screen and (max-width: 700px) {\r\n            .modal-content {\r\n                width: 100%;\r\n            }\r\n            .modal-prev, .modal-next {\r\n                padding: 10px;\r\n                font-size: 22px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"slideshow-container\">\r\n        <!-- Images will be added here -->\r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">1 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8600-scaled.jpg\" alt=\"Image 1\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">2 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8598-scaled.jpg\" alt=\"Image 2\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">3 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8609-scaled.jpg\" alt=\"Image 3\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">4 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8614-scaled.jpg\" alt=\"Image 4\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">5 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8649-scaled.jpg\" alt=\"Image 5\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">6 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8664-scaled.jpg\" alt=\"Image 6\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">7 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8679-scaled.jpg\" alt=\"Image 7\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">8 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8684-scaled.jpg\" alt=\"Image 8\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">9 \/ 15<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8690-scaled.jpg\" alt=\"Image 9\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">10 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8701-scaled.jpg\" alt=\"Image 10\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">11 \/ 15<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8712-1-scaled.jpg\" alt=\"Image 11\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">12 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8759-scaled.jpg\" alt=\"Image 12\">\r\n        <\/div>\r\n        \r\n        <div class=\"mySlides fade\">\r\n            <div class=\"slide-number\">13 \/ 13<\/div>\r\n            <img decoding=\"async\" src=\"https:\/\/www.doa.go.th\/oard2\/wp-content\/uploads\/2025\/03\/IMG_8762-scaled.jpg\" alt=\"Image 13\">\r\n        <\/div>\r\n        \r\n    \r\n        <!-- Next and previous buttons -->\r\n        <a class=\"prev\" onclick=\"plusSlides(-1)\">&#10094;<\/a>\r\n        <a class=\"next\" onclick=\"plusSlides(1)\">&#10095;<\/a>\r\n    <\/div>\r\n    \r\n    <!-- Dots\/circles -->\r\n    <div class=\"dot-container\">\r\n        <span class=\"dot\" onclick=\"currentSlide(1)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(2)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(3)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(4)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(5)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(6)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(7)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(8)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(9)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(10)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(11)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(12)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(13)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(14)\"><\/span>\r\n        <span class=\"dot\" onclick=\"currentSlide(15)\"><\/span>\r\n    <\/div>\r\n    \r\n    <!-- The Modal for zooming -->\r\n    <div id=\"myModal\" class=\"modal\">\r\n        <span class=\"close\">&times;<\/span>\r\n        <a class=\"modal-prev\" onclick=\"plusModalSlides(-1)\">&#10094;<\/a>\r\n        <a class=\"modal-next\" onclick=\"plusModalSlides(1)\">&#10095;<\/a>\r\n        <img class=\"modal-content\" id=\"img01\">\r\n        <div id=\"caption\" class=\"caption\"><\/div>\r\n    <\/div>\r\n    \r\n    <script>\r\n        let slideIndex = 1;\r\n        let modalIndex = 1;\r\n        const totalSlides = 15;\r\n        \r\n        \/\/ Array to store image sources\r\n        const imageSources = [];\r\n        \r\n        \/\/ Collect all image sources on page load\r\n        window.onload = function() {\r\n            const images = document.querySelectorAll('.mySlides img');\r\n            images.forEach(img => {\r\n                imageSources.push({\r\n                    src: img.src,\r\n                    alt: img.alt\r\n                });\r\n            });\r\n            \r\n            showSlides(slideIndex);\r\n        };\r\n        \r\n        \/\/ Next\/previous controls for main slideshow\r\n        function plusSlides(n) {\r\n            showSlides(slideIndex += n);\r\n        }\r\n        \r\n        \/\/ Thumbnail image controls for main slideshow\r\n        function currentSlide(n) {\r\n            showSlides(slideIndex = n);\r\n        }\r\n        \r\n        \/\/ Show slides for main slideshow\r\n        function showSlides(n) {\r\n            let i;\r\n            let slides = document.getElementsByClassName(\"mySlides\");\r\n            let dots = document.getElementsByClassName(\"dot\");\r\n            if (n > slides.length) {slideIndex = 1}\r\n            if (n < 1) {slideIndex = slides.length}\r\n            for (i = 0; i < slides.length; i++) {\r\n                slides[i].style.display = \"none\";\r\n            }\r\n            for (i = 0; i < dots.length; i++) {\r\n                dots[i].className = dots[i].className.replace(\" active\", \"\");\r\n            }\r\n            slides[slideIndex-1].style.display = \"block\";\r\n            dots[slideIndex-1].className += \" active\";\r\n        }\r\n        \r\n        \/\/ Next\/previous controls for modal slideshow\r\n        function plusModalSlides(n) {\r\n            showModalImage(modalIndex += n);\r\n        }\r\n        \r\n        \/\/ Show image in modal\r\n        function showModalImage(n) {\r\n            if (n > totalSlides) {modalIndex = 1}\r\n            if (n < 1) {modalIndex = totalSlides}\r\n            \r\n            const modalImg = document.getElementById(\"img01\");\r\n            const captionText = document.getElementById(\"caption\");\r\n            \r\n            modalImg.src = imageSources[modalIndex-1].src;\r\n            captionText.innerHTML = \"Image \" + modalIndex + \" \/ \" + totalSlides;\r\n            \r\n            \/\/ Also update the main slideshow to match\r\n            currentSlide(modalIndex);\r\n        }\r\n        \r\n        \/\/ Get the modal\r\n        const modal = document.getElementById(\"myModal\");\r\n        \r\n        \/\/ Get the modal image and caption\r\n        const modalImg = document.getElementById(\"img01\");\r\n        const captionText = document.getElementById(\"caption\");\r\n        \r\n        \/\/ Get all images and set up click handlers\r\n        const images = document.querySelectorAll('.mySlides img');\r\n        images.forEach((img, index) => {\r\n            img.onclick = function() {\r\n                modal.style.display = \"block\";\r\n                modalIndex = index + 1;\r\n                modalImg.src = this.src;\r\n                captionText.innerHTML = \"Image \" + modalIndex + \" \/ \" + totalSlides;\r\n            }\r\n        });\r\n        \r\n        \/\/ Get the <span> element that closes the modal\r\n        const span = document.getElementsByClassName(\"close\")[0];\r\n        \r\n        \/\/ When the user clicks on <span> (x), close the modal\r\n        span.onclick = function() {\r\n            modal.style.display = \"none\";\r\n        }\r\n        \r\n        \/\/ Close the modal when clicking outside the image\r\n        modal.onclick = function(event) {\r\n            if (event.target === modal) {\r\n                modal.style.display = \"none\";\r\n            }\r\n        }\r\n        \r\n        \/\/ Add keyboard navigation\r\n        document.addEventListener('keydown', function(event) {\r\n            \/\/ Close modal with Escape key\r\n            if (event.key === \"Escape\" && modal.style.display === \"block\") {\r\n                modal.style.display = \"none\";\r\n            }\r\n            \r\n            \/\/ Navigate with arrow keys when modal is open\r\n            if (modal.style.display === \"block\") {\r\n                if (event.key === \"ArrowLeft\") {\r\n                    plusModalSlides(-1);\r\n                } else if (event.key === \"ArrowRight\") {\r\n                    plusModalSlides(1);\r\n                }\r\n            } else {\r\n                \/\/ Navigate main slideshow with arrow keys when modal is closed\r\n                if (event.key === \"ArrowLeft\") {\r\n                    plusSlides(-1);\r\n                } else if (event.key === \"ArrowRight\") {\r\n                    plusSlides(1);\r\n                }\r\n            }\r\n        });\r\n    <\/script>\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>\u0e27\u0e31\u0e19\u0e17\u0e35\u0e48 18 \u0e21\u0e35\u0e19\u0e32\u0e04\u0e21 2568 \u0e19\u0e32\u0e22\u0e18\u0e07\u0e0a\u0e31\u0e22 \u0e04\u0e33\u0e42\u0e04\u0e15\u0e23 \u0e1c\u0e39\u0e49\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e33\u0e19\u0e31\u0e01\u0e27 [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":12627,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_crdt_document":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-12626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/posts\/12626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=12626"}],"version-history":[{"count":7,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/posts\/12626\/revisions"}],"predecessor-version":[{"id":12650,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/posts\/12626\/revisions\/12650"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=\/wp\/v2\/media\/12627"}],"wp:attachment":[{"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.doa.go.th\/oard2\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}