15 Lightbox

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

Defaultní nefullscreen bez galerie, bez možnosti přechodu na další itemy

Pro lightbox byl vybrán plugin Fancybox 3, 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.

Nefullscreen

TO-DO

Fullscreen bez galerie

TO-DO

Fullscreen s galerií

TO-DO

S HTML obsahem (obsluha AJAXEM)

TO-DO

S HTML obsahem (bez AJAXU)

TO-DO

Maximální šířka popupu

Modální dialog se automaticky neroztahuje na maximu šířky, vždy pouze podle obsahu. Občas ale může být obsah, který svoji šířku přizpůsobuje a tak se zbytečně zalamuje, i když by nemusel, kdyby se modal roztáhl na celou dostupnou šířku. V takovém případě je možné na element .modal přidat modifikátor .modal--full.

Bez hlavičky

Přidáním třídy .modal--notitle na .modal, odsrtaněním elementu .modal__header a přesunem .modal__close na konec .modal__body je možné vytvořit popup bez modré hlavičky.