{"id":202,"date":"2025-10-29T09:11:33","date_gmt":"2025-10-29T09:11:33","guid":{"rendered":"https:\/\/actionstories.co.za\/?page_id=202"},"modified":"2025-11-04T04:04:42","modified_gmt":"2025-11-04T04:04:42","slug":"issue-4","status":"publish","type":"page","link":"https:\/\/actionstories.co.za\/?page_id=202","title":{"rendered":"issue 4"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"202\" class=\"elementor elementor-202\">\n\t\t\t\t<main class=\"elementor-element elementor-element-a48c7e3 e-con-full e-flex e-con e-parent\" data-id=\"a48c7e3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d3c4142 elementor-widget elementor-widget-html\" data-id=\"d3c4142\" data-element_type=\"widget\" data-widget_type=\"html.default\">\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>Action Stories - Issue #4: WAT GAAN AN, GURU?<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- HEADER -->\r\n<header class=\"manga-header\">\r\n  <div class=\"header-container\">\r\n    <div class=\"logo-section\">\r\n      <a href=\"\/\" class=\"logo-link\">\r\n        <span class=\"action-text\">ACTION<\/span>\r\n        <span class=\"stories-text\">STORIES<\/span>\r\n      <\/a>\r\n    <\/div>\r\n    <nav class=\"issue-nav\">\r\n      <a href=\"\/\" class=\"nav-link\">\u2190 Back to Home<\/a>\r\n      <a href=\"#read\" class=\"nav-link\">Start Reading<\/a>\r\n    <\/nav>\r\n  <\/div>\r\n<\/header>\r\n\r\n<!-- ISSUE HERO SECTION -->\r\n<section class=\"issue-hero\">\r\n  <div class=\"issue-hero-container\">\r\n    <div class=\"issue-cover-section\">\r\n      <img decoding=\"async\" src=\"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/issue-4-1.png\" alt=\"Issue #4 Cover\" class=\"issue-cover-image\">\r\n    <\/div>\r\n    <div class=\"issue-info-section\">\r\n      <div class=\"issue-badge\">Issue #4<\/div>\r\n      <h1 class=\"issue-title\">WAT GAAN AN, GURU?<\/h1>\r\n      <p class=\"issue-description\">Having defeated the Threes, Guru's win is short lived as he is easily crushed by the man in the yellow mask. And whats worse: the man knows Guru's real name. On the other side of Paradise Park, the Triple Threes are licking their wounds and angry at the loss of one of their own. Seargant suspects Sterring and will do what ever it takes to find the truth.<\/p>\r\n      <div class=\"issue-stats\">\r\n        <div class=\"stat-item\">\r\n          <span class=\"stat-label\">Pages<\/span>\r\n          <span class=\"stat-value\">27<\/span>\r\n        <\/div>\r\n        <div class=\"stat-item\">\r\n          <span class=\"stat-label\">Released<\/span>\r\n          <span class=\"stat-value\">Sep 2025<\/span>\r\n        <\/div>\r\n        <div class=\"stat-item\">\r\n          <span class=\"stat-label\">Series<\/span>\r\n          <span class=\"stat-value\">Paradise Park<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <a href=\"#read\" class=\"start-reading-btn\">Start Reading \u2192<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- PAGE GALLERY SECTION -->\r\n<section class=\"page-gallery-section\" id=\"read\">\r\n  <div class=\"gallery-container\">\r\n    <h2 class=\"gallery-title\">All Pages<\/h2>\r\n    <p class=\"gallery-subtitle\">Click any page to start reading<\/p>\r\n\r\n    <div class=\"page-grid\" id=\"pageGrid\">\r\n      <!-- Pages will be dynamically inserted here by JavaScript -->\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- LIGHTBOX READER -->\r\n<div class=\"lightbox-overlay\" id=\"lightboxOverlay\">\r\n  <button class=\"lightbox-close\" id=\"closeBtn\">\u00d7<\/button>\r\n  <button class=\"lightbox-nav lightbox-prev\" id=\"prevBtn\">\u2039<\/button>\r\n  <button class=\"lightbox-nav lightbox-next\" id=\"nextBtn\">\u203a<\/button>\r\n\r\n  <div class=\"lightbox-content\">\r\n    <img decoding=\"async\" src=\"\" alt=\"Manga Page\" class=\"lightbox-image\" id=\"lightboxImage\">\r\n    <div class=\"lightbox-counter\" id=\"pageCounter\">Page 1 of 27<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* GLOBAL STYLES *\/\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;\r\n  background: #0a0a0a;\r\n  color: #ffffff;\r\n  line-height: 1.6;\r\n  margin: 0;\r\n  padding: 0;\r\n  width: 100%;\r\n  overflow-x: hidden;\r\n}\r\n\r\n\/* HEADER *\/\r\n.manga-header {\r\n  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);\r\n  border-bottom: 2px solid rgba(255, 70, 85, 0.3);\r\n  padding: 20px 0;\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 100;\r\n  backdrop-filter: blur(10px);\r\n}\r\n\r\n.header-container {\r\n  max-width: 100%;\r\n  margin: 0;\r\n  padding: 0 40px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 20px;\r\n}\r\n\r\n.logo-link {\r\n  text-decoration: none;\r\n  display: flex;\r\n  gap: 15px;\r\n  align-items: center;\r\n}\r\n\r\n.action-text,\r\n.stories-text {\r\n  font-size: 2rem;\r\n  font-weight: 900;\r\n  letter-spacing: 2px;\r\n  text-transform: uppercase;\r\n  background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n}\r\n\r\n.issue-nav {\r\n  display: flex;\r\n  gap: 30px;\r\n}\r\n\r\n.nav-link {\r\n  color: #fff;\r\n  text-decoration: none;\r\n  font-weight: 600;\r\n  font-size: 1.1rem;\r\n  transition: all 0.3s ease;\r\n  padding: 10px 20px;\r\n  border-radius: 25px;\r\n}\r\n\r\n.nav-link:hover {\r\n  background: rgba(255, 70, 85, 0.1);\r\n  color: #ff4655;\r\n}\r\n\r\n\/* ISSUE HERO SECTION *\/\r\n.issue-hero {\r\n  background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);\r\n  padding: 80px 20px;\r\n}\r\n\r\n.issue-hero-container {\r\n  max-width: 100%;\r\n  margin: 0;\r\n  padding: 0 40px;\r\n  display: grid;\r\n  grid-template-columns: 1fr 1.5fr;\r\n  gap: 60px;\r\n  align-items: center;\r\n}\r\n\r\n.issue-cover-section {\r\n  position: relative;\r\n}\r\n\r\n.issue-cover-image {\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 20px;\r\n  box-shadow: 0 20px 60px rgba(255, 70, 85, 0.3);\r\n  border: 3px solid rgba(255, 70, 85, 0.4);\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.issue-cover-image:hover {\r\n  transform: scale(1.02);\r\n}\r\n\r\n.issue-info-section {\r\n  padding: 20px;\r\n}\r\n\r\n.issue-badge {\r\n  display: inline-block;\r\n  background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n  color: white;\r\n  padding: 8px 20px;\r\n  border-radius: 20px;\r\n  font-weight: 700;\r\n  font-size: 0.9rem;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.issue-title {\r\n  font-size: 4rem;\r\n  font-weight: 900;\r\n  margin-bottom: 20px;\r\n  background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  line-height: 1.2;\r\n}\r\n\r\n.issue-description {\r\n  font-size: 1.3rem;\r\n  line-height: 1.8;\r\n  color: #ccc;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.issue-stats {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 20px;\r\n  margin-bottom: 40px;\r\n}\r\n\r\n.stat-item {\r\n  background: rgba(255, 255, 255, 0.05);\r\n  padding: 20px;\r\n  border-radius: 15px;\r\n  border: 2px solid rgba(255, 70, 85, 0.2);\r\n  text-align: center;\r\n}\r\n\r\n.stat-label {\r\n  display: block;\r\n  font-size: 0.9rem;\r\n  color: #999;\r\n  margin-bottom: 10px;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n}\r\n\r\n.stat-value {\r\n  display: block;\r\n  font-size: 2rem;\r\n  font-weight: 900;\r\n  color: #ff4655;\r\n}\r\n\r\n.start-reading-btn {\r\n  display: inline-block;\r\n  padding: 18px 45px;\r\n  background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n  color: white;\r\n  text-decoration: none;\r\n  border-radius: 30px;\r\n  font-weight: 700;\r\n  font-size: 1.2rem;\r\n  transition: all 0.3s ease;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1px;\r\n}\r\n\r\n.start-reading-btn:hover {\r\n  transform: translateY(-3px);\r\n  box-shadow: 0 10px 30px rgba(255, 70, 85, 0.5);\r\n}\r\n\r\n\/* PAGE GALLERY SECTION *\/\r\n.page-gallery-section {\r\n  background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);\r\n  padding: 80px 20px;\r\n}\r\n\r\n.gallery-container {\r\n  max-width: 100%;\r\n  margin: 0;\r\n  padding: 0 40px;\r\n}\r\n\r\n.gallery-title {\r\n  font-size: 3rem;\r\n  font-weight: 900;\r\n  text-align: center;\r\n  margin-bottom: 10px;\r\n  background: linear-gradient(135deg, #ff4655 0%, #ff8a00 100%);\r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent;\r\n  background-clip: text;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.gallery-subtitle {\r\n  text-align: center;\r\n  font-size: 1.2rem;\r\n  color: #999;\r\n  margin-bottom: 50px;\r\n}\r\n\r\n.page-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(4, 1fr);\r\n  gap: 30px;\r\n}\r\n\r\n.page-item {\r\n  position: relative;\r\n  cursor: pointer;\r\n  border-radius: 15px;\r\n  overflow: hidden;\r\n  border: 2px solid rgba(255, 255, 255, 0.1);\r\n  transition: all 0.3s ease;\r\n  background: rgba(255, 255, 255, 0.05);\r\n}\r\n\r\n.page-item:hover {\r\n  transform: translateY(-10px);\r\n  border-color: rgba(255, 70, 85, 0.6);\r\n  box-shadow: 0 15px 40px rgba(255, 70, 85, 0.3);\r\n}\r\n\r\n.page-thumbnail {\r\n  width: 100%;\r\n  height: auto;\r\n  display: block;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.page-item:hover .page-thumbnail {\r\n  transform: scale(1.05);\r\n}\r\n\r\n.page-number {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  background: linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent);\r\n  padding: 15px;\r\n  text-align: center;\r\n  font-weight: 700;\r\n  font-size: 1.1rem;\r\n  color: #ff4655;\r\n}\r\n\r\n\/* LIGHTBOX READER *\/\r\n.lightbox-overlay {\r\n  display: none;\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.98);\r\n  z-index: 1000;\r\n  animation: fadeIn 0.3s ease;\r\n}\r\n\r\n.lightbox-overlay.active {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n@keyframes fadeIn {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n.lightbox-content {\r\n  max-width: 90%;\r\n  max-height: 90%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  position: relative;\r\n}\r\n\r\n.lightbox-image {\r\n  max-width: 100%;\r\n  max-height: 85vh;\r\n  width: auto;\r\n  height: auto;\r\n  object-fit: contain;\r\n  border-radius: 10px;\r\n  box-shadow: 0 20px 60px rgba(255, 70, 85, 0.4);\r\n}\r\n\r\n.lightbox-counter {\r\n  margin-top: 20px;\r\n  font-size: 1.3rem;\r\n  font-weight: 700;\r\n  color: #ff4655;\r\n  background: rgba(0, 0, 0, 0.8);\r\n  padding: 10px 25px;\r\n  border-radius: 25px;\r\n  border: 2px solid rgba(255, 70, 85, 0.4);\r\n}\r\n\r\n.lightbox-close {\r\n  position: absolute;\r\n  top: 30px;\r\n  right: 30px;\r\n  background: rgba(255, 70, 85, 0.9);\r\n  color: white;\r\n  border: none;\r\n  width: 50px;\r\n  height: 50px;\r\n  border-radius: 50%;\r\n  font-size: 2.5rem;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  z-index: 1001;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 1;\r\n  padding: 0;\r\n}\r\n\r\n.lightbox-close:hover {\r\n  background: #ff8a00;\r\n  transform: rotate(90deg);\r\n}\r\n\r\n.lightbox-nav {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: rgba(255, 70, 85, 0.9);\r\n  color: white;\r\n  border: none;\r\n  width: 60px;\r\n  height: 60px;\r\n  border-radius: 50%;\r\n  font-size: 3rem;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease;\r\n  z-index: 1001;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  line-height: 1;\r\n  padding: 0;\r\n}\r\n\r\n.lightbox-nav:hover {\r\n  background: #ff8a00;\r\n  transform: translateY(-50%) scale(1.1);\r\n}\r\n\r\n.lightbox-prev {\r\n  left: 30px;\r\n}\r\n\r\n.lightbox-next {\r\n  right: 30px;\r\n}\r\n\r\n\/* RESPONSIVE DESIGN *\/\r\n@media (max-width: 1200px) {\r\n  .issue-hero-container {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .page-grid {\r\n    grid-template-columns: repeat(3, 1fr);\r\n  }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .action-text,\r\n  .stories-text {\r\n    font-size: 1.5rem;\r\n  }\r\n\r\n  .header-container {\r\n    flex-direction: column;\r\n    text-align: center;\r\n  }\r\n\r\n  .issue-nav {\r\n    flex-direction: column;\r\n    gap: 10px;\r\n  }\r\n\r\n  .issue-title {\r\n    font-size: 2.5rem;\r\n  }\r\n\r\n  .issue-stats {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .page-grid {\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 20px;\r\n  }\r\n\r\n  .gallery-title {\r\n    font-size: 2rem;\r\n  }\r\n\r\n  .lightbox-nav {\r\n    width: 50px;\r\n    height: 50px;\r\n    font-size: 2rem;\r\n  }\r\n\r\n  .lightbox-prev {\r\n    left: 10px;\r\n  }\r\n\r\n  .lightbox-next {\r\n    right: 10px;\r\n  }\r\n\r\n  .lightbox-close {\r\n    top: 10px;\r\n    right: 10px;\r\n    width: 40px;\r\n    height: 40px;\r\n    font-size: 2rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .page-grid {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n  .issue-hero {\r\n    padding: 40px 20px;\r\n  }\r\n\r\n  .start-reading-btn {\r\n    width: 100%;\r\n    text-align: center;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n\/\/ ISSUE #4 PAGE URLs - All 27 Pages Complete\r\nconst issuePages = [\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/issue-4-1.png\",        \/\/ Cover\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/1-1-1-scaled.jpg\",     \/\/ Page 1\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/2-1-1-scaled.jpg\",     \/\/ Page 2\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/3-1-1-scaled.jpg\",     \/\/ Page 3\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/4-1-1-scaled.jpg\",     \/\/ Page 4\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/5-1-1-scaled.jpg\",     \/\/ Page 5\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/6-1-1-scaled.jpg\",     \/\/ Page 6\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/7-1-1-scaled.jpg\",     \/\/ Page 7\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/8-1-1-scaled.jpg\",     \/\/ Page 8\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/9-1-1-scaled.jpg\",     \/\/ Page 9\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/10-1-1-scaled.jpg\",    \/\/ Page 10\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/11-1-scaled.jpg\",      \/\/ Page 11\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/12-1-scaled.jpg\",      \/\/ Page 12\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/13-1-scaled.jpg\",      \/\/ Page 13\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/14-1-scaled.jpg\",      \/\/ Page 14\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/15-1-scaled.jpg\",      \/\/ Page 15\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/16-1-scaled.jpg\",      \/\/ Page 16\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/17-scaled.jpg\",        \/\/ Page 17\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/18-scaled.jpg\",        \/\/ Page 18\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/19-scaled.jpg\",        \/\/ Page 19\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/20-scaled.jpg\",        \/\/ Page 20\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/21-scaled.jpg\",        \/\/ Page 21\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/22-scaled.jpg\",        \/\/ Page 22\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/23-scaled.jpg\",        \/\/ Page 23\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/24-scaled.jpg\",        \/\/ Page 24\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/25-scaled.jpg\",        \/\/ Page 25\r\n  \"https:\/\/actionstories.co.za\/wp-content\/uploads\/2025\/10\/26-1-scaled.jpg\"       \/\/ Page 26\r\n];\r\n\r\n\/\/ Generate page grid\r\nconst pageGrid = document.getElementById('pageGrid');\r\nissuePages.forEach((url, index) => {\r\n  const pageItem = document.createElement('div');\r\n  pageItem.className = 'page-item';\r\n  pageItem.onclick = () => openLightbox(index);\r\n\r\n  pageItem.innerHTML = `\r\n    <img decoding=\"async\" src=\"${url}\" alt=\"Page ${index + 1}\" class=\"page-thumbnail\">\r\n    <div class=\"page-number\">Page ${index + 1}<\/div>\r\n  `;\r\n\r\n  pageGrid.appendChild(pageItem);\r\n});\r\n\r\n\/\/ Lightbox functionality\r\nlet currentPage = 0;\r\nconst lightbox = document.getElementById('lightboxOverlay');\r\nconst lightboxImage = document.getElementById('lightboxImage');\r\nconst pageCounter = document.getElementById('pageCounter');\r\nconst closeBtn = document.getElementById('closeBtn');\r\nconst prevBtn = document.getElementById('prevBtn');\r\nconst nextBtn = document.getElementById('nextBtn');\r\n\r\nfunction openLightbox(pageIndex) {\r\n  currentPage = pageIndex;\r\n  updateLightbox();\r\n  lightbox.classList.add('active');\r\n  document.body.style.overflow = 'hidden';\r\n}\r\n\r\nfunction closeLightbox() {\r\n  lightbox.classList.remove('active');\r\n  document.body.style.overflow = 'auto';\r\n}\r\n\r\nfunction updateLightbox() {\r\n  lightboxImage.src = issuePages[currentPage];\r\n  pageCounter.textContent = `Page ${currentPage + 1} of ${issuePages.length}`;\r\n\r\n  \/\/ Disable prev button on first page\r\n  prevBtn.style.opacity = currentPage === 0 ? '0.3' : '1';\r\n  prevBtn.style.cursor = currentPage === 0 ? 'not-allowed' : 'pointer';\r\n\r\n  \/\/ Disable next button on last page\r\n  nextBtn.style.opacity = currentPage === issuePages.length - 1 ? '0.3' : '1';\r\n  nextBtn.style.cursor = currentPage === issuePages.length - 1 ? 'not-allowed' : 'pointer';\r\n}\r\n\r\nfunction nextPage() {\r\n  if (currentPage < issuePages.length - 1) {\r\n    currentPage++;\r\n    updateLightbox();\r\n  }\r\n}\r\n\r\nfunction prevPage() {\r\n  if (currentPage > 0) {\r\n    currentPage--;\r\n    updateLightbox();\r\n  }\r\n}\r\n\r\n\/\/ Event listeners\r\ncloseBtn.onclick = closeLightbox;\r\nnextBtn.onclick = nextPage;\r\nprevBtn.onclick = prevPage;\r\n\r\n\/\/ Close on overlay click\r\nlightbox.onclick = (e) => {\r\n  if (e.target === lightbox) {\r\n    closeLightbox();\r\n  }\r\n};\r\n\r\n\/\/ Keyboard navigation\r\ndocument.addEventListener('keydown', (e) => {\r\n  if (!lightbox.classList.contains('active')) return;\r\n\r\n  if (e.key === 'Escape') closeLightbox();\r\n  if (e.key === 'ArrowRight') nextPage();\r\n  if (e.key === 'ArrowLeft') prevPage();\r\n});\r\n\r\n\/\/ Smooth scroll for \"Start Reading\" button\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n  anchor.addEventListener('click', function (e) {\r\n    e.preventDefault();\r\n    const target = document.querySelector(this.getAttribute('href'));\r\n    if (target) {\r\n      target.scrollIntoView({\r\n        behavior: 'smooth',\r\n        block: 'start'\r\n      });\r\n    }\r\n  });\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/main>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Action Stories &#8211; Issue #4: WAT GAAN AN, GURU? ACTION STORIES \u2190 Back to Home Start Reading Issue #4 WAT GAAN AN, GURU? Having defeated the Threes, Guru&#8217;s win is short lived as he is easily crushed by the man in the yellow mask. And whats worse: the man knows Guru&#8217;s real name. On the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-202","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=202"}],"version-history":[{"count":16,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/202\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/actionstories.co.za\/index.php?rest_route=\/wp\/v2\/pages\/202\/revisions\/272"}],"wp:attachment":[{"href":"https:\/\/actionstories.co.za\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}