Jdi na obsah Jdi na menu
 


Výměna obrázku v záhlaví za slider

Obtížnost
 
 

Vrátila se doba dynamičtějších stránek, proto si dnes ukážeme, jak vyměnit statický obrázek v záhlaví za pěkně vypadající slideshow různých obrázků.

 
V dnešním tutoriálu budeme pracovat se stylem Květina a na slideshow použijeme jeden z jednodušších pluginů Basic jQuery Slider, který si můžete zadarmo stáhnout ZDE.
 
Pro představu jsme pro vás připravili stránku http://www.ukazka-slideshow.estranky.cz/, kde se můžete podívat na možný výsledek.
 
Po stáhnutí nahrajte mezi své soubory na eStránkách tyto dva soubory z archívu:
Soubory:
js/bjqs-1.3.min.js
bjqs.css
 
a obrázky v rozlišení 543x200px, které chcete ve slideru postupně zobrazit.

 

Úpravy v kódu

Vše máme připraveno a můžeme se dát na úpravu hlavní šablony (NASTAVENÍ – VZHLED – DESIGN – UPRAVIT XHTML > HLAVNÍ ŠABLONA)
 
V první řadě musíme nalinkovat nutné skripty. Hned za značku <head> vložte následující řádek:
 
Zdrojový kód:
<script src=http://code.jquery.com/jquery-latest.min.js type="text/javascript"></script>
 
A před značku </head> vložte následující řádky:
 
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" />
 
Nezapomeňte upravit adresy tak, aby směřovaly na Váš soubor.
 
Další částí je nastavení, jak se bude slider chovat a jak bude vypadat. Pod poslední Vámi vložený řádek vložte následující kód:
 
Zdrojový kód:

 
<script>
 jQuery(document).ready(function($) {
  $('#logo-in-content').bjqs({
height        : 200,
width         : 543,
 
// NASTAVENÍ ANIMACE
animtype : 'fade', // hodnota 'fade' pro plynulý přechod, 'slide' pro posouvání
animduration : 450, // určuje rychlost animace
animspeed : 4000, // prodleva mezi přepínáním snímků
automatic : true, // true pro automatické posouvání, false pro vypnutí
 
// NASTAVENÍ OVLÁDÁNÍ
showcontrols : false, // zobrazí odkazy pro předchozí/další snímek
centercontrols : true, // vertikální vycentrování odkazů
nexttext : 'Next', // Text pro odkaz „Další“
prevtext : 'Prev', // Text pro odkaz „Předchozí“
showmarkers : false, // Zobrazit odkazy na jednotlivé snímky
centermarkers : true, // Zarovnání odkazů na střed
 
// NASTAVENÍ INTERAKCÍ
keyboardnav : true, // Zapnutí ovládání klávesnicí
hoverpause : true, // Zapnutí pauzy při najetí myší 
 
// NASTAVENÍ PREZENTACE
usecaptions : true, // Zobrazit titulek obrázku ve snímku
randomstart : true, // Začít na náhodném snímku
  });
 });
</script>
 
 
Nakonec přicházíme k poslední části a to je nastavení obrázků, které se mají na stránce střídat. 
 
V šabloně Květina je obrázek v záhlaví umístěn v divu s ID „logo-in-content“, tohoto ID jste si mohli všimnout i v nastavení slideru a právě sem musíme vložit v nečíslovaném seznamu obrázky, které chcete zobrazit. Viz: 
 
Zdrojový kód:

 
<ul class="bjqs" style="padding-left:0;">
 <li><img src="/file/3/banner01.jpg" title="Popisek fotky"></li>
 <li><img src="/file/4/banner02.jpg" title="Popisek fotky"></li>
 <li><img src="/file/5/banner03.jpg" title="Popisek fotky"></li>
</ul>
Pozor! Ve spoustě šablon se obrázek ze záhlaví nachází v bloku s třídou "inner_frame", která je v divu s id "logo". Nezapomeňte při vkládání upravit i část, kde nastavujete slider. Tedy místo "#logo-in-content" použijte "#logo .inner_frame".
 
Třída „bjqs“ opět závisí na označení v nastavení v hlavičce stránky. Položek samozřejmě můžete vložit libovolný počet.
Vložený styl padding-left:0; vyresetuje nastavení původního obrázku a zobrazí slider přesně přes něj.
 
Pokud si nejste jistí umístěním kódů, připravili jsme pro vás náhled na celý upravený kód.
 
Po uložení celého designu si můžete výsledek prohlédnout na Vašich stránkách. Na závěr doporučujeme nezapomenout ani na nastavení standardního obrázku, který se zobrazí například v mobilní verzi, nebo pokud se slider z jakéhokoli důvodu nenačte.
 
Bohužel nejsme schopni reagovat na všechny komentáře u tohoto tutoriálu. 
V případě zájmu Vám slider nasadí náš programátor za jednorázový poplatek 500 Kč. Kontaktujte naši podporu na mailu podpora@estranky.cz
 
15. 10. 2013

Komentáře

Jiří Cysař 4. 12. 2013 8:59

Proklik na logo

Potřeboval bych na obrázek v hlavičce dát odklik na Home page.

Petr Doseděl - eStránky.cz 5. 12. 2013 14:56

Re: Proklik na logo

Zdravím pane Cysaři,
nejjednodušší bude v Hlavičce stránky najít tento DIV

<div id="header-decoration" class="decoration">
</div>

a celý jej obalit do odkazu. Ve výsledku taková úprava může vypadat takto:

<a href="/"><div id="header-decoration" class="decoration"></div></a>

Lucie 19. 11. 2013 13:26

šablona H

A tak to byla, pouze prkotinka. Už to mám, děkuji a hezký den.

Petr Doseděl - eStránky.cz 20. 11. 2013 11:07

Re: šablona H

Jste rychlejší, než blesk :) ... Zvládla jste to perfektně!
Úprava se Vám povedla. :)

Lucie 19. 11. 2013 13:06

šablona H

Dobrý den,
prosím pomoc....vše jsem udělala jak má být..běží to perfektně. Velké dík za perfektní návod. Ale potřebuji obrázek v záhlaví zarovnat souběžně s postraním sloupcem...jak na to. Došli nápady. Děkuji, děkuji moc.
http://www.malovaninaoblicej-cb.estranky.cz/

Jirka 22. 10. 2013 21:28

šablona S

používám šablonu S a nikde nemůžu najít místo kam nahrát odkazy na obrázky. A pravděpodobně i pozice obrázků se bude lišit oproti šabloně kterou jste upravovali vy.

Petr Doseděl - eStránky.cz 23. 10. 2013 8:08

Re: šablona S

Dobrý den,
u šablony S se obrázek nachází v divu s id header (<div id="header">.

Úprava však bude složitější - id se musí změnit i v kódu a potřeba bude i změna rozlišení obrázku a jeho pozice u slideru. I to je důvod, proč je obtížnost uvedená jako pokročilá.

Jirka 23. 10. 2013 18:21

Re: Re: šablona S

no snad se s tím nějak prokoušu. Tohle je velmi dobrá úprava vzhledu stránek, takže to zkusím stylem pokus - omyl. :-)

Josef Seehák 17. 10. 2013 17:45

Gif

Nebylo by jednodušší umožnit vložit do loga již vytvořený gif?

Petr Doseděl - eStránky.cz 18. 10. 2013 12:45

Re: Gif

Animované gify se na moderních webech už léta nepoužívají - a už vůbec ne pro účely prolínání fotek. Takže ano, máte pravdu, že pokud máte nástroj na vytvoření takového animovaného gifu (navíc s licencní pro komerční využití), bylo by vložení do stránek jednodušší, varianta se sliderem je ale pro weby lepší - a to hned z několika pohledů:
- velikost obrázků - gif, kde se bude prolínat několik fotek bude mnohonásobně větší, než celý slider a stránky se budou rychleji načítat
- plynulost - zatímco u slideru jsou definovány obrázky a způsob přechodu, musí být v gifu uložen každý posun (jeden přechod se může skládat třeba z 50 obrázků)
- možnost úprav - při potřebě jakékoli změny je jednodušší zasáhnout do kódu, případně změnit jeden obrázek, než generovat nový gif
- přístupnost mobilní verze - při tomto použití slideru se bude na mobilní verzi stále zobrazovat statický obrázek, takže nevadí pomalejší mobilní připojení, na kterém by se gif ani nenačetl