Diskuze: Plugin nebo tutoriál na slideshow

JavaScript JavaScript Plugin nebo tutoriál na slideshow

Avatar
bazywalker
Člen
Avatar
bazywalker:

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
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na bazywalker
Aleš Lulák:

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
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Aleš Lulák
Aleš Lulák:

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
Jsem hloupý člověk, proto se musím vzdělávat
Avatar
Aleš Lulák
Člen
Avatar
Odpovídá na Aleš Lulák
Aleš Lulák:

*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
Jsem hloupý člověk, proto se musím vzdělávat
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.