Magnific Popup

Pokud nechcete na „lightbox“ efekt u obrázků používat žádný plugin, tak jsme do WP Frameworku přidali Magnific Popup, což je responzivní jQuery Lightbox Plugin, který jsme vyhodnotili jako jeden z nejlepších, které jsou k dispozici zdarma. Ve WP Frameworku jsou zaregistrovány konstanty pro minifikovaný skript a CSS soubor, které pak snadno můžete zahrnout do vlastní šablony.

1. vložení skriptu a CSS

V definici konfigurace šablony je dále třeba vložit, přesněji řečeno zajistit načítání CSS souboru a skriptu pomocí konstant KT_MAGNIFIC_POPUP_STYLE, resp. KT_MAGNIFIC_POPUP_SCRIPT:

Všimněte si, že v rámci vložení Magnific Popup skriptu je metoda setInFooter s parametrem true. To zajistí, že bude skript vkládán vždy do patičky stránek a nebude tak brzdit jejich načítání…

Toto řešení je samozřejmě plně funkční, ale pokud řešíte výkon, tak byste raději měli soubory Magnificu (CSS i JS) integrovat a minifikovat s ostatními styly, resp. skripty vždy do jedno souboru společného pro celou šablonu podle typu (CSS i JS). Takže pak budete mít ve výsledku jeden CSS soubor a jeden skript pro celou šablonu, což znamená pouze dva requesty. Pokud Vás tato problematika zajímá, tak doporučujeme prostudovat nástroj Grunt nebo další jemu podobné…

2. vložení vlastního skriptu šablony

Ještě zůstaneme v definici konfigurace šablony. Protože je potřeba rozšířit vlastní skript šablony (pokud nemáte, je třeba ho vytvořit) kódem, který se postará o aplikaci samotné aplikace lightbox efektu na obrázky:

KT_XXX a kt-xxx stanovují předponu vlastního modulu v projektu podle konvence rozložení projektu a nazývání adresářů a souborů. Cesta k JS souboru by v tomto případě měla být kt/yours/js/kt-template-functions.js…

3. definice vlastního skriptu šablony

Nyní se můžeme přesunout do vlastního JS skriptu šablony a dodat kód, který zajistí již zmíněný lightbox efekt obrázků (pomocí Magnificu):

Tyto dva skripty automaticky aplikují lightbox efekt na všechny samostatné obrázky, které jsou v HTML odkazu a nejsou součástí galerie a pak i na vkládané WP galerie… Je třeba pouze zajistit>, aby odkazy vždy směřovaly přímo na obrázky a ne na šablony s přílohami… Případně je možné si skripty upravit dle libosti podle dokumentace Magnificu.

A to je vše. Magnific Popup by nyní měl být automaticky aktivní.

Nezapomeňte případně na důkladnou aktualizaci (Refresh) stránky v prohlížeči po editaci skriptů.



Odebírejte novinky z FW

Sledujte nás!

Tyto stránky využívají Cookies. Používáním těchto stránek vyjadřujete souhlas s používáním Cookies.Zjistit víceOK, rozumím