Diskuze: Plugin nebo tutoriál na slideshow

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

bazywalker

Člen

bazywalker:27.2.2015 7:53

Neví někdo o nějakém pluginu nebo tutoriálu na podobný slideshow, který se nachází na slavia.cz?

Odpovědět

27.2.2015 7:53

Aleš Lulák

Člen

Aleš Lulák:6.3.2015 22:57

Ahoj,

no, vlastně by se to tak trošku dalo vyřešit samostatným CSSkem, samozřejmě to není příliš pro praktické využití, ale ze zajímavosti jsem to stejně udělal.

Ukázka: http://jsfiddle.net/frbtxdcv/
Komentář: Funguje to tak, že se zobrazí vždy potomek elementu s hoverem – tedy potomek je pro nás obsah a rodič je "tlačítko", což je trošku zvláštní vzhledem k velikostem. Vše je obalené v divu, který je stejně veliký jako jeho veškerý obsah, jelikož jsou zde použity relative a absolute pozice, které by nám přímo v DOMu dělali trošku nepořádek. Při hoveru měním z-index, první slide je stále na vyšším z-indexu, aby při žádném hoveru byl vidět právě první slide, ale zároveň je nižší než z-index elementu v hoveru. Také by šel použít display. Samotné tlačítko jsem vyplnil spanem, aby se lépe stylovalo a nastavil jsem mu cursor: pointer, což je vlastně trošku zavádějící, ale na demonstraci to stačí.

Stylování samotného aktivního tlačítka je obdobné jako při zobrazovaní obsahu, tedy když má hover.

Jak jsem psal ihned ze začátku, není to pro praktické použití, protože se nám bude vždy vracet první slide a už vůbec se nám to nemůže střídat automaticky. Takže od tohoto řešení opouštím k dalšímu.

Další řešení je samozřejmě javascript. Klasické řešení je předávat si classu, která nám ukazuje právě aktivní slide, většinou active. Vypujčím si pro příklad jQuery, jelikož jsem línej to psát v čistém javascriptu.

Ihned ze začátku si hlavně udělám lepší strukturu elementů, než v CSS příkladu, sice to ve finále ničemu nevadí, ale pro lepší klid v duši to udělám nějak normálně – dva sloupce.

Ukázka: http://jsfiddle.net/paobey24/
Komentář: Jak je to krátké že? Jednoduše při najetí na tab se nám vybere jeho data atribut slide a nastaví se mu classa active, rovněž tak se předá stejné číslo pro obsah, kde se rovněž nastaví active, což je prostě display active – před celým tímto procesem se všechny active mažou. Místo data atributů by se dala použít třeba eq() funkce, která nám vrátí pořadí prvku, ale pro lepší práci bych volil data atribut.

Když už jsem v první ukázce nakousl, že by se to mohlo střídat automaticky, tak si zde přiděláme v jednoduchém příkladu funkci na střídání.

Ukázka: http://jsfiddle.net/hf697ort/
Komentář: Teď už tam máme navíc nějaké funkce a to changeSlide, která přijíma číslo slidu, který má být viditelný a automaticChange, který nám zajišťujě, že se slidy mění sami. V timeOutech si nastavujeme čas, kdy chceme změnu, jakmile uživatel najede myší na tab, automatické měnění se vypne pomocí vynulovaní časovače.

Doufám, že to dává alespoň trochu smysl a pomohlo to.

Nahoru Odpovědět

6.3.2015 22:57

"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall

Aleš Lulák

Člen

Aleš Lulák:6.3.2015 23:35

Tak jsem možná i přišel na praktičtější využití CSS příkladu.

Trošku styly přepíšeme a dáme do nich selector target:

#banners .tab#item-1 .content {background-color: blue; top: -0px; display: block;}
#banners .tab#item-2 .content {background-color: green; top: -50px; display: none;}
#banners .tab#item-3 .content {background-color: red; top: -100px; display: none;}
#banners .tab#item-4 .content {background-color: purple; top: -150px; display: none;}
#banners .tab#item-5 .content {background-color: orange; top: -200px; display: none;}
#banners .tab:hover .content {z-index: 20  !important; display: block !important;}

:target .content {z-index: 10; display: block !important;}

Teď se nám při předání idéčka, vlastně kotvy, v URL zobrazí daný obsah a pokud nebude nic zadaného, zobrazí se slide první. Přepínání pohybem myši stále funguje.

Tohle mě vede k tomu, že vlastně když si odstraníme :hover a místo původních spanů si vytvoříme odkazy na kotvu, můžeme si měnit obsah pomocí kliknutí a to úplně čistě bez javacriptu, což je už vlastně docela cool!

Viz. http://jsfiddle.net/9zxffzkx/

Editováno 6.3.2015 23:38

Nahoru Odpovědět

6.3.2015 23:35

"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall

Aleš Lulák

Člen

Aleš Lulák:6.3.2015 23:46

*ještě spam

Vlastně už to nemusí být ani nakóděné ošklivě v sobě, protože nám nejde o hover.

Nahoru Odpovědět

6.3.2015 23:46

"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.

Nejčastěji vyhledáváné

Diskuze: Plugin nebo tutoriál na slideshow