diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index ea18533..050b385 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -249,32 +249,10 @@ function applyPostDetails(modalWrap, post) {
const arrowHtml = heroHasGallery
? ``
: "";
- target.innerHTML = `${heroImageHtml}${arrowHtml}`;
- let galleryRow = modalWrap.querySelector(".sw-modal-gallery-row");
- if (heroHasGallery) {
- if (!galleryRow) {
- galleryRow = document.createElement("div");
- galleryRow.className = "sw-modal-gallery-row";
- const heroRow = target.closest(".sw-modal-hero-row");
- const parent = heroRow?.parentNode || target.parentNode || modalWrap;
- if (parent) {
- parent.insertBefore(galleryRow, heroRow ? heroRow.nextSibling : target.nextSibling || null);
- } else {
- modalWrap.appendChild(galleryRow);
- }
- }
- galleryRow.innerHTML = heroGallery
- .map(
- (url, idx) =>
- ``
- )
- .join("");
- } else if (galleryRow) {
- galleryRow.remove();
- galleryRow = null;
- }
+ const indicatorHtml = heroHasGallery
+ ? `
1/${heroGallery.length}
`
+ : "";
+ target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
bindHeroLightbox(modalWrap);
if (heroHasGallery) {
initModalGallery(modalWrap, heroGallery);
@@ -472,14 +450,15 @@ function bindHeroLightbox(modalWrap) {
if (!modalWrap) return;
const img = modalWrap.querySelector(".sw-modal-hero img, .sw-cluster-hero-media img");
if (!img || img.dataset.zoomBound === "1") return;
- const fullSrc = (img.getAttribute("data-fullsrc") || img.getAttribute("src") || "").trim();
- if (!fullSrc) return;
img.dataset.zoomBound = "1";
img.style.cursor = "zoom-in";
img.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
- openImageLightbox(fullSrc);
+ const src = (img.getAttribute("data-fullsrc") || img.getAttribute("src") || "").trim();
+ if (src) {
+ openImageLightbox(src);
+ }
});
}
@@ -487,9 +466,14 @@ function initModalGallery(modalWrap, gallery) {
if (!modalWrap || !Array.isArray(gallery) || gallery.length === 0) return;
const heroImg = modalWrap.querySelector(".sw-modal-hero img, .sw-cluster-hero-media img");
if (!heroImg) return;
- let activeIndex = 0;
- const thumbButtons = modalWrap.querySelectorAll(".sw-modal-gallery-thumb");
const arrows = modalWrap.querySelectorAll(".sw-modal-hero-arrow");
+ const indicator = modalWrap.querySelector(".sw-modal-gallery-indicator");
+ const currentIndicator = indicator?.querySelector(".sw-modal-gallery-current");
+ const totalIndicator = indicator?.querySelector(".sw-modal-gallery-total");
+ if (totalIndicator) {
+ totalIndicator.textContent = String(gallery.length);
+ }
+ let activeIndex = 0;
const setActive = (idx) => {
if (!Number.isFinite(idx)) return;
const normalized = (idx + gallery.length) % gallery.length;
@@ -497,10 +481,9 @@ function initModalGallery(modalWrap, gallery) {
heroImg.src = gallery[normalized];
heroImg.dataset.fullsrc = gallery[normalized];
heroImg.dataset.galleryIndex = String(normalized);
- thumbButtons.forEach((btn) => {
- const btnIndex = Number(btn.dataset.index);
- btn.classList.toggle("active", btnIndex === normalized);
- });
+ if (currentIndicator) {
+ currentIndicator.textContent = String(normalized + 1);
+ }
};
arrows.forEach((btn) => {
btn.addEventListener("click", (event) => {
@@ -510,14 +493,6 @@ function initModalGallery(modalWrap, gallery) {
setActive(nextIndex);
});
});
- thumbButtons.forEach((btn) => {
- btn.addEventListener("click", (event) => {
- event.stopPropagation();
- const idx = Number(btn.dataset.index);
- if (Number.isNaN(idx)) return;
- setActive(idx);
- });
- });
setActive(0);
let touchStartX = 0;
const touchThreshold = 30;
diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css
index de067f0..b193390 100644
--- a/src/styles/mapMarkers.css
+++ b/src/styles/mapMarkers.css
@@ -878,6 +878,11 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
pointer-events:none;
}
+.sw-modal-hero,
+.sw-cluster-hero-media{
+ position:relative;
+ overflow:hidden;
+}
.sw-modal-hero img{
width:100%;
height:100%;
@@ -915,34 +920,61 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
.sw-modal-hero-arrow.right{
right:10px;
}
-.sw-modal-gallery-row{
+.sw-modal-gallery-indicator{
+ position:absolute;
+ bottom:0.75rem;
+ left:50%;
+ transform:translateX(-50%);
+ background:rgba(15,23,42,0.8);
+ color:#f0f9ff;
+ border-radius:999px;
+ padding:.25rem .75rem;
+ font-size:.75rem;
+ font-weight:700;
+ letter-spacing:.05em;
display:flex;
- gap:0.35rem;
- overflow-x:auto;
- padding-top:0.5rem;
- margin-top:0.5rem;
+ align-items:center;
+ gap:.35rem;
+ z-index:12;
+ pointer-events:none;
+ box-shadow:0 10px 25px rgba(2,6,23,0.6);
}
-.sw-modal-gallery-thumb{
- border-radius:12px;
- border:1px solid transparent;
- width:48px;
- height:48px;
- flex:0 0 auto;
- overflow:hidden;
- padding:0;
+.sw-modal-gallery-indicator{
+ position:absolute;
+ top:0.75rem;
+ right:0.25rem;
+ bottom:auto;
+ left:auto;
+ transform:none;
+ padding-right:0.3rem;
+}
+.sw-modal-gallery-indicator span{
display:inline-flex;
align-items:center;
justify-content:center;
- background:rgba(15,23,42,0.65);
+ line-height:1;
}
-.sw-modal-gallery-thumb.active{
- border-color:rgba(56,189,248,0.95);
+.sw-modal-gallery-separator{
+ opacity:.6;
}
-.sw-modal-gallery-thumb img{
- width:100%;
- height:100%;
- object-fit:cover;
- display:block;
+
+.sw-modal-hero-arrow,
+.sw-cluster-hero-media .sw-modal-hero-arrow{
+ box-shadow:0 2px 12px rgba(0,0,0,0.45);
+}
+
+@media (max-width: 768px) {
+ .sw-modal-hero-arrow{
+ width:32px;
+ height:32px;
+ border-width:0;
+ background:rgba(15,23,42,0.7);
+ }
+ .sw-modal-gallery-indicator{
+ font-size:.68rem;
+ bottom:.5rem;
+ padding:.2rem .6rem;
+ }
}
.sw-modal-hero-fallback{