s ovládáním (prev/next/close + loader/counter/dots) a připne ho na konec na KAŽDÉ stránce (new AsyncGallery() běží bezpodmínečně). Viditelnost řídí třída .is-visible (přidá se po kliknutí na .gallery__Image, odebere při zavření). Bez těchto stylů byl kontejner vidět jako text "prevnextcloseLoading...0/0" pod patičkou. Zde ho defaultně skrýváme a stylujeme jako fullscreen overlay. Téma je hranaté → bez border-radius. ========================================================================= */ .asyncGallery { position: fixed; inset: 0; z-index: 9999; display: none; /* skryté dokud JS nepřidá .is-visible */ align-items: center; justify-content: center; background: rgba(16, 17, 19, .92); } .asyncGallery.is-visible { display: flex; } /* jednotlivý snímek */ .asyncGallery__Item { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3.5rem 1rem; } .asyncGallery__Item.is-visible { display: flex; } .asyncGallery__ItemImage { max-width: 100%; max-height: 100%; display: flex; } .asyncGallery__ItemImage img { max-width: min(92vw, 1200px); max-height: 82vh; width: auto; height: auto; object-fit: contain; display: block; } .asyncGallery__ItemDescription { color: #fff; font-size: .875rem; text-align: center; max-width: 60ch; } /* ovládací tlačítka — text popisku skrytý (font-size:0), glyf přes ::before */ .asyncGallery__Prev, .asyncGallery__Next, .asyncGallery__Close { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .10); font-size: 0; line-height: 1; transition: background-color .15s; } .asyncGallery__Prev:hover, .asyncGallery__Next:hover, .asyncGallery__Close:hover { background: rgba(255, 255, 255, .22); } .asyncGallery__Prev { left: .75rem; top: 50%; transform: translateY(-50%); } .asyncGallery__Next { right: .75rem; top: 50%; transform: translateY(-50%); } .asyncGallery__Close { right: .75rem; top: .75rem; } .asyncGallery__Prev::before { content: "\2039"; font-size: 2rem; } /* ‹ */ .asyncGallery__Next::before { content: "\203A"; font-size: 2rem; } /* › */ .asyncGallery__Close::before { content: "\2715"; font-size: 1.25rem; } /* ✕ */ .asyncGallery__Prev[disabled], .asyncGallery__Next[disabled] { opacity: .35; cursor: default; } /* počítadlo */ .asyncGallery__Counter { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; color: #fff; font-size: .8125rem; letter-spacing: .05em; } /* loader — JS přidá/odebere .is-visible */ .asyncGallery__Loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: none; color: #fff; font-size: .875rem; } .asyncGallery__Loader.is-visible { display: block; } /* tečky */ .asyncGallery__Dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; } .asyncGallery__Dots li button { width: .55rem; height: .55rem; padding: 0; border: 0; cursor: pointer; background: rgba(255, 255, 255, .4); color: transparent; font-size: 0; line-height: 0; transition: background-color .15s; } .asyncGallery__Dots li.is-active button { background: #fff; }