Jednoduchá galerie v CSS

Pro obrázkovou galerii o pár obrázcích může stačit prosté řešení čistě v HTML a CSS.

>

< >

<

Galerie využívá obalu s nastavenou výškou a overflow: hidden, ve kterém jsou obrázky, na které lze odkázat #kotvou — v takovém případě prohlížeč odroluje na požadovaný obrázek. V novějších prohlížečích (od IE9) by šlo použít selektor :target.

Jelikož jsou všechny obrázky v plné velikosti přímo na stránce, načtou se všechny při vstupu na stránku a nemá tedy příliš smysl řešit vytváření náhledů (maximálně kvůli lepší ostrosti miniatur).

Tento postup je výhodný v tom, že při prohlížení budou všechny obrázky už načtené, nevýhoda je plýtvání daty v případě, kdy návštěvník všechny obrázky zvětšit nechce.

Pro více obrázků na jedné stránce je proto nejspíš vhodnější lightbox galerie — Magnific Popup umí dokonce řídit, kolik obrázků se má přednačítat.