15 Lightbox

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.

TO-DO

TO-DO

TO-DO

TO-DO

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.

Šířka modalu je v defaultním nastavením omezena na 970px. Pokud chcete modal širší, je možné přidat třídu .modal--wide pro 1312px a .modal-ultrawide pro šířku přes celou obrazvku.

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.

Šířka modalu je v defaultním nastavením omezena na 970px. Pokud chcete modal širší, je možné přidat třídu .modal--wide pro 1312px a .modal-ultrawide pro šířku přes celou obrazvku.

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.