15 Lightbox
Zdrojové CSS: /src/css/atoms/_lightbox.scss
Zdrojové JS: /src/js/components/_lightbox.coffee
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.
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.