{"id":23315,"date":"2026-01-26T09:55:24","date_gmt":"2026-01-26T01:55:24","guid":{"rendered":"https:\/\/cckght.jbcreative.hk\/?page_id=23315"},"modified":"2026-02-02T00:05:55","modified_gmt":"2026-02-01T16:05:55","slug":"%e5%ae%b6%e9%95%b7%e5%bf%83%e8%81%b2","status":"publish","type":"page","link":"https:\/\/cckght.jbcreative.hk\/en\/%e5%ae%b6%e9%95%b7%e5%bf%83%e8%81%b2\/","title":{"rendered":"\u5bb6\u9577\u5fc3\u8072"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"23315\" class=\"elementor elementor-23315\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d606f7a e-con-full e-flex e-con e-parent\" data-id=\"d606f7a\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a0764df e-con-full e-flex e-con e-parent\" data-id=\"a0764df\" data-element_type=\"container\">\n\t\t\t\t<div class=\"hf-elementor-layout elementor-element elementor-element-a8413ef elementor-widget elementor-widget-spacer\" data-id=\"a8413ef\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"hf-elementor-layout elementor-element elementor-element-fb18767 elementor-widget elementor-widget-html\" data-id=\"fb18767\" data-element_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>Photo Gallery<\/title>\r\n    <style>\r\n        body {\r\n            margin: 0;\r\n            font-family: Arial, sans-serif;\r\n            background-color: #FCF9F2;\r\n            \/\/padding: 20px;\r\n        }\r\n        .gallery-container {\r\n            max-width: 1040px;\r\n            margin: 0 auto;\r\n        }\r\n        \r\n        \/* \u4e3b\u5716\u5340\u57df *\/\r\n        .main-image-wrapper {\r\n            position: relative;\r\n            margin-bottom: 60px; \/* \u4e3b\u5716\u548c\u7f29\u5716\u9593\u8ddd\u9593\u669160px *\/\r\n        }\r\n        .main-image {\r\n            width: 100%;\r\n            height: auto%;\r\n            aspect-ratio: 4\/3;\r\n            object-fit: fill;\r\n            border-radius: 8px;\r\n        }\r\n        .main-arrow {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 40px;\r\n            height: 40px;\r\n            background: rgba(255,255,255,0.8);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n            border: none;\r\n            z-index: 2;\r\n        }\r\n        .main-arrow.left {\r\n            left: -50px; \/* \u79fb\u5230\u5716\u7247\u5916\u9762\u5de6\u4fa7 *\/\r\n        }\r\n        .main-arrow.right {\r\n            right: -50px; \/* \u79fb\u5230\u5716\u7247\u5916\u9762\u53f3\u4fa7 *\/\r\n        }\r\n        \r\n        \/* \u7f29\u5716\u5340\u57df *\/\r\n        .thumbnails-container {\r\n            position: relative;\r\n        }\r\n        .thumbnails {\r\n            display: flex;\r\n            gap: 10px;\r\n            overflow-x: auto;\r\n            scroll-behavior: smooth;\r\n            padding: 5px 0;\r\n            scrollbar-width: none; \/* \u9690\u85cf\u6eda\u52d5\u689d *\/\r\n        }\r\n        .thumbnails::-webkit-scrollbar {\r\n            display: none; \/* \u9690\u85cf\u6eda\u52d5\u689d *\/\r\n        }\r\n        .thumbnail {\r\n            flex: 0 0 calc(25% - 8px); \/* \u6bcf\u884c\u986f\u793a4\u500b\u7f29\u56fe *\/\r\n            cursor: pointer;\r\n            border-radius: 4px;\r\n            overflow: hidden;\r\n            position: relative;\r\n        }\r\n        .thumbnail img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            aspect-ratio: 4\/3;\r\n        }\r\n        .thumbnail.selected::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            border: 3px solid orange;\r\n            border-radius: 4px;\r\n        }\r\n        .thumb-arrow {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 30px;\r\n            height: 30px;\r\n            background: rgba(255,255,255,0.8);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            cursor: pointer;\r\n            box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n            border: none;\r\n            z-index: 2;\r\n        }\r\n        .thumb-arrow.left {\r\n            left: -35px;\r\n        }\r\n        .thumb-arrow.right {\r\n            right: -35px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"gallery-container\">\r\n        <!-- \u4e3b\u56fe\u533a\u57df -->\r\n        <div class=\"main-image-wrapper\">\r\n            <img decoding=\"async\" id=\"mainImage\" class=\"main-image\" src=\"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72471.png\" alt=\"Main Image\">\r\n            <button class=\"main-arrow left\" onclick=\"prevImage()\">\u276e<\/button>\r\n            <button class=\"main-arrow right\" onclick=\"nextImage()\">\u276f<\/button>\r\n        <\/div>\r\n        \r\n        <!-- \u7f29\u56fe\u533a\u57df -->\r\n        <div class=\"thumbnails-container\">\r\n            <button class=\"thumb-arrow left\" onclick=\"scrollThumbs('left')\">\u276e<\/button>\r\n            <div class=\"thumbnails\" id=\"thumbnailContainer\">\r\n                <!-- \u7f29\u56fe\u5c06\u901a\u8fc7JS\u52a8\u6001\u751f\u6210 -->\r\n            <\/div>\r\n            <button class=\"thumb-arrow right\" onclick=\"scrollThumbs('right')\">\u276f<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        \/\/ \u56fe\u7247\u6570\u636e\r\n        const images = [\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72471.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72472.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72473.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72474.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72475.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72476.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72477.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72478.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u72479.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724710.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724711.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724712.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724713.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724714.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724715.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724716.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724717.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724718.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724719.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724720.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724721.png\",\r\n            \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/01\/\u5716\u724722.png\"\r\n        ];\r\n        \r\n        let currentIndex = 0;\r\n        const mainImage = document.getElementById('mainImage');\r\n        const thumbnailContainer = document.getElementById('thumbnailContainer');\r\n        \r\n        \/\/ \u521d\u59cb\u5316\u7f29\u56fe\r\n        function initThumbnails() {\r\n            thumbnailContainer.innerHTML = '';\r\n            images.forEach((img, index) => {\r\n                const thumb = document.createElement('div');\r\n                thumb.className = 'thumbnail';\r\n                if(index === 0) thumb.classList.add('selected');\r\n                thumb.innerHTML = `<img decoding=\"async\" src=\"${img}\" alt=\"Thumbnail ${index+1}\">`;\r\n                thumb.onclick = () => selectImage(index);\r\n                thumbnailContainer.appendChild(thumb);\r\n            });\r\n        }\r\n        \r\n        \/\/ \u9009\u62e9\u56fe\u7247\r\n        function selectImage(index) {\r\n            currentIndex = index;\r\n            mainImage.src = images[currentIndex];\r\n            updateThumbnails();\r\n        }\r\n        \r\n        \/\/ \u4e0a\u4e00\u5f20\r\n        function prevImage() {\r\n            currentIndex = (currentIndex - 1 + images.length) % images.length;\r\n            selectImage(currentIndex);\r\n        }\r\n        \r\n        \/\/ \u4e0b\u4e00\u5f20\r\n        function nextImage() {\r\n            currentIndex = (currentIndex + 1) % images.length;\r\n            selectImage(currentIndex);\r\n        }\r\n        \r\n        \/\/ \u66f4\u65b0\u7f29\u56fe\u9009\u4e2d\u72b6\u6001\r\n        function updateThumbnails() {\r\n            document.querySelectorAll('.thumbnail').forEach((thumb, index) => {\r\n                thumb.classList.toggle('selected', index === currentIndex);\r\n            });\r\n            \r\n            \/\/ \u81ea\u52a8\u6eda\u52a8\u5230\u9009\u4e2d\u7684\u7f29\u56fe\r\n            const thumb = document.querySelectorAll('.thumbnail')[currentIndex];\r\n            if(thumb) {\r\n                thumb.scrollIntoView({\r\n                    behavior: 'smooth',\r\n                    block: 'nearest',\r\n                    inline: 'center'\r\n                });\r\n            }\r\n        }\r\n        \r\n        \/\/ \u6eda\u52a8\u7f29\u56fe\r\n        function scrollThumbs(direction) {\r\n            const scrollAmount = thumbnailContainer.offsetWidth * 0.8;\r\n            thumbnailContainer.scrollBy({\r\n                left: direction === 'left' ? -scrollAmount : scrollAmount,\r\n                behavior: 'smooth'\r\n            });\r\n        }\r\n        \r\n        \/\/ \u521d\u59cb\u5316\r\n        initThumbnails();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Photo Gallery \u276e \u276f \u276e  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-23315","page","type-page","status-publish","hentry","course-box"],"acf":[],"_links":{"self":[{"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/pages\/23315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/comments?post=23315"}],"version-history":[{"count":26,"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/pages\/23315\/revisions"}],"predecessor-version":[{"id":23526,"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/pages\/23315\/revisions\/23526"}],"wp:attachment":[{"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/media?parent=23315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}