Javascript fade slideshow

[kees1991]

Nou de titel en de omschrijving zeggen eigenlijk al genoeg, maar ik zal het toch even toe lichten.

Ik wil graag een nieuwe website maken met op de home pagina een slideshow en deze wil ik graag als een javascript.

Ik wil een javascript slideshower en geen flash omdat ik er gemakkelijk en altijd nieuwe afbeeldingen er aan toe wil kunnen voegen zonder weer een nieuw flash animatie te maken.

Verder is het zeer handig als ik de afmetingen kan veranderen.

Ik hen al op zoek gegaan op het internet, maar ik kan hier vooral tutorials vinden en geen kant en klare script's.

Heeft iemand een linkje voor mij?

[marcootje]

Als je een tutorial volgt krijg je meestal ook een volledig script, en heb je er nog uitleg bij ook .

Maar goed, volgens mij was het niet zo moeilijk een compleet script te vinden?

Hier een voorbeeld:

http://www.google.nl/search?q=javascript+fade+slideshow

bracht me op:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

En volgens mij voldoet die wel?

EDIT: ik zie nu $-tekens in het script staan, dus het kan zijn dat het voorbeeld jQuery vereist. (Ws heb je dat niet geinstalleerd..) Maar alsnog zijn er volgens mij genoeg voorbeelden te vinden.

Misschien is dit wel wat bijv. http://www.bytemycode.com/snippets/snippet/762/

Bewerkt: 3 februari 2010 door marcootje

[kees1991]

oke, bedankt

die http://www.bytemycode.com/snippets/snippet/762/1/ lijkt mij prima, enkel staat er geen info bij dus ik heb een vraag.

ik neem aan dat ik de eerste code in een .JS zet. maar waar zet ik dit deel in dan?

<span id="slideshow" style="position: relative">

<img src="/mfiles/tiago1.JPG" style="position: absolute; top: 0px; left: 200px" />

<img src="/mfiles/tiago2.JPG" style="position: absolute; top: 0px; left: 200px" />

<img src="/mfiles/tiago3.JPG" style="position: absolute; top: 0px; left: 200px" />

<img src="/mfiles/tiago4.JPG" style="position: absolute; top: 0px; left: 200px" />

<img src="/mfiles/tiago5.JPG" style="position: absolute; top: 0px; left: 200px" />

</span>

<script>

window.addEvent('load', function() {

new SlideShow(document.getElementById('slideshow'), 25, 500, true);

});

</script>

ik denk zelf gewoon in de html klopt dat?

is er niet gewoon een kant en klaar script?

Bewerkt: 3 februari 2010 door kees1991

[marcootje]

Dat eerste deel moet inderdaad in javascript, mogelijk extern.

Dat tweede moet inderdaad in de body.

En ik weet niet wat je met kant en klaar script bedoeld, maar dit vind ik redelijk kant en klaar; het is gewoon kopieren plakken, eigen foto's toevoegen et voila.

Bewerkt: 5 februari 2010 door marcootje

[kees1991]

En ik weet niet wat je met kant en klaar script bedoeld, maar dit vind ik redelijk kant en klaar; het is gewoon kopieren plakken, eigen foto's toevoegen et voila.

met kant en klaar bedoel ik een download knop waar als ik op gedrukt hebt in mijn download map een zip'je komt met daar in alle bestanden. waardoor ik dus alleen nog maar de link naar de afbeeldingen hoef te veranderen. dat bedoel ik met kant en klaar.

ik heb er mee bezig geweest maar tot nu toe krijg ik alleen 1 foto te zien en verder gebeurt er niets. ik ga er nog wel even mee bezig, tenzij iemand dus een kant en klare voor mij heeft.

[marcootje]

Ik zag net dat het script alleen werkt in combinatie met de browsers die volgens de standaarden werken. Oftewel: het werkt niet in dat geval dat Internet Explorer heet... Ik denk dat dit ook jouw probleem was.

Ik heb dus even de opacity aangepast een IE, en de prototype functie vervangen door een gewone functie. Het resultaat werkt in ieder geval in Firefox en Internet Explorer, en ik verwacht dat het in de rest ook werkt.

Het zipje met het resultaat zit bijgevoegd. Het enige wat je moet doen is uploaden, en op de pagina waar je het script wilt hebben de html kopieren die in de body staat, en ook ergens het .js-bestand binnenhalen (staat in de .html in de head). Er zitten in het zipje ook 5 test-plaatjes (eigen creaties ).

fadeInOut.zip

Bewerkt: 6 februari 2010 door marcootje

[kees1991]

Bedankt! hier lukt het wel mee.