{"id":28811,"date":"2026-01-21T19:14:05","date_gmt":"2026-01-21T19:14:05","guid":{"rendered":"https:\/\/sshglifestyle.com\/?page_id=28811"},"modified":"2026-01-21T19:39:03","modified_gmt":"2026-01-21T19:39:03","slug":"posters","status":"publish","type":"page","link":"https:\/\/sshglifestyle.com\/?page_id=28811","title":{"rendered":"Posters"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"28811\" class=\"elementor elementor-28811\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45b3ff4 wd-section-stretch-content e-flex e-con-boxed e-con e-parent\" data-id=\"45b3ff4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f04ca2a elementor-widget elementor-widget-html\" data-id=\"f04ca2a\" 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<!-- Premium Posters Gallery - SSHG Lifestyle -->\r\n<div class=\"sshg-posters-gallery\">\r\n  <!-- Header -->\r\n  <div class=\"sshg-gallery-header\">\r\n    <div class=\"sshg-brand-container\">\r\n      <div class=\"sshg-main-logo\">SSHG<\/div>\r\n      <div class=\"sshg-sub-logo\">LIFESTYLE<\/div>\r\n    <\/div>\r\n    <div class=\"sshg-gallery-title\">PREMIUM POSTER COLLECTION<\/div>\r\n  <\/div>\r\n\r\n  <!-- Gallery Grid -->\r\n  <div class=\"sshg-gallery-wrapper\">\r\n    <div class=\"sshg-grid-container\">\r\n      <!-- Posters will be loaded here -->\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Lightbox -->\r\n  <div class=\"sshg-lightbox-modal\">\r\n    <div class=\"sshg-lightbox-wrapper\">\r\n      <div class=\"sshg-lightbox-controls\">\r\n        <button class=\"sshg-close-btn\">\u2715<\/button>\r\n        <div class=\"sshg-nav-buttons\">\r\n          <button class=\"sshg-prev-btn\">\u2039<\/button>\r\n          <button class=\"sshg-next-btn\">\u203a<\/button>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"sshg-lightbox-image-container\">\r\n        <img decoding=\"async\" src=\"\" alt=\"\" class=\"sshg-lightbox-img\">\r\n      <\/div>\r\n      <div class=\"sshg-lightbox-info\">\r\n        <div class=\"sshg-image-counter\"><span id=\"current-img\">1<\/span> \/ <span id=\"total-imgs\">10<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Footer -->\r\n  <div class=\"sshg-gallery-footer\">\r\n    <div class=\"sshg-footer-content\">\r\n      <div class=\"sshg-colors-showcase\">\r\n        <div class=\"sshg-primary-color\" style=\"background-color: #e74505;\"><\/div>\r\n        <div class=\"sshg-secondary-color\" style=\"background-color: #014c5f;\"><\/div>\r\n      <\/div>\r\n      <div class=\"sshg-footer-text\">SSHG LIFESTYLE VISUAL GALLERY<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* Base Styles *\/\r\n.sshg-posters-gallery {\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n  background: #f8f9fa;\r\n  min-height: 100vh;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n\/* Header *\/\r\n.sshg-gallery-header {\r\n  background: linear-gradient(135deg, #014c5f 0%, #012f3a 100%);\r\n  padding: 2rem 1rem;\r\n  text-align: center;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n.sshg-gallery-header::after {\r\n  content: '';\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  height: 4px;\r\n  background: #e74505;\r\n}\r\n\r\n.sshg-brand-container {\r\n  margin-bottom: 1rem;\r\n}\r\n\r\n.sshg-main-logo {\r\n  font-size: 2.8rem;\r\n  font-weight: 900;\r\n  color: white;\r\n  letter-spacing: 2px;\r\n  line-height: 1;\r\n}\r\n\r\n.sshg-sub-logo {\r\n  font-size: 1rem;\r\n  color: #e74505;\r\n  letter-spacing: 4px;\r\n  font-weight: 600;\r\n  margin-top: 0.5rem;\r\n}\r\n\r\n.sshg-gallery-title {\r\n  color: rgba(255, 255, 255, 0.9);\r\n  font-size: 1.2rem;\r\n  font-weight: 300;\r\n  letter-spacing: 1px;\r\n}\r\n\r\n\/* Gallery Wrapper *\/\r\n.sshg-gallery-wrapper {\r\n  flex: 1;\r\n  padding: 2rem 1rem;\r\n  background: #f8f9fa;\r\n}\r\n\r\n.sshg-grid-container {\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* Grid Layout - Same for all devices *\/\r\n.sshg-posters-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n  gap: 1.5rem;\r\n  animation: gridFadeIn 0.6s ease;\r\n}\r\n\r\n@keyframes gridFadeIn {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n\/* Poster Item - Same for all devices *\/\r\n.sshg-poster-item {\r\n  position: relative;\r\n  border-radius: 8px;\r\n  overflow: hidden;\r\n  background: white;\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  aspect-ratio: 3\/4;\r\n}\r\n\r\n.sshg-poster-item:hover {\r\n  transform: translateY(-4px);\r\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.sshg-poster-img {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  display: block;\r\n  transition: transform 0.5s ease;\r\n}\r\n\r\n.sshg-poster-item:hover .sshg-poster-img {\r\n  transform: scale(1.05);\r\n}\r\n\r\n\/* Lightbox Modal - Same for all devices *\/\r\n.sshg-lightbox-modal {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background: rgba(0, 0, 0, 0.95);\r\n  display: none;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000;\r\n  opacity: 0;\r\n  transition: opacity 0.3s ease;\r\n  padding: 1rem;\r\n}\r\n\r\n.sshg-lightbox-modal.active {\r\n  display: flex;\r\n  opacity: 1;\r\n}\r\n\r\n.sshg-lightbox-wrapper {\r\n  width: 100%;\r\n  max-width: 1200px;\r\n  max-height: 90vh;\r\n  background: #111;\r\n  border-radius: 12px;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.sshg-lightbox-controls {\r\n  position: absolute;\r\n  top: 1rem;\r\n  right: 1rem;\r\n  left: 1rem;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  z-index: 10;\r\n}\r\n\r\n.sshg-close-btn {\r\n  background: rgba(255, 255, 255, 0.1);\r\n  border: 1px solid rgba(255, 255, 255, 0.2);\r\n  color: white;\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 50%;\r\n  font-size: 1.5rem;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 11;\r\n}\r\n\r\n.sshg-close-btn:hover {\r\n  background: #e74505;\r\n  border-color: #e74505;\r\n  transform: rotate(90deg);\r\n}\r\n\r\n.sshg-nav-buttons {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.sshg-prev-btn,\r\n.sshg-next-btn {\r\n  background: rgba(255, 255, 255, 0.1);\r\n  border: 1px solid rgba(255, 255, 255, 0.2);\r\n  color: white;\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 50%;\r\n  font-size: 1.5rem;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 11;\r\n}\r\n\r\n.sshg-prev-btn:hover,\r\n.sshg-next-btn:hover {\r\n  background: #e74505;\r\n  border-color: #e74505;\r\n  transform: scale(1.1);\r\n}\r\n\r\n.sshg-lightbox-image-container {\r\n  width: 100%;\r\n  height: calc(90vh - 60px);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 4rem 1rem 2rem;\r\n}\r\n\r\n.sshg-lightbox-img {\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  object-fit: contain;\r\n  display: block;\r\n  border-radius: 4px;\r\n  animation: imgFadeIn 0.4s ease;\r\n}\r\n\r\n@keyframes imgFadeIn {\r\n  from { opacity: 0; transform: scale(0.95); }\r\n  to { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n.sshg-lightbox-info {\r\n  position: absolute;\r\n  bottom: 1rem;\r\n  left: 0;\r\n  right: 0;\r\n  text-align: center;\r\n  padding: 0 1rem;\r\n}\r\n\r\n.sshg-image-counter {\r\n  color: white;\r\n  font-size: 1rem;\r\n  opacity: 0.9;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  padding: 0.5rem 1rem;\r\n  border-radius: 20px;\r\n  display: inline-block;\r\n}\r\n\r\n#current-img {\r\n  color: #e74505;\r\n  font-weight: 600;\r\n}\r\n\r\n\/* Footer *\/\r\n.sshg-gallery-footer {\r\n  background: #014c5f;\r\n  padding: 1.5rem 1rem;\r\n}\r\n\r\n.sshg-footer-content {\r\n  max-width: 1400px;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 1rem;\r\n}\r\n\r\n.sshg-colors-showcase {\r\n  display: flex;\r\n  gap: 1rem;\r\n}\r\n\r\n.sshg-primary-color,\r\n.sshg-secondary-color {\r\n  width: 24px;\r\n  height: 24px;\r\n  border-radius: 50%;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.sshg-footer-text {\r\n  color: rgba(255, 255, 255, 0.9);\r\n  font-size: 0.9rem;\r\n  letter-spacing: 1px;\r\n  text-align: center;\r\n}\r\n\r\n\/* Responsive Design - Keeping mobile exactly as before *\/\r\n@media (max-width: 768px) {\r\n  \/* Mobile styles - same behavior *\/\r\n  .sshg-gallery-header {\r\n    padding: 1.5rem 1rem;\r\n  }\r\n  \r\n  .sshg-main-logo {\r\n    font-size: 2.2rem;\r\n  }\r\n  \r\n  .sshg-sub-logo {\r\n    font-size: 0.9rem;\r\n    letter-spacing: 3px;\r\n  }\r\n  \r\n  .sshg-gallery-title {\r\n    font-size: 1rem;\r\n  }\r\n  \r\n  .sshg-gallery-wrapper {\r\n    padding: 1.5rem 1rem;\r\n  }\r\n  \r\n  .sshg-posters-grid {\r\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n    gap: 1rem;\r\n  }\r\n  \r\n  .sshg-lightbox-modal {\r\n    padding: 0.5rem;\r\n  }\r\n  \r\n  .sshg-lightbox-wrapper {\r\n    max-height: 95vh;\r\n  }\r\n  \r\n  .sshg-lightbox-image-container {\r\n    height: calc(95vh - 60px);\r\n    padding: 3.5rem 0.5rem 2rem;\r\n  }\r\n  \r\n  .sshg-close-btn {\r\n    width: 36px;\r\n    height: 36px;\r\n    font-size: 1.3rem;\r\n  }\r\n  \r\n  .sshg-prev-btn,\r\n  .sshg-next-btn {\r\n    width: 36px;\r\n    height: 36px;\r\n    font-size: 1.3rem;\r\n  }\r\n  \r\n  .sshg-gallery-footer {\r\n    padding: 1.5rem 1rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  \/* Small mobile - same behavior *\/\r\n  .sshg-posters-grid {\r\n    grid-template-columns: 1fr;\r\n    max-width: 400px;\r\n    margin: 0 auto;\r\n  }\r\n  \r\n  .sshg-poster-item {\r\n    aspect-ratio: 2\/3;\r\n  }\r\n  \r\n  .sshg-main-logo {\r\n    font-size: 1.8rem;\r\n  }\r\n  \r\n  .sshg-sub-logo {\r\n    font-size: 0.8rem;\r\n    letter-spacing: 2px;\r\n  }\r\n  \r\n  .sshg-lightbox-controls {\r\n    top: 0.5rem;\r\n    right: 0.5rem;\r\n    left: 0.5rem;\r\n  }\r\n  \r\n  .sshg-close-btn {\r\n    width: 32px;\r\n    height: 32px;\r\n    font-size: 1.2rem;\r\n  }\r\n  \r\n  .sshg-prev-btn,\r\n  .sshg-next-btn {\r\n    width: 32px;\r\n    height: 32px;\r\n    font-size: 1.2rem;\r\n  }\r\n  \r\n  .sshg-lightbox-image-container {\r\n    padding: 3rem 0.5rem 2rem;\r\n  }\r\n}\r\n\r\n\/* Desktop enhancements (only visual, same functionality) *\/\r\n@media (min-width: 769px) {\r\n  .sshg-gallery-header {\r\n    padding: 3rem 1rem;\r\n  }\r\n  \r\n  .sshg-main-logo {\r\n    font-size: 3.5rem;\r\n  }\r\n  \r\n  .sshg-sub-logo {\r\n    font-size: 1.2rem;\r\n    letter-spacing: 5px;\r\n  }\r\n  \r\n  .sshg-gallery-title {\r\n    font-size: 1.4rem;\r\n  }\r\n  \r\n  .sshg-gallery-wrapper {\r\n    padding: 3rem 1rem;\r\n  }\r\n  \r\n  .sshg-posters-grid {\r\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n    gap: 2rem;\r\n  }\r\n  \r\n  .sshg-close-btn {\r\n    width: 44px;\r\n    height: 44px;\r\n    font-size: 1.6rem;\r\n  }\r\n  \r\n  .sshg-prev-btn,\r\n  .sshg-next-btn {\r\n    width: 44px;\r\n    height: 44px;\r\n    font-size: 1.6rem;\r\n  }\r\n  \r\n  .sshg-gallery-footer {\r\n    padding: 2rem 1rem;\r\n  }\r\n}\r\n\r\n@media (min-width: 1025px) {\r\n  .sshg-posters-grid {\r\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n    gap: 2.5rem;\r\n  }\r\n  \r\n  .sshg-poster-item:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);\r\n  }\r\n}\r\n\r\n\/* Fix for touch devices *\/\r\n@media (hover: none) and (pointer: coarse) {\r\n  .sshg-poster-item:hover {\r\n    transform: none;\r\n  }\r\n  \r\n  .sshg-poster-item:active {\r\n    transform: scale(0.98);\r\n  }\r\n  \r\n  .sshg-close-btn:active,\r\n  .sshg-prev-btn:active,\r\n  .sshg-next-btn:active {\r\n    transform: scale(0.95);\r\n  }\r\n}\r\n\r\n\/* Ensure images are visible on all devices *\/\r\n.sshg-poster-img,\r\n.sshg-lightbox-img {\r\n  -webkit-user-select: none;\r\n  -moz-user-select: none;\r\n  -ms-user-select: none;\r\n  user-select: none;\r\n}\r\n\r\n\/* Loading state *\/\r\n.sshg-poster-item.loading {\r\n  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\r\n  background-size: 200% 100%;\r\n  animation: loading 1.5s infinite;\r\n}\r\n\r\n@keyframes loading {\r\n  0% { background-position: 200% 0; }\r\n  100% { background-position: -200% 0; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ Posters data\r\nconst sshgPostersData = [\r\n  {\r\n    id: 1,\r\n    image: \"https:\/\/i.ibb.co\/7t0pq6wZ\/Green-Project.png\",\r\n    title: \"Green Project\"\r\n  },\r\n  {\r\n    id: 2,\r\n    image: \"https:\/\/i.ibb.co\/qFd6hrtQ\/Real-estate.png\",\r\n    title: \"Real Estate\"\r\n  },\r\n  {\r\n    id: 3,\r\n    image: \"https:\/\/i.ibb.co\/7JNWVs0T\/False-2.png\",\r\n    title: \"Urban Design\"\r\n  },\r\n  {\r\n    id: 4,\r\n    image: \"https:\/\/i.ibb.co\/Q3tdMFnP\/False-1.png\",\r\n    title: \"Metropolitan\"\r\n  },\r\n  {\r\n    id: 5,\r\n    image: \"https:\/\/i.ibb.co\/KzmQD0WX\/Exterior-2.png\",\r\n    title: \"Exterior Design\"\r\n  },\r\n  {\r\n    id: 6,\r\n    image: \"https:\/\/i.ibb.co\/gLg5yrNG\/Exterior-1.png\",\r\n    title: \"Contemporary\"\r\n  },\r\n  {\r\n    id: 7,\r\n    image: \"https:\/\/i.ibb.co\/XfgpKfLy\/UPVC-2.png\",\r\n    title: \"UPVC Modern\"\r\n  },\r\n  {\r\n    id: 8,\r\n    image: \"https:\/\/i.ibb.co\/nqBg5c0w\/UPVC-1.png\",\r\n    title: \"UPVC Classic\"\r\n  },\r\n  {\r\n    id: 9,\r\n    image: \"https:\/\/i.ibb.co\/ymjt0gPS\/CCTV-1.png\",\r\n    title: \"CCTV Security\"\r\n  },\r\n  {\r\n    id: 10,\r\n    image: \"https:\/\/i.ibb.co\/5gcBvfrB\/CCTV-2.png\",\r\n    title: \"Surveillance Tech\"\r\n  }\r\n];\r\n\r\n\/\/ DOM Elements\r\nconst gridContainer = document.querySelector('.sshg-grid-container');\r\nconst lightboxModal = document.querySelector('.sshg-lightbox-modal');\r\nconst lightboxImg = document.querySelector('.sshg-lightbox-img');\r\nconst closeBtn = document.querySelector('.sshg-close-btn');\r\nconst prevBtn = document.querySelector('.sshg-prev-btn');\r\nconst nextBtn = document.querySelector('.sshg-next-btn');\r\nconst currentImgSpan = document.getElementById('current-img');\r\nconst totalImgsSpan = document.getElementById('total-imgs');\r\n\r\nlet currentIndex = 0;\r\nlet isLightboxOpen = false;\r\n\r\n\/\/ Initialize gallery\r\nfunction initGallery() {\r\n  renderGallery();\r\n  setupEventListeners();\r\n  preloadImages();\r\n  updateTotalCount();\r\n}\r\n\r\n\/\/ Render gallery grid\r\nfunction renderGallery() {\r\n  const grid = document.createElement('div');\r\n  grid.className = 'sshg-posters-grid';\r\n  \r\n  sshgPostersData.forEach((poster, index) => {\r\n    const posterItem = createPosterItem(poster, index);\r\n    grid.appendChild(posterItem);\r\n  });\r\n  \r\n  gridContainer.innerHTML = '';\r\n  gridContainer.appendChild(grid);\r\n}\r\n\r\n\/\/ Create poster item\r\nfunction createPosterItem(poster, index) {\r\n  const item = document.createElement('div');\r\n  item.className = 'sshg-poster-item';\r\n  item.setAttribute('data-index', index);\r\n  \r\n  const img = document.createElement('img');\r\n  img.className = 'sshg-poster-img';\r\n  img.src = poster.image;\r\n  img.alt = poster.title;\r\n  img.loading = 'lazy';\r\n  \r\n  \/\/ Add loading state\r\n  img.addEventListener('load', () => {\r\n    item.classList.remove('loading');\r\n  });\r\n  \r\n  item.appendChild(img);\r\n  \r\n  \/\/ Add click event\r\n  item.addEventListener('click', () => openLightbox(index));\r\n  \r\n  \/\/ Add keyboard support\r\n  item.addEventListener('keydown', (e) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      openLightbox(index);\r\n    }\r\n  });\r\n  \r\n  \/\/ Make focusable for accessibility\r\n  item.tabIndex = 0;\r\n  \r\n  \/\/ Add aria-label for screen readers\r\n  item.setAttribute('aria-label', `View ${poster.title} poster`);\r\n  \r\n  return item;\r\n}\r\n\r\n\/\/ Setup event listeners\r\nfunction setupEventListeners() {\r\n  \/\/ Lightbox controls\r\n  closeBtn.addEventListener('click', closeLightbox);\r\n  prevBtn.addEventListener('click', showPrevImage);\r\n  nextBtn.addEventListener('click', showNextImage);\r\n  \r\n  \/\/ Keyboard navigation\r\n  document.addEventListener('keydown', handleKeyboard);\r\n  \r\n  \/\/ Close lightbox on overlay click\r\n  lightboxModal.addEventListener('click', (e) => {\r\n    if (e.target === lightboxModal) {\r\n      closeLightbox();\r\n    }\r\n  });\r\n  \r\n  \/\/ Handle window resize\r\n  window.addEventListener('resize', handleResize);\r\n}\r\n\r\n\/\/ Handle keyboard navigation\r\nfunction handleKeyboard(e) {\r\n  if (!isLightboxOpen) return;\r\n  \r\n  switch(e.key) {\r\n    case 'Escape':\r\n      closeLightbox();\r\n      break;\r\n    case 'ArrowLeft':\r\n      showPrevImage();\r\n      break;\r\n    case 'ArrowRight':\r\n      showNextImage();\r\n      break;\r\n  }\r\n}\r\n\r\n\/\/ Handle window resize\r\nfunction handleResize() {\r\n  \/\/ Adjust lightbox image size on resize\r\n  if (isLightboxOpen) {\r\n    adjustLightboxImage();\r\n  }\r\n}\r\n\r\n\/\/ Adjust lightbox image size\r\nfunction adjustLightboxImage() {\r\n  const container = document.querySelector('.sshg-lightbox-image-container');\r\n  const img = document.querySelector('.sshg-lightbox-img');\r\n  \r\n  const containerWidth = container.clientWidth;\r\n  const containerHeight = container.clientHeight;\r\n  \r\n  \/\/ Ensure image fits within container\r\n  img.style.maxWidth = `${containerWidth - 40}px`;\r\n  img.style.maxHeight = `${containerHeight - 40}px`;\r\n}\r\n\r\n\/\/ Open lightbox\r\nfunction openLightbox(index) {\r\n  currentIndex = index;\r\n  isLightboxOpen = true;\r\n  \r\n  updateLightbox();\r\n  lightboxModal.classList.add('active');\r\n  document.body.style.overflow = 'hidden';\r\n  \r\n  \/\/ Set focus to close button for keyboard navigation\r\n  closeBtn.focus();\r\n}\r\n\r\n\/\/ Close lightbox\r\nfunction closeLightbox() {\r\n  isLightboxOpen = false;\r\n  lightboxModal.classList.remove('active');\r\n  document.body.style.overflow = '';\r\n  \r\n  \/\/ Return focus to the opened poster\r\n  const openedPoster = document.querySelector(`.sshg-poster-item[data-index=\"${currentIndex}\"]`);\r\n  if (openedPoster) {\r\n    openedPoster.focus();\r\n  }\r\n}\r\n\r\n\/\/ Show previous image\r\nfunction showPrevImage() {\r\n  currentIndex = (currentIndex - 1 + sshgPostersData.length) % sshgPostersData.length;\r\n  updateLightbox();\r\n}\r\n\r\n\/\/ Show next image\r\nfunction showNextImage() {\r\n  currentIndex = (currentIndex + 1) % sshgPostersData.length;\r\n  updateLightbox();\r\n}\r\n\r\n\/\/ Update lightbox content\r\nfunction updateLightbox() {\r\n  const poster = sshgPostersData[currentIndex];\r\n  \r\n  \/\/ Fade out current image\r\n  lightboxImg.style.opacity = '0';\r\n  \r\n  setTimeout(() => {\r\n    \/\/ Update image\r\n    lightboxImg.src = poster.image;\r\n    lightboxImg.alt = poster.title;\r\n    \r\n    \/\/ Update counter\r\n    currentImgSpan.textContent = currentIndex + 1;\r\n    \r\n    \/\/ Fade in new image\r\n    setTimeout(() => {\r\n      lightboxImg.style.opacity = '1';\r\n      adjustLightboxImage();\r\n    }, 50);\r\n  }, 200);\r\n}\r\n\r\n\/\/ Preload images\r\nfunction preloadImages() {\r\n  sshgPostersData.forEach(poster => {\r\n    const img = new Image();\r\n    img.src = poster.image;\r\n  });\r\n}\r\n\r\n\/\/ Update total count\r\nfunction updateTotalCount() {\r\n  totalImgsSpan.textContent = sshgPostersData.length;\r\n}\r\n\r\n\/\/ Handle image errors\r\nfunction handleImageError(img) {\r\n  img.style.backgroundColor = '#f0f0f0';\r\n  img.style.display = 'flex';\r\n  img.style.alignItems = 'center';\r\n  img.style.justifyContent = 'center';\r\n  img.style.color = '#999';\r\n  img.style.fontSize = '14px';\r\n  img.innerHTML = 'Image not available';\r\n}\r\n\r\n\/\/ Initialize when DOM is ready\r\nif (document.readyState === 'loading') {\r\n  document.addEventListener('DOMContentLoaded', initGallery);\r\n} else {\r\n  initGallery();\r\n}\r\n<\/script>\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>SSHG LIFESTYLE PREMIUM POSTER COLLECTION \u2715 \u2039 \u203a 1 \/ 10 SSHG LIFESTYLE VISUAL GALLERY<\/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-28811","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=\/wp\/v2\/pages\/28811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28811"}],"version-history":[{"count":13,"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=\/wp\/v2\/pages\/28811\/revisions"}],"predecessor-version":[{"id":28826,"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=\/wp\/v2\/pages\/28811\/revisions\/28826"}],"wp:attachment":[{"href":"https:\/\/sshglifestyle.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}