15 Lightbox

Zdrojové CSS: /src/css/atoms/_lightbox.scss
Zdrojové JS: /src/js/components/_lightbox.coffee

Fullscreen bez galerie

Pro lightbox byl vybrán plugin Fancybox, kde naleznete také kompletní dokumentaci.

V našem případě se lightbox volá pomocí classy js-lightbox a jednotlivé galerie se párují pomocí atributu rel.

Pro modifikaci slouží data atributy, které jsou umístěné na elementu .js-lightbox:
data-title – nadpis obrázku
data-caption - delší popis obrázku
data-gallery - přidáním hodnoty "false" se nezobrazí malé náhledy v lightboxu
data-fullscreen - přidáním hodnoty "false" se galerie nezobrazí na celou šířku a výšku obrazovky

Jednou ze specialit Fancyboxu je otevírání videa (na js-lightbox se přidá class fancybox.iframe). Aktuálně lightbox není připravený pro zobrazení jiného obsahu než obrázků / videa.

Fullscreen s galerií

Dokumentace viz. Fullscreen bez galerie.

Nefullscreen

Dokumentace viz. Fullscreen bez galerie.