feat: Enhance gallery functionality with lightbox feature and improve icon sprite accessibility

- Added a lightbox feature for gallery images, allowing users to view photos in a modal with navigation controls.
- Updated the SVG sprite to include inline styles for better accessibility.
- Increased CSS specificity by doubling the `.vc-app` class to ensure styles override Astra theme defaults.
- Introduced new shortcodes for bus tours, about section, and articles in the VC_Sections class.
- Improved the handling of featured images in the single tour template for sharper display.
- Updated version number to 1.8.15.

viator-collector/assets/js/vc-design.js

@@ -92,4 +92,57 @@
     var g = app.querySelector(".gallery, .tour-gallery");
     if (g) g.scrollIntoView({ behavior: "smooth" });
   });
+
+  /* ---------- gallery lightbox (zoom / view photos) ---------- */
+  (function () {
+    var imgs = Array.prototype.slice.call(app.querySelectorAll(".gallery img"));
+    if (!imgs.length) return;
+
+    var host = imgs[0].closest(".vc-app") || document.body;
+    var box = document.createElement("div");
+    box.className = "vc-lightbox" + (imgs.length < 2 ? " vc-lightbox--single" : "");
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-modal", "true");
+    box.innerHTML =
+      '<button class="vc-lightbox__btn vc-lightbox__prev" type="button" aria-label="Previous"><svg class="icon icon--24" aria-hidden="true"><use href="#i-arrow-left"></use></svg></button>' +
+      '<img class="vc-lightbox__img" alt="">' +
+      '<button class="vc-lightbox__btn vc-lightbox__next" type="button" aria-label="Next"><svg class="icon icon--24" aria-hidden="true"><use href="#i-arrow-right"></use></svg></button>' +
+      '<button class="vc-lightbox__btn vc-lightbox__close" type="button" aria-label="Close"><svg class="icon icon--24" aria-hidden="true"><use href="#i-x"></use></svg></button>' +
+      '<span class="vc-lightbox__count"></span>';
+    host.appendChild(box);
+
+    var bigImg = box.querySelector(".vc-lightbox__img");
+    var count = box.querySelector(".vc-lightbox__count");
+    var idx = 0;
+
+    function show(i) {
+      idx = (i + imgs.length) % imgs.length;
+      bigImg.src = imgs[idx].currentSrc || imgs[idx].src;
+      bigImg.alt = imgs[idx].alt || "";
+      count.textContent = (idx + 1) + " / " + imgs.length;
+    }
+    function open(i) {
+      show(i);
+      box.classList.add("is-open");
+      document.documentElement.style.overflow = "hidden";
+    }
+    function close() {
+      box.classList.remove("is-open");
+      document.documentElement.style.overflow = "";
+    }
+
+    imgs.forEach(function (img, i) {
+      img.addEventListener("click", function () { open(i); });
+    });
+    box.querySelector(".vc-lightbox__prev").addEventListener("click", function () { show(idx - 1); });
+    box.querySelector(".vc-lightbox__next").addEventListener("click", function () { show(idx + 1); });
+    box.querySelector(".vc-lightbox__close").addEventListener("click", close);
+    box.addEventListener("click", function (e) { if (e.target === box) close(); });
+    document.addEventListener("keydown", function (e) {
+      if (!box.classList.contains("is-open")) return;
+      if (e.key === "Escape") close();
+      else if (e.key === "ArrowLeft") show(idx - 1);
+      else if (e.key === "ArrowRight") show(idx + 1);
+    });
+  })();
 })();