{"id":18,"date":"2026-10-26T02:53:53","date_gmt":"2026-10-26T02:53:53","guid":{"rendered":"https:\/\/topview.pkjgroup.net\/?page_id=18"},"modified":"2026-10-26T04:55:35","modified_gmt":"2026-10-26T04:55:35","slug":"gallery","status":"publish","type":"page","link":"https:\/\/topview.pkjgroup.net\/?page_id=18","title":{"rendered":"GALLERY"},"content":{"rendered":"\n<div class=\"tv-gallery-page\">\n\n  <div class=\"tv-gallery-heading\">\n    <span class=\"tv-gallery-eyebrow\">TOPVIEW HOTEL<\/span>\n    <h2>Photo Gallery<\/h2>\n    <p>\u0e2a\u0e31\u0e21\u0e1c\u0e31\u0e2a\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e2a\u0e1a\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32<\/p>\n  <\/div>\n\n  <div class=\"tv-gallery-grid\">\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1611892440504-42a792e24d32?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01 1\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611892440504-42a792e24d32?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1611892440504-5a6f2b5c0c2c?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01 2\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611892440504-5a6f2b5c0c2c?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e40\u0e15\u0e35\u0e22\u0e07\u0e19\u0e2d\u0e19\u0e43\u0e19\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1566665797739-1674de7a421a?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01 3\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1566665797739-1674de7a421a?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1590490360182-c33d57733427?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01 4\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1590490360182-c33d57733427?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e2b\u0e49\u0e2d\u0e07\u0e19\u0e2d\u0e19\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e15\u0e35\u0e22\u0e07\u0e02\u0e19\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1564013799919-ab600027ffc6?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21 5\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1564013799919-ab600027ffc6?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e2d\u0e32\u0e04\u0e32\u0e23\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1571896349842-33c89424de2d?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2a\u0e34\u0e48\u0e07\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e14\u0e27\u0e01 6\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1571896349842-33c89424de2d?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e01\u0e1c\u0e48\u0e2d\u0e19\u0e41\u0e25\u0e30\u0e2a\u0e34\u0e48\u0e07\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e14\u0e27\u0e01\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1578683010236-d716f9a3f461?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01 7\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1578683010236-d716f9a3f461?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e01\u0e32\u0e23\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1582719478250-c89cae4dc85b?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01 8\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1582719478250-c89cae4dc85b?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e34\u0e48\u0e07\u0e2d\u0e33\u0e19\u0e27\u0e22\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e14\u0e27\u0e01\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n    <button class=\"tv-gallery-item\" type=\"button\"\n      data-full=\"https:\/\/images.unsplash.com\/photo-1595576508898-0ad5c879a061?auto=format&#038;fit=crop&#038;w=1800&#038;q=90\"\n      aria-label=\"\u0e14\u0e39\u0e20\u0e32\u0e1e\u0e2b\u0e49\u0e2d\u0e07\u0e1e\u0e31\u0e01 9\">\n      <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1595576508898-0ad5c879a061?auto=format&#038;fit=crop&#038;w=700&#038;q=80\" alt=\"\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21\" loading=\"lazy\">\n      <span class=\"tv-gallery-zoom\">\uff0b<\/span>\n    <\/button>\n\n  <\/div>\n<\/div>\n\n<!-- Lightbox -->\n<div class=\"tv-gallery-lightbox\" id=\"tvGalleryLightbox\"\n  role=\"dialog\" aria-modal=\"true\" aria-label=\"\u0e41\u0e2a\u0e14\u0e07\u0e20\u0e32\u0e1e\u0e02\u0e19\u0e32\u0e14\u0e43\u0e2b\u0e0d\u0e48\"\n  aria-hidden=\"true\">\n\n  <button class=\"tv-gallery-close\" type=\"button\"\n    aria-label=\"\u0e1b\u0e34\u0e14\u0e20\u0e32\u0e1e\">\u00d7<\/button>\n\n  <button class=\"tv-gallery-prev\" type=\"button\"\n    aria-label=\"\u0e20\u0e32\u0e1e\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\">\u2039<\/button>\n\n  <div class=\"tv-gallery-view\">\n    <img decoding=\"async\" id=\"tvGalleryLargeImage\" src=\"\" alt=\"\">\n    <div class=\"tv-gallery-counter\" id=\"tvGalleryCounter\">1 \/ 9<\/div>\n  <\/div>\n\n  <button class=\"tv-gallery-next\" type=\"button\"\n    aria-label=\"\u0e20\u0e32\u0e1e\u0e16\u0e31\u0e14\u0e44\u0e1b\">\u203a<\/button>\n<\/div>\n\n<style>\n\/* ===== Gallery Page ===== *\/\n.tv-gallery-page {\n  --tv-gold: #98713b;\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px 18px 45px;\n  box-sizing: border-box;\n}\n\n.tv-gallery-page *,\n.tv-gallery-lightbox * {\n  box-sizing: border-box;\n}\n\n.tv-gallery-heading {\n  text-align: center;\n  margin-bottom: 32px;\n}\n\n.tv-gallery-eyebrow {\n  display: inline-block;\n  color: var(--tv-gold);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 3px;\n  margin-bottom: 8px;\n}\n\n.tv-gallery-heading h2 {\n  color: #222;\n  font-size: clamp(28px, 4vw, 40px);\n  font-weight: 600;\n  margin: 0 0 10px;\n}\n\n.tv-gallery-heading p {\n  color: #777;\n  font-size: 15px;\n  margin: 0;\n}\n\n\/* 3 columns *\/\n.tv-gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n}\n\n.tv-gallery-item {\n  display: block;\n  position: relative;\n  width: 100%;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  overflow: hidden;\n  background: #eee;\n  cursor: zoom-in;\n  aspect-ratio: 4 \/ 3;\n}\n\n.tv-gallery-item img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform .4s ease;\n}\n\n.tv-gallery-item:hover img {\n  transform: scale(1.06);\n}\n\n.tv-gallery-zoom {\n  position: absolute;\n  right: 12px;\n  bottom: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  background: rgba(255,255,255,.94);\n  color: var(--tv-gold);\n  font-size: 24px;\n  opacity: 0;\n  transform: translateY(5px);\n  transition: .25s ease;\n}\n\n.tv-gallery-item:hover .tv-gallery-zoom,\n.tv-gallery-item:focus-visible .tv-gallery-zoom {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* ===== Fullscreen Lightbox ===== *\/\n.tv-gallery-lightbox {\n  display: none;\n  position: fixed;\n  inset: 0;\n  z-index: 999999;\n  width: 100%;\n  height: 100%;\n  padding: 60px 70px;\n  background: rgba(0,0,0,.94);\n  align-items: center;\n  justify-content: center;\n}\n\n.tv-gallery-lightbox.is-open {\n  display: flex;\n}\n\n.tv-gallery-view {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.tv-gallery-view img {\n  display: block;\n  max-width: 100%;\n  max-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: contain;\n  border-radius: 3px;\n}\n\n.tv-gallery-close,\n.tv-gallery-prev,\n.tv-gallery-next {\n  position: absolute;\n  z-index: 2;\n  border: 0;\n  color: #fff;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background .2s ease;\n}\n\n.tv-gallery-close {\n  top: 18px;\n  right: 25px;\n  width: 46px;\n  height: 46px;\n  border-radius: 50%;\n  background: rgba(255,255,255,.12);\n  font-size: 36px;\n  line-height: 1;\n}\n\n.tv-gallery-prev,\n.tv-gallery-next {\n  top: 50%;\n  transform: translateY(-50%);\n  width: 48px;\n  height: 64px;\n  border-radius: 5px;\n  background: rgba(255,255,255,.12);\n  font-size: 46px;\n  line-height: 1;\n}\n\n.tv-gallery-prev { left: 15px; }\n.tv-gallery-next { right: 15px; }\n\n.tv-gallery-close:hover,\n.tv-gallery-prev:hover,\n.tv-gallery-next:hover {\n  background: var(--tv-gold);\n}\n\n.tv-gallery-counter {\n  position: absolute;\n  bottom: -35px;\n  left: 50%;\n  transform: translateX(-50%);\n  color: #fff;\n  font-size: 13px;\n  letter-spacing: 1px;\n}\n\n\/* Tablet and mobile *\/\n@media (max-width: 768px) {\n  .tv-gallery-page {\n    padding: 15px 10px 30px;\n  }\n\n  .tv-gallery-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 10px;\n  }\n\n  .tv-gallery-heading {\n    margin-bottom: 22px;\n  }\n\n  .tv-gallery-heading p {\n    font-size: 13px;\n  }\n\n  .tv-gallery-zoom {\n    width: 30px;\n    height: 30px;\n    font-size: 20px;\n    opacity: 1;\n    transform: none;\n  }\n\n  .tv-gallery-lightbox {\n    padding: 55px 10px;\n  }\n\n  .tv-gallery-prev { left: 5px; }\n  .tv-gallery-next { right: 5px; }\n\n  .tv-gallery-prev,\n  .tv-gallery-next {\n    width: 38px;\n    height: 52px;\n    font-size: 36px;\n    background: rgba(0,0,0,.45);\n  }\n\n  .tv-gallery-close {\n    top: 8px;\n    right: 10px;\n  }\n}\n\n@media (max-width: 380px) {\n  .tv-gallery-grid {\n    gap: 7px;\n  }\n}\n<\/style>\n\n<script>\n(function () {\n  const gallery = document.querySelector('.tv-gallery-page');\n  const lightbox = document.getElementById('tvGalleryLightbox');\n\n  if (!gallery || !lightbox || lightbox.dataset.ready === 'true') return;\n  lightbox.dataset.ready = 'true';\n\n  const items = Array.from(gallery.querySelectorAll('.tv-gallery-item'));\n  const largeImage = document.getElementById('tvGalleryLargeImage');\n  const counter = document.getElementById('tvGalleryCounter');\n  const closeButton = lightbox.querySelector('.tv-gallery-close');\n  const prevButton = lightbox.querySelector('.tv-gallery-prev');\n  const nextButton = lightbox.querySelector('.tv-gallery-next');\n\n  let currentIndex = 0;\n  let lastFocusedElement = null;\n\n  function showImage(index) {\n    currentIndex = (index + items.length) % items.length;\n\n    const item = items[currentIndex];\n    const image = item.querySelector('img');\n\n    largeImage.src = item.dataset.full || image.src;\n    largeImage.alt = image.alt || '\u0e20\u0e32\u0e1e\u0e42\u0e23\u0e07\u0e41\u0e23\u0e21';\n    counter.textContent = (currentIndex + 1) + ' \/ ' + items.length;\n  }\n\n  function openLightbox(index) {\n    lastFocusedElement = document.activeElement;\n    showImage(index);\n    lightbox.classList.add('is-open');\n    lightbox.setAttribute('aria-hidden', 'false');\n    document.body.style.overflow = 'hidden';\n    closeButton.focus();\n  }\n\n  function closeLightbox() {\n    lightbox.classList.remove('is-open');\n    lightbox.setAttribute('aria-hidden', 'true');\n    document.body.style.overflow = '';\n    largeImage.src = '';\n\n    if (lastFocusedElement) lastFocusedElement.focus();\n  }\n\n  items.forEach(function (item, index) {\n    item.addEventListener('click', function () {\n      openLightbox(index);\n    });\n  });\n\n  closeButton.addEventListener('click', closeLightbox);\n  prevButton.addEventListener('click', function () {\n    showImage(currentIndex - 1);\n  });\n  nextButton.addEventListener('click', function () {\n    showImage(currentIndex + 1);\n  });\n\n  lightbox.addEventListener('click', function (event) {\n    if (event.target === lightbox) closeLightbox();\n  });\n\n  document.addEventListener('keydown', function (event) {\n    if (!lightbox.classList.contains('is-open')) return;\n\n    if (event.key === 'Escape') closeLightbox();\n    if (event.key === 'ArrowLeft') showImage(currentIndex - 1);\n    if (event.key === 'ArrowRight') showImage(currentIndex + 1);\n  });\n\n  \/* Swipe left\/right on phones *\/\n  let touchStartX = 0;\n\n  lightbox.addEventListener('touchstart', function (event) {\n    touchStartX = event.changedTouches[0].screenX;\n  }, { passive: true });\n\n  lightbox.addEventListener('touchend', function (event) {\n    const deltaX = event.changedTouches[0].screenX - touchStartX;\n\n    if (Math.abs(deltaX) < 50) return;\n    if (deltaX < 0) showImage(currentIndex + 1);\n    else showImage(currentIndex - 1);\n  }, { passive: true });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>TOPVIEW HOTEL Photo Gallery \u0e2a\u0e31\u0e21\u0e1c\u0e31\u0e2a\u0e1a\u0e23\u0e23\u0e22\u0e32\u0e01\u0e32\u0e28\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e14\u0e27\u0e01\u0e2a\u0e1a\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32 \uff0b \uff0b \uff0b \uff0b \uff0b \uff0b \uff0b \uff0b \uff0b \u00d7 \u2039 1 \/ 9 \u203a<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":2,"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/topview.pkjgroup.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}