Keskustelu: Nettisivujen teko: jQuery scroller/slider

Olen tässä yrittänyt löytää koodia sellaiselle filminauha-tyyppiselle scrollerille, mutta juuri oikeanlaista ei vaan tahdo löytyä. Eli haluaisin siis laittaa vaakatasoon nauhaksi kuvia/tekstiä, joita klikkaamalla siirryttäisiin sitten jollekin sivulle tms. ja nauhaa siirrettäisiin päistä nuolilla. Nauhassa pitäisi näkyä useampi kuva vierekkäin, esim. 4kpl voisi olla sopiva. En siis halua, että kuva aukeaa nauhan yläpuolelle (kuten monissa vaihtoehdoissa on), enkä mitään hienoja efektejä, vaan ihan perus juttua. Löytyisiköhän tähän jostain sopiva koodi?

Etsitkö nyt jotain tämän tyyppistä ratkaisua: side-scroll

Kyllä, juuri tuollaista. Tuohon vaan pitäis saada ne nuolet, eikä palkkia.

sellaisenhan voi suht näppärästi myös luoda itse...

http://jsfiddle.net/xVQH8/

Miten tuollaiseen saisi parhaiten esiin html-sisältöä? jos mulla on vaikkapa joku pieni elementti, jolla on tietysti joku osoite, niin miten sen elementin saisi tuohon näkyviin? onnistuukohan iframella? Vai onko joku järkevämpi keino?

Mitäpä jos vaikka testaisit itse onnistuuko se iframen laitto.

No.. kokeilin kyllä, mutta ajattelin että onko siihen joku parempi keino jota voisi kokeilla, ennen kuin alan tuota iframea säätämään. Kyllähän se toki toimii, mutta ei ihan niin kuin pitäisi.

mitä tarkoitat elementillä?

Mikäli haluat näyttää jonkun samalla sivulla olevan elementin (div etc.) sliderissa, eihän siinä ole mitään järkeä iframea käyttää. jos taas haluat näyttää kamaa sivulta A sivulla B, niin voit käyttää iframea.

toisaalta voit myös käyttää kyseiseen tarkoitukseen jqueryä suoraan:

$("#MyDesiredElement").load('MyHtmlPage.html #ElementIWantToFetch');

Kiusaan Putkan potentiaalisia JavaScript-elitistejä tällä.

http://piittinen.name/html5css3/kuvalista.html

Toimii Firefox, Chrome, IE10. Opera renderöintibugaa vähän animoinnissa, mutta Putkan Opera-käyttäjät on jo tottuneet siihen kun jakelen jotain. IE9 toimii muttei transitioi. IE8 (tai ylipäätään selaimet jotka ei tue :nth-of-typeä) näyttää vaakasuuntaisen vierityspalkin.

Hyvä Merri! Näistä CSS3-viritelmistä ei tosiaan ole liikaa esimerkkejä. :)

Hyvä jos kelpaa :)

Tein vielä pientä säätöä. Nyt CSS on vähän lyhyempi kun korjasin visibility-sääntöjä järkevämmäksi. Samoin lisäsin kokonaan uuden esimerkin, joka sisältää tuon jälkimmäisen pyynnön avattavasta sisällöstä. Jos sinne tahtoo lätkäistä iframen articlen sijasta, niin hyvin onnistuu.

Lisäksi varmistin, että menee läpi W3C:n validaattorista. Eipä siellä kunnon virheitä ollut, ainoastaan @charset tarvitsi kommentoida kun se on ilmeisesti sallittu vain itsenäisissä CSS-tiedostoissa.

Selvittelin asiaa, ja se riittää, että slideriin saa laitettua kuvan ja tekstiä. Sitä varten valikoin tämän ratkaisun: http://ryrych.github.com/rcarousel/examples/html.html

tuossa on nyt vaan se ongelma, että kun sivulla näkyy kerralla useampi ruutu, niin siinä vaiheessa kun viimeinen ruutu on viimeisenä, kelataan ensimmäinen ruutu yhdellä hyppäyksellä ensimmäiseksi, tähän tapaan: http://ryrych.github.com/rcarousel/examples/custom_step_and_visible.html

Haluaisin siis, että slidet siirtyy yksi kerralla koko ajan, eikä niin että kierroksen loppuessa hypätään alkuun yhdellä isolla siirrolla. Olisikohan tuohon joku ratkaisu? Mä en ole oikein hyvin perillä tuon jQueryn saloista, enkä siten osaa tuonne koodiin mitään isompia muutkosia tehdä.