Scroll div

[Tanuki]

We hebben een divje met overflow-x: auto, hij scrollt dus horizontaal.

In die div staan allemaal divjes, met daarin weer een div en daarin een plaatje wat altijd even groot is.

De parent div is zo breed dat er 4 divjes met foto's in passen (en als je de rest wilt zien moet je dus scrollen naar rechts of naar links).

Leuk en aardig natuurlijk, maar we zijn eigenlijk op zoek naar een JavaScript die op een mooie manier kan scrollen. Dus dat we er een vorige en volgende knop bij zetten en als je daar dan op klikt dat ie 1 divje opschuift. Eventueel met een leuk effectje of zo.

Nu hebben we al best veel gezocht op Google, maar we hebben niet echt een script gevonden dat aan onze eisen voldoet. Bij de meeste scripts in die trant moet je de plaatjes opgeven in plaats van de HTML code die er in moet komen te staan, of ze scrollen maar 1 plaatje tegelijk (terwijl wij er 4 tegelijk zichtbaar willen hebben). Zelf iets maken hebben we ook al geprobeerd, maar onze kennis van JavaScript is niet zo geweldig. Bestaande scripts aanpassen lukt wel, maar zelf iets moeilijks als dit in elkaar sleutelen is niet te doen...

Ik hoopte dus dat een lezer hier zegt van: "Ja, maar daar heb je <insert scriptje> voor nodig!", want ik kan zelf niet echt iets vinden waarvan ik zeg, ja dit is nou wat ik moet hebben.
Kan misschien ook komen omdat ik niet goed weet waar ik op moet zoeken.

EDIT: Eigenlijk zou het het mooist zijn als we een soort van handler aan de div kunnen hangen, die gewoon bij een scrollevent niet normaal scrollt zoals in de browser, maar dus zelf die divjes laat opschuiven. En dat we dan een deel van die code ook aan de vorige/volgende button kunnen hangen.

[ Voor 9% gewijzigd door Tanuki op 01-02-2008 13:15 ]

[dominic]

<insert scriptje> lijkt me lastig.

Script de volgende stappen
1. Definieer je viewport grootte
2. Definieer de verschillende 'blokken' aan afbeeldingen
3. Schrijf een smooth-scroll scriptje
4. Event handling

en klaar..

[Verwijderd]

Neem zeker eens een kijkje naar css clip.

Je wilt iets scripten zoals dit:
http://labs.joggink.be/imageGallery/ (demo versie, very basic)

Zoja, 1 massive div met daarin je subdivjes, en telkens je clipproportie en positie aanpassen zodat je viewport verschuift en het lijkt alsof je de foto's erin opschuift.

[TheDane]

Al op flickr of hyves gekeken hoe zij dat doen?
of zoiets
http://www.dyn-web.com/dhtml/scroll/

[Tanuki]

dominic schreef op vrijdag 01 februari 2008 @ 13:15:
<insert scriptje> lijkt me lastig.

Script de volgende stappen
1. Definieer je viewport grootte
2. Definieer de verschillende 'blokken' aan afbeeldingen
3. Schrijf een smooth-scroll scriptje
4. Event handling

en klaar..

Wat een domme reply... Als je de topic start had gelezen dan wist je dat ik geen JavaScript held ben en dit dus echt niet zomaar zelf kan maken...

Toch heb ik aan het woord "smooth scroll" wel iets gehad, dat is namelijk precies wat ik zocht. Die anchors zaten er al in, dus nu moet ik alleen nog zorgen dat de linkjes goed worden ingesteld.

Bedankt, ook de andere 2 reaguurders.

EDIT: Het probleem is alleen dat ik wel altijd 4 divjes in beeld wil houden... Hoe kan ik dat met die smooth scroll van mootools doen?

[ Voor 8% gewijzigd door Tanuki op 01-02-2008 14:05 ]

[XangadiX]

dit noemen we in de faq heel duidelijk een scriptrequest, lees er alles over op Webdesign, Markup & Clientside Scripting Policy

daarnaast vind ik het nogal wat om iemand die je desondanks toch probeert te helpen te vertellen dat hij een domme reply geeft.

En ik vind mensen voor 'reaguurder' uitmaken geen stijl.