• címkék:
  • coda
  • slider
  • tartalom
  • csúsztat
  • fül
  • tab
  • vált

Coda-Slider 2.0

Alaphelyzet

Tartalom 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tartalom 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 3

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Auto slide

Az AutoSlide kapcsoló engedélyezésével lehetőség van a slide-ok (tartalmak) automatikus lejátszására, időzítésére (autoSlideInterval paraméter).
Ugyanitt lehetőségünk van definiálni, hogy klikkelés esetén az automatikus lejátszás megálljon, vagy mindentől függetlenül folytatódjon: autoSlideStopWhenClicked.

Tartalom 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tartalom 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 3

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Külső hivatkozás (cross linking)

Lehetőség van a tartalmak külső hivatkozással történő elérésére is, akár másik oldalról is.
Ennek szintaktikája:

Felső slider-hez linkek: Tartalom 1 | Tartalom 2 | Tartalom 3
Alsó slider-hez linkek: Tartalom 1 | Tartalom 2 | Tartalom 3

Tartalom 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tartalom 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 3

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tartalom 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 3

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Nem-dinamikus navigáció

A fenti példák esetében a fülek, illetve a nyilak dinamikusak: a tartalom bővítésével/csökkentésével nem esnek szét, igazódnak hozzá. Természetesen lehetőség van ezt felülbírálni, ha valaki szeretné egyénileg meghatározni a navigációs elemek pozícióját, méretét, stb.

A navigáció dinamikus viselkedésének letiltása a plugin deklarációjánál:

Ezután jöhet maga a HTML kód, egy .coda-slider-wrapper-on belül egyből:

Természetesen vissza van még a megfelelő CSS kódok elkészítése, de az már mindenkinek a maga ízlése szerint.

Panel 1

Lorem ipsum dolor sit amet...

Panel 2

Proin nec turpis eget dolor dictum lacinia...

Panel 3

Cras luctus fringilla odio vel hendrerit....

Panel 4

Nulla ultricies ornare erat...

Kezdő slide meghatározása

Ha szeretnénk, hogy ne a fizikailag első slide legyen a kezdő slide, akkor mód van a kezdő slide meghatározására is (firstPnanelToLoad):

Tartalom 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tartalom 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 3

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Szabályozott sebesség és csillapítási hatás

A slide-ok közti váltás sebessége is módosítható. Ehhez a deklarációnál két paraméter is rendelkezésünkre áll: egyrészt módosítható a váltás sebessége (slideEaseDuration), illetve beállítható, hogy a tartalmi rész milyen sebességgel idomuljon a slide tartalmához (autoHeightEaseDuration). Ha mindkét értéket kellően kicsire állítjuk, akkor viszonylag gyors animációt kapunk, míg nagyobb érték esetén lassabban zajlik le a váltás folyamata és jobban észrevezető az ún. csillapítási effektus.

A csillapítási hatás szintén módosítható, mind a tartalmi részhez való igazódás (autoHeightEaseFunction), mind a slide-ok közti váltás esetén (slideEaseFunction). Itt elég sok hatás alkalmazható, melyekre most nem szeretnék kitérni, de a rendelkezésre álló típusok, azok viselkedésének grafikonjai megtekinthetőek Robert Penner oldalán, ahol ráadásul az adott hatás ki is próbálható. A flash animáció bármely pontjára klikkelve a képen látható golyó az adott pozícióba mozog a kiválaszott hatás, illetve a beállított sebesség alkalmazásával.

Példa egy gyorsabb animációra:

Tartalom 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tartalom 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 3

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Egy másik hatást alkalmazva, lassabb sebességgel:

Tartalom 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.

Tartalom 2

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Tartalom 3

Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.

Videók megjelenítése

A sima szöveges tartalmak mellett akár youtube videók is megjeleníthetők a Coda-val.
(Azt persze nem árt tudni, hogy ha valamelyik videót elindítjuk, majd átlapozunk egy másik videóra, az előzőleg elindított videó lejátszása nem szakad meg!)

A YouTube videókat a .panel blokkokba kell beágyazni a következőképpen:

Természetesen ezen felül még a CSS kódokban is lehetőség van módosítani a kinézetet (pl. méret).

Tartalom 1

Tartalom 2

Tartalom 3

További paraméterek, lehetőségek

Az itt leírtak nem ölelik fel a Coda-Slider-ben rejlő összes lehetőséget, csupán ízelítőt ad annak sokrétűségéből.
A plugin teljes dokumentiációja (angol nyelven!) megtalálható itt: link

« bezár