diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js
index c8c3efd..f19774c 100644
--- a/src/components/Map/markerManager.js
+++ b/src/components/Map/markerManager.js
@@ -249,7 +249,10 @@ function applyPostDetails(modalWrap, post) {
const arrowHtml = heroHasGallery
? ``
: "";
- target.innerHTML = `${heroImageHtml}${arrowHtml}`;
+ const indicatorHtml = heroHasGallery
+ ? `
1/${heroGallery.length}
`
+ : "";
+ target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`;
bindHeroLightbox(modalWrap);
if (heroHasGallery) {
initModalGallery(modalWrap, heroGallery);
@@ -465,6 +468,12 @@ function initModalGallery(modalWrap, gallery) {
if (!heroImg) return;
const arrows = modalWrap.querySelectorAll(".sw-modal-hero-arrow");
let activeIndex = 0;
+ 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);
+ }
const setActive = (idx) => {
if (!Number.isFinite(idx)) return;
const normalized = (idx + gallery.length) % gallery.length;
diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css
index 64c2ee6..cec453e 100644
--- a/src/styles/mapMarkers.css
+++ b/src/styles/mapMarkers.css
@@ -898,8 +898,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
position:absolute;
top:50%;
transform:translateY(-50%) scale(0.95);
- width:44px;
- height:44px;
+ width:52px;
+ height:52px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.35);
background: rgba(0,0,0,0.55);
@@ -921,6 +921,28 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
right:10px;
}
+.sw-modal-gallery-indicator{
+ position:absolute;
+ top:0.75rem;
+ right:14px;
+ padding:0.2rem 0.65rem;
+ border-radius:999px;
+ background:rgba(0,0,0,0.6);
+ color:#fff;
+ font-size:0.78rem;
+ font-weight:700;
+ letter-spacing:0.05em;
+ display:flex;
+ align-items:center;
+ gap:0.2rem;
+ pointer-events:none;
+ z-index:12;
+ box-shadow:0 8px 18px rgba(0,0,0,0.45);
+}
+.sw-modal-gallery-separator{
+ opacity:0.7;
+}
+
.sw-modal-hero-arrow,
.sw-cluster-hero-media .sw-modal-hero-arrow{
box-shadow:0 2px 12px rgba(0,0,0,0.45);
@@ -928,8 +950,8 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{
@media (max-width: 768px) {
.sw-modal-hero-arrow{
- width:40px;
- height:40px;
+ width:46px;
+ height:46px;
border-width:0;
background:rgba(15,23,42,0.7);
}