{"id":23530,"date":"2026-02-23T16:17:52","date_gmt":"2026-02-23T08:17:52","guid":{"rendered":"https:\/\/cckght.jbcreative.hk\/?page_id=23530"},"modified":"2026-02-23T16:43:17","modified_gmt":"2026-02-23T08:43:17","slug":"%e6%a0%a1%e5%8f%8b%e5%96%9c%e8%a8%8a","status":"publish","type":"page","link":"https:\/\/cckght.jbcreative.hk\/en\/%e6%a0%a1%e5%8f%8b%e5%96%9c%e8%a8%8a\/","title":{"rendered":"\u6821\u53cb\u559c\u8a0a"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n 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: \/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\u5716\u5340\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\/02\/d6d2ef90-1.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\/02\/d6d2ef90-1.png\",\r\n \"https:\/\/cckght.jbcreative.hk\/wp-content\/uploads\/2026\/02\/be793424-1.png\",\r\n \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\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 […]<\/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-23530","page","type-page","status-publish","hentry","course-box"],"acf":[],"_links":{"self":[{"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/pages\/23530","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=23530"}],"version-history":[{"count":14,"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/pages\/23530\/revisions"}],"predecessor-version":[{"id":23549,"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/pages\/23530\/revisions\/23549"}],"wp:attachment":[{"href":"https:\/\/cckght.jbcreative.hk\/en\/wp-json\/wp\/v2\/media?parent=23530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}