Choď na obsah Choď na menu

Výmena obrázku v záhlaví za slider

10. 11. 2021

Vrátila sa doba dynamickejších stránok, preto si dnes ukážeme, ako vymeniť statický obrázok v záhlaví za pekne vyzerajúcu slideshow rôznych obrázkov.

V dnešnom tutoriále budeme pracovať so štýlom Kvetina a na slideshow použijeme jeden z jednoduchších pluginov Basic jQuery Slider, ktorý si môžete zadarmo stiahnuť TU.

Pre predstavu sme pre vás pripravili stránku http://www.ukazka-slideshow.estranky.cz/, kde sa môžete pozrieť na možný výsledok.

Po stiahnutí nahrajte medzi svoje súbory na eStránkach tieto dva súbory z archívu:

Súbory:
js/bjqs-1.3.min.js bjqs.css
a obrázky v rozlíšení 543x200px, ktoré chcete v slideri postupne zobraziť.
 

Úpravy v kóde

Všetko máme pripravené a môžeme sa dať na úpravu hlavnej šablóny (NASTAVENIE – VZHĽAD – DIZAJN – UPRAVIŤ XHTML > HLAVNÁ ŠABLÓNA).
 
V prvom rade musíme nalinkovať potrebné skripty. Hneď za značku <head> vložte nasledujúci riadok:
 
Zdrojový kód:
<script src=http://code.jquery.com/jquery-latest.min.js type="text/javascript"></script>
 
A pred značku </head> vložte nasledujúce riadky:
 
Zdrojový kód:
<script src="/file/1/bjqs-1.3.min.js" type="text/javascript"></script>
<link type="text/css" rel="Stylesheet" href="/file/2/bjqs.css" />
Nezabudnite upraviť adresy tak, aby smerovali na Váš súbor.
 
Ďalšou časťou je nastavenie, ako sa bude slider správať a ako bude vyzerať. Pod posledný vami vložený riadok vložte nasledujúci kód:
 
Zdrojový kód:
<script>
 jQuery(document).ready(function($) {
  $('#logo-in-content').bjqs({
height        : 200,
width         : 543,
 
// NASTAVENIE ANIMÁCIE
animtype : 'fade', // hodnota 'fade' pre plynulý prechod, 'slide' pre posúvanie
animduration : 450, // určuje rýchlosť animácie
animspeed : 4000, // oneskorenie medzi prepínaním snímok
automatic : true, // true pre automatické posúvanie, false pre vypnutie
 
// NASTAVENIE OVLÁDANIA
showcontrols : false, // zobrazí odkazy pre predchádzajúcu/ďalšiu snímku
centercontrols : true, // vertikálne vycentrovanie odkazov
nexttext : 'Next', // Text pre odkaz „Ďalší“
prevtext : 'Prev', // Text pre odkaz „Predchádzajúci“
showmarkers : false, // Zobraziť odkazy na jednotlivé snímky
centermarkers : true, // Zarovnanie odkazov na stred
 
// NASTAVENIE INTERAKCIÍ
keyboardnav : true, // Zapnutie ovládania klávesnicou
hoverpause : true, // Zapnutie pauzy pri nabehnutí myšou
 
// NASTAVENIE PREZENTÁCIE
usecaptions : true, // Zobraziť titulok obrázku v snímke
randomstart : true, // Začať na náhodnom snímke
  });
 });
</script>
 
Nakoniec prichádzame k poslednej časti a to je nastavenie obrázkov, ktoré sa majú na stránke striedať.

V šablóne Kvetina je obrázok v záhlaví umiestnený v dive s ID „logo-in-content“, toto ID ste si mohli všimnúť aj v nastavení slidera a práve sem musíme vložiť v nečíslovanom zozname obrázky, ktoré chcete zobraziť. Pozri:

Zdrojový kód:
<ul class="bjqs" style="padding-left:0;">
 <li><img src="/file/3/banner01.jpg" title="Popisok fotky"></li>
 <li><img src="/file/4/banner02.jpg" title="Popisok fotky"></li>
 <li><img src="/file/5/banner03.jpg" title="Popisok fotky"></li>
</ul>
 
Pozor! V množstve šablón sa obrázok zo záhlavia nachádza v bloku s triedou "inner_frame", ktorá je v divu s id "logo". Nezabudnite pri vkladaní upraviť aj časť, kde nastavujete slider. Preto namiesto "#logo-in-content" použite "#logo .inner_frame".

Trieda „bjqs“ opäť závisí od označenia v nastavení v hlavičke stránky. Položiek samozrejme môžete vložiť ľubovoľný počet.
Vložený štýl padding-left:0; vyresetuje nastavenie pôvodného obrázku a zobrazí slider presne cez neho.

 
Pokiaľ si nie ste istí umiestnením kódov, pripravili sme pre vás náhľad na celý upravený kód.
 

Po uložení celého designu si môžete výsledok pozrieť na vašich stránkach. Na záver odporúčame nezabudnúť ani na nastavenie štandardného obrázku, ktorý sa zobrazí napríklad v mobilnej verzii, alebo ak sa slider z akéhokoľvek dôvodu nenačíta.

Bohužiaľ nie sme schopní reagovať na všetky komentáre u tohto tutoriálu.
V prípade záujmu vám slider nasadí náš programátor za jednorazový poplatok 500 Kč. Kontaktujte našu podporu na maile podpora@estranky.sk.