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

Lada 16. 4. 2014 10:06

Diakritika

Ahoj, prosím Tě, když chci vložit text do jednotlivých obrázků, nezobrazují se české znaky (diakritika), poradíš mi, kde to nastavím? Děkuji moc.

Petr Doseděl - eStránky.cz 16. 4. 2014 10:09

Re: Diakritika

Můžete sem napsat, o kterou stránku jde. Podíval bych se na to.

S pozdravem Petr Doseděl

Lada 16. 4. 2014 11:28

Re: Re: Diakritika

Díky. http://syny.webzdarma.cz/
Ještě jsem se chtěl zeptat, jestli není možné, aby místo miniatur pod obrázkem v podobě čísel nebylo možné dát miniatury jednotlivých obrázků.
Přeji pěkný den,

Ladislav 6. 3. 2014 10:21

Šabona Y

Zdravím, v šabloně Y nemohu najít místo, za které vložit fotky.
ID "logo atd.

Jana Melková 4. 2. 2014 17:48

šablona R

Zdravím, tak jsem se trošku zamotala u šablony R... :) A vzdala jsem to potřebovala bych poradit...

Libor Řezníček 22. 12. 2013 22:27

POMÓC!!!

Tak jsem se řídíl všemy pokyny a přesto mi to nejede:( asi jsem někde udělal krpu:( PROSÍM O REVIZI HTML KÓDU adresa stránek je
http://www.tichystroje.cz/

Předem děkuji za odpověď

Petr Doseděl - eStránky.cz 6. 1. 2014 9:22

Re: POMÓC!!!

Dobrý den,
u stylu Světla je potřeba vložit obrázky až do <div class="inner_frame">.

Kontrola kódu je časově náročnější činnost, pokud Vám slider nepůjde, napište mi na petr.d@estranky.cz a můžeme se domluvit na individuální úpravě. Zprovoznění by se mělo vejít do jedné hodiny programátora.

Děkuji za pochopení, s pozdravem Petr Doseděl

Martin 21. 12. 2013 17:11

Šablona D

Dobrý den, mám styl Šablona D a potřeboval bych poradit, kam vložit obrázky/ v HTML nemohu najít <div id="logo in content nebo tak nějak... Děkuji za odpověď

Petr Doseděl - eStránky.cz 6. 1. 2014 9:17

Re: Šablona D

Dobrý den Martine,
v šabloně D je potřeba obrázky vložit do <div id="header-decoration" class="decoration">

Libor Řezníček 17. 12. 2013 18:09

šablona Styl Světla

Dobrý den,
používám šablonu Styl Světla a nikde nemůžu najít místo pro vložení obrázů, asi bude označena jinak než na modelové šabloně. Prosím o sdělení souřadnic
Děkuji

Petr Doseděl - eStránky.cz 19. 12. 2013 15:03

Re: šablona Styl Světla

Zdravím Libore,
<div id="header"> je přesně to, co hledáš. Najdeš to v Úpravě XHTML > Hlavička.

megy 16. 10. 2013 10:20

nefunguje

mne to nefunguje a to jsem vsechno udelala..:(

Petr Doseděl - eStránky.cz 16. 10. 2013 10:22

Re: nefunguje

Napište mi sem prosím adresu Vašich stránek. Zkusím se podívat, kde by mohla být chyba.

megy 16. 10. 2013 10:31

Re: Re: nefunguje

megyliterova.cz

Už jsem to odstranila z toho html, tak to tam neni..
Ale nevedela jsem, jestli tam nechat ty popisky typu //nastaveni prezentace...? To byla jedna chyba možná...

A pak jsem nevěděla, kam dát ten zdrojový kod poslední s těmi fotkami....

Děkuju moc, jsem na tohle uplně levá, je to strasně moc nějakých písmenek, tak se v tom snažím nějak orientovat , ale moc mi to nejde..:D

Petr Doseděl - eStránky.cz 16. 10. 2013 10:40

Re: Re: Re: nefunguje

V úvodu článku je napsaná pokročilá obtížnost, ale podíváme se na to. :)

Popisky zůstat můžou.

Poslední část kódu - ten s obrázky vložte pod "<div id="logo-in-content">", opět v hlavní šabloně.

Nevidím u vás nahrané fotky, které se tam mají zobrazit.

Zkuste znovu vložit kódy do HTML ať se můžu podívat, kde by mohla být chyba.

megy 16. 10. 2013 10:56

Re: Re: Re: Re: nefunguje

Porad nic..:D Asi jsem fakt truhlik..

Petr Doseděl - eStránky.cz 17. 10. 2013 9:59

Re: Re: Re: Re: Re: nefunguje

Doplnil jsem do článku náhled na kompletní zdrojový kód - http://www.tutorialy.estranky.cz/file/42/slider.jpg, který pomůže i méně zběhlým v HTML :)

megy 12. 12. 2013 17:54

Re: Re: Re: Re: Re: Re: nefunguje

http://www.megyliterova.cz/

zde je ukázka:)

Andrej 11. 12. 2013 21:45

História cesty k článkom prekrýva ostatné veci

Na našich stránkach minisered.estranky.sk sa prekrýva uvítací text s cestou k článkom. A po otvorení článku sa prekryje zase nadpis článku s cestou k článkom. Teda asi je zle nastavená tá história k článkom.
Pomôžte mi prosím ako to napraviť, ale ešte lepšie by bolo keby to správcovia opravia za nás, keďže si už nevieme dať s tým rady. Ďakujeme

Petr Doseděl - eStránky.cz 12. 12. 2013 9:32

Re: História cesty k článkom prekrýva ostatné veci

Dobrý den,
chyba vznikla špatnou úpravou html kódu. Napište mi prosím na mail petr.d@estranky.cz a pokusíme se tento problém vyřešit.

S pozdravem Petr Doseděl