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

studiogabby 15. 9. 2015 22:22

Prosím o revizi...

Dobrý den,

snažila jsem se řídit dle vašeho návodu a měla bych mít všechno dobře vložené a umístěné, avšak slider se stále nezobrazuje, naopak vyběhl mi výchozí obrázek... Můžete mi říci kde mám chybu?

www.studiogabby.cz

Odpovědět

Gábina 15. 9. 2015 11:19

styl H

Dobrý den,

potřebuji poradit, nevím kam vložit v této šabloně obrázky a zda to bude jako inner_frame nebo logo-in content... Dále se chci zeptat, dá se nějak změnit velikost obrázku v záhlaví? Potřebuji aby bylo větší (pro poměr stran 2:3). No a v neposlední řadě jak změním písmo za jiné... Děkuji

Odpovědět

Petr 9. 2. 2015 20:53

Slider

Zdravím, také bych se přimlouval aby estranky tuto možnost dali přímo do šablon. Pro mě je to nemožné si s tím potadit a myslím že i pro většinu uživatelů estránek. Bylo by to fajn, stránky to hodí úplně do jiné úrovně.

Odpovědět

Petr Doseděl - eStránky.cz 13. 2. 2015 9:58

Re: Slider

Dobrý den,
přidání možnosti slideru přímo do Ovládacího centra bohužel v tuto chvíli možné není. Pokud však máte vážný zájem o nasazení slideru, může Vám jej do stránek vložit náš programátor. Určitě se vlezete do jedné hodiny práce, tudíž nebude úprava stát více, než 500 Kč.

S přátelským pozdravem Petr Doseděl, tým eStránky.cz

Odpovědět

colos 9. 6. 2015 17:42

Re: Re: Slider

Skvělá odpověď a taky naprosto běžná - nic nejde za 500 doděláme.....že se nestydíte :-(

Odpovědět

Richard 9. 6. 2015 10:00

Rotátor

To, co zde popisujete je tzv. rotátor a u konkurence je to běžná funkce.
Upřímně, mám z estránek pocit, že razíte heslo dodělej si sám! A vývoj se u Vás zastavil před lety. Tak málo funkční stránky+eshop jsem dlouho neviděl. Mám u Vás stránky cca 5 let, tak vím o čem mluvím.
Chtěl jsem si u Vás přes všechny problémy udělat eshop ale prostě to nejde. Možnost propojení zboží tzv. související, rotátor, úpravy tak minimální a pokud je úprava možná tak jedině se hrabat v kódech.....panebože - jak můžete takhle fungovat?
Volal jsem k Vám s různými dotazy ohledně eshopu a nic nejde, trapné úpravy řeším na 3x přes email jinde běžně udělám v administraci. Takže eshop vzdávám, bohužel, musím jít jinam.

Odpovědět

Iva Hozová 18. 5. 2015 18:29

slider na stránky

Dobrý den,
chtěla bych vyměnit obrázek na stránkách za Slider.
Bohužel se v tom kódu nevyznám.
Prosím můžete mi ho na stránkách zprovoznit ?
Děkuji a přeji krásný den,
Iva

Odpovědět

Ladislav 27. 2. 2015 10:45

Šablona G

Dobrý den, nedaří se to v šabloně G.

Odpovědět

Hlodák 19. 2. 2015 14:00

Slider

Dobrý den,
Možte prosím vás urobiť aj náhlad na celý upravený kod pre stýl Trend? Trápim sa s tým už dlho a neviem to rozbehať, ďakujem

Odpovědět

www.mince-dukaty.com 4. 2. 2015 13:47

Slider

Dobrý deň,
vzhľadom k vysokému stupňu obtiažnosti navrhujem, aby bola možnosť spustiť slider priamo z menu, len zadaním obrázkov do šablóny. Určite by to pre eStránky nebol neriešiteľný technický problém. Zvýšenie atraktivity stránok so sliderom je nepopierateľný.
Ďakujem.

Odpovědět

Dominik 3. 11. 2014 21:42

Styl C - modrý

Dobrý den,
také nemůžu najít kam vložit obrázky, mohu vás poprosit o radu?
Děkuji

Odpovědět

Petra 24. 10. 2014 12:13

Obrázek

Dobrý den, kde najdu v šabloně StylTrend - fialová, obrázek. Chci místo něho dát flash. Děkuji

Odpovědět

Petr Doseděl - eStránky.cz 24. 10. 2014 12:29

Re: Obrázek

Dobrý den, obrázek najdete v <div id="header"><div class="inner_frame">

Odpovědět

H 11. 8. 2014 17:44

Styl Biznis

Kam se maji dat seznam s obrazdy ?

neni tam logo-in-content

Diki moc

Odpovědět

Petr Doseděl - eStránky.cz 12. 8. 2014 16:44

Re: Styl Biznis

Dobrý den,
v šabloně Byznys je obrázek v divu s id="header-decoration".

S pozdravem Petr Doseděl, tým eStránky.cz

Odpovědět

Beda 11. 8. 2014 13:37

Styl Q

Dobrý den,
tápu jako řada dalších (jak tak koukám), v kódu tohoto stylu vůbec nikde není ani "logo", ani "header", vůbec mi není jasné, kde je v něm nadefinována hlavička
Kam mám vložit fotky, které se mají zobrazovat?
http://www.ateliermodrykvet.cz/
Děkuji

Odpovědět

Petr Doseděl - eStránky.cz 12. 8. 2014 16:43

Re: Styl Q

Dobrý den,
u stylu Q je obrázek vložený v divu s id="header-decoration".

S pozdravem Petr Doseděl, tým eStránky.cz

Odpovědět

mato 30. 4. 2014 18:37

Sablona Stýl kurier

Ptrebujem radu kde vlozit obrázky pri tejto téme aby to bežalo tak ako má. Mne po čase obrazky neukazuje.

www.zvonce.estranky.sk

Odpovědět

Petr Doseděl - eStránky.cz 12. 8. 2014 16:41

Re: Sablona Stýl kurier

Dobrý den,
doplnil jsem článek, Váš problém je popsán tučně pod skriptem s obrázky.

S pozdravem Petr Doseděl, tým eStránky.cz

Odpovědět

Ladislav 6. 6. 2014 14:02

S pomocí boží, ale přece

Nakonec se to povedlo, ale že bych tom měl zcela jasno, to se říci nedá...
www.dolnilomna.com

Odpovědět

1 2 3

následující