Banerová slideshow | Redakční systémy zdarma

Nedávno jsem při práce na jednom Joomla projektu dostal zajímavý úkol, vytvořit modul, který bude zobrazovat loga jednotlivých partnerů s možností kliknutí na logo a přejití na jejich webové stránky, plus tlačítko další pro procházení mezi jednotlivými logy.

Nejdříve jsem samozřejmě hledal jestli už nějaký takový neexistuje, a našel jsem Simple Image Rotator. Bohužel nesplňoval všechny mé požadavky. Ukážeme si tedy jak přimět tento modul, aby nám zobrazoval obrázky z komponenty banery a přidáme si i tlačítko Další pro procházení mezi obrázky.

Nejdříve si tedy stáhneme tento modul - stahujte ZDE

Nainstalujeme si modul a najedeme do Rozšíření>Správce modulů a vyhledáme si náš modul (má typ mod_jw_sir). Klikneme na něj a nastavíme mu pozici, pořadí dle potřeb a nyní se podíváme na parametry. Nastavíme výšku a šířku obrázků, dobu mezi zobrazním jednotlivých obrázků, zda-li chceme obrázky ořezávat nebo zmenšovat, atd. Ale co je pro nás nejdůležitější, zaškrtneme, že chceme aby modul vybíral obrázky z komponenty bannery viz. obrázek

Tím mu říkáme, že nebudeme nrát obrázky ze složky ale jen ty které jsou v komponentě bannery. Nyní si tedy najedeme do Komponenty>Banner>Bannery a podíváme se zda-li tam nějaké máme, pokud jsme instalovali ukázková data, už by tam nějaké měli být. Můžeme je tedy smazat a vytvořit si námi požadované bannery, zvolíme jim url adresu po kliknutí a přiřadíme obrázek, obrázky musíme nejdříve nahrát do složky images/banners/ nebo do takové kterou jsme zvolili při nastavení modulu SIR.  Nyní si můžeme pustit stránky a na pozic, kterou jsme zvolili by se měl objevit náš modul s měnícími se obrázky. Jak jste si již všimli v nastavení nikde není volba přidání tlačítka pro posun obrázků vpřed. Tuto funkci si musíme doprogramovat sami. Najedeme tedydo složky modules/mod_jw_sir/mod_jw_sir, kde najdeme soubor mod_jw_sir.js. Ten musíme nahradit naším, nový soubor je ke stažení zde - mod_jw_sir.js tímto souborem přemažte ten původní. Přidali jsme do něj funkci nextPic() a upravili funkce so_init, so_xfade a init_ahr. Nyní už zbývá jen přidat tlačítko. Otevřeme si soubor modules/mod_jw_sir/mod_jw_sir.php a úplně nakonec vložíme tento kód

<button onClick="nextPic();" class="button" />Další obrázek</button>

Samozřejmě si tlačítko můžeme nastylovat přidáním css třídy jak se nám zlíbí. Nyní by mělo být hotovo.

Závěrem bych ještě upozornil, že tento modul se někdy špatně zobrazuje při zapnutém SEO. Pokud máte zaplé SEO a nezobrazuje se Vám modul korektně, vložte přímo do hlavičky šablony tento kód

<link rel="stylesheet" href="/modules/mod_jw_sir/mod_jw_sir/mod_jw_sir.css" type="text/css" /> 

Nyní by již mělo být všechno v pořádku, na závěr tedy malá ukázka: