Slideshow Javascript

indyfree · 07.06.2009

Hey,

ich suche eine Slideshow wie hier Der Abflug am Oortkatensee in Bergedorf: Home auf der Startseite.

Ich weiß, dass das über ein CMS läuft und das die Slideshow extra dafür geschrieben wurde. (aber ist ja eher sekundär)

Also ich suche so eine Slideshow in Javascript. Ich habe auch schon welche gefunden allerdings muss man bei denen jedes Bild einzeln einfügen. Ich möchte aber gerne, dass die Bilder einfach aus einem Ordner genommen werden und man nicht jedes Bild einzeln einfügen muss.

Hoffe, dass mir jemand helfen kann.

MfG
indyfree

Dragor · 07.06.2009

AW: Slideshow Javascript

such dir eins aus ;-)

Dynamic Drive- Dynamic Content

indyfree · 07.06.2009

AW: Slideshow Javascript

hey,

ich habe jetzt eine gefunden, die genau meinen Bedürfnissen entspricht und zwar diese hier:

Die funktioniert auch. Allerdings nicht wenn ich die in mein Desin include

die ist da jetzt included allerdings wird sie nicht angezeigt.

kann mir da jemand helfen??

edit: ohh...ich sehe folgende fehlermeldung im quelltext. allerdings kann ich damit nichts anfangen

PHP:

<script type='text/javascript'>
var Animation = new Array();
var bild = new Array();
var i = 0;
<br />
<b>Warning</b>:  opendir(http://www.handball-bergedorf.de/slideshow/bilder/) [<a href='function.opendir'>function.opendir</a>]: failed to open dir: not implemented in <b>/kunden/150888_22113/rp-hosting/10/10/handball-bergedorf.de/home.php</b> on line <b>172</b><br />
<br />
<b>Warning</b>:  readdir(): supplied argument is not a valid Directory resource in <b>/kunden/150888_22113/rp-hosting/10/10/handball-bergedorf.de/home.php</b> on line <b>174</b><br />
<br />
<b>Warning</b>:  closedir(): supplied argument is not a valid Directory resource in <b>/kunden/150888_22113/rp-hosting/10/10/handball-bergedorf.de/home.php</b> on line <b>180</b><br />

for (var r = 0; r < 0; r++) {
 Animation[r]=new Image(); Animation[r].src=bild[r];
}

function anzeigen() {
 if (i < 0) {
  document.images.dummy.src=Animation[i].src;
  i++;
 }
 else {
  i=0;
 }
  setTimeout('anzeigen()', 2500);
}
</script>

EDIT2: Ich habe jetzt den Pfad geändert und erhalte keine Fehlermeldung mehr (siehe Quelltext von home.php) allerdings wird die mir einfach nicht angezeigt!!

indyfree · 07.06.2009

AW: Slideshow Javascript

Ich habe den Fehler gefunden. Ich hatte am Anfang <body onload... drinne und das hat das body onload aus dem slideshow script blockiert. jetzt habe ich das einfach gelöscht und es funktioniert alles problemlos!

indyfree · 07.06.2009

AW: Slideshow Javascript

Es sind doch noch Fragen aufgetaucht jetzt wo es funktioniert und ich will keinen neuen Thread aufmachen deswegen Doppelpost!

Der Code sieht jetzt so aus:

PHP:

<?php
# Diashow mit PHP und JavaScript

# Verzeichnis der Bilder
$verzeichnis = "slideshow/bilder/";

# Geschwindigkeit in Millisekunden
# 3000 = 3 Sekunden
$peed = 2500;

echo "
<script type='text/javascript'>
var Animation = new Array();
var bild = new Array();
var i = 0;
";

$ordner = openDir($verzeichnis); 
$by = 0;
while ($file = readDir($ordner)) {
 if($file != "." && $file != "..") {
  echo "bild[$by]='$verzeichnis$file';\n";
  $by++;
 }
}
closeDir($ordner);

echo "
for (var r = 0; r < $by; r++) {
 Animation[r]=new Image(); Animation[r].src=bild[r];
}

function anzeigen() {
 if (i < $by) {
  document.images.dummy.src=Animation[i].src;
  i++;
 }
 else {
  i=0;
 }
  setTimeout('anzeigen()', $peed);
}
</script>

<body onLoad='anzeigen();'>
<div align=center><img name='dummy'></div>
";?>

Jetzt hätte ich aber gerne, das die Bilder immer per Zufall angezeigt werden. Außerdem lädt er immer alle Bilder vor das dauert ziemlich lange vor allem wenn man eine langsame connection hat. kann man das auch irgendwie ändern, sodass er immer nur das bild lädt was als nächstes kommt?

vielen dank im voraus.

indyfree

indyfree · 09.06.2009

AW: Slideshow Javascript

Kann mir da echt keiner weiterhelfen? :S

Rakete · 09.06.2009

AW: Slideshow Javascript

Einen Zufallswert kannst du in JavaScript mit

Code:

Math.random()

erzeugen.

Um das Preloading zu unterdrücken, musst du die Schleife, in der das Array "Animation" gefüllt wird, entfernen und danach die Zuweisung zum Dummy-Image anpassen (hier würdest du auch den Zufallswert einbauen)

Einfacher wäre aber, einen Imagerotator herunter zu laden, dem man per Parameter sagen kann, dass die Reihenfolge zufällig sein soll.
Dieser kann das, z.B.: "Ultimate Fade-In Slideshow" - findest du auch hinter dem Link, den dir Dragor gegeben hat.

... und wie das Javascript-Array mit Hilfe von PHP gefüllt wird, weißt du ja jetzt.

indyfree · 09.06.2009

AW: Slideshow Javascript

Die Ultimate Fade-In Slideshow klingt gut, aber man muss alle Bilder einzeln eingeben oder zieht er die Bilder auch aus einem Ordner? Ich denke nicht. Ist für mich aber leider sehr wichtig, weil viele Bilder in die Slideshow sollen.

Code:
Einen Zufallswert kannst du in JavaScript mit

Code:

Math.random()

erzeugen.

Um das Preloading zu unterdrücken, musst du die Schleife, in der das Array "Animation" gefüllt wird, entfernen und danach die Zuweisung zum Dummy-Image anpassen (hier würdest du auch den Zufallswert einbauen)

sry, aber ich habe leider keine Vorstellung wie ich jetzt den Code ändern muss. :S

cebito · 09.06.2009

AW: Slideshow Javascript

Code:

function anzeigen() {
document.images.dummy.src=Animation[Math.round(Math.random()*$by)].src;
setTimeout('anzeigen()', $peed);
}

indyfree · 09.06.2009

AW: Slideshow Javascript

perfekt ich danke euch vielmals - es funktioniert blendent

doch die ladezeit ist immer noch da

cebito · 09.06.2009

AW: Slideshow Javascript

indyfree schrieb:
doch die ladezeit ist immer noch da

Um das preloaden kommst du nicht drumrum, sonst wird die Überblendung alles andere als elegant aussehen...

indyfree · 09.06.2009

AW: Slideshow Javascript

kannst du mir trotzdem sagen wie ich das weg machen könnte. will mal gucken wie das aussieht!

cebito · 09.06.2009

AW: Slideshow Javascript

Wie Rakete schon sagte müsstest du die for-Schleife entfernen, in der Animation gefüllt wird. Dann müsstest du "anzeigen" wie folgt ändern:

Code:

function anzeigen(){
document.images.dummy.src=bild[Math.round(Math.random()*$by)];
setTimeout('anzeigen()', $peed);
}

Habs nicht getestet...

indyfree · 09.06.2009

AW: Slideshow Javascript

hey,

danke dir. Meiner Meinung nach passt das jetzt alles. Ich habe das jetzt gemacht ohne Vorladen und bei mir sieht das weiterhin ganz normal aus.

Kannst es dir ja selber mal angucken und deine Meinung sagen:

cebito · 09.06.2009

AW: Slideshow Javascript

Sieht gut aus, aber mir ist grad in deinem Quelltext aufgefallen, dass, weil er $by nach dem letzten Bild noch einmal hochzählt (=tatsächliche Anzahl+1) 204 statt 203 in der function steht. Änder die nochmal so um ($by-1), sonst kommt ein undefined, wenn die Zufallszahl 204 wird.....

Code:

function anzeigen(){
document.images.dummy.src=bild[Math.round(Math.random()*($by-1))];
setTimeout('anzeigen()', $peed);
}

indyfree · 09.06.2009

AW: Slideshow Javascript

wahrscheinlich nur mit einer klammer nach dem ($by-1

ist das jetzt alles so korrekt mit dem quelltext? hab es geändert.

cebito · 09.06.2009

AW: Slideshow Javascript

indyfree schrieb:
wahrscheinlich nur mit einer klammer nach dem ($by-1

Code:

document.images.dummy.src=bild[Math.round[COLOR=Lime]([/COLOR]Math.random[COLOR=Purple]()[/COLOR]*[COLOR=Red]([/COLOR]$by-1[COLOR=Lime][COLOR=Red])[/COLOR])[/COLOR]];

nur mal um zu zeigen, wo die zweite schliessende Klammer herkommt. ($by-1) muss geklammert sein, damit die Rechnung vor der Multiplikation erfolgt - haben wir mal alles irgendwo gelernt

Math.round( sollte auch noch geschlossen werden...
Schau nochmal nach, da ich ja nur den ausgegebenen Code seh und da ist

Code:

document.images.dummy.src=bild[Math.round(Math.random()*[B][COLOR=Red]203-1[/COLOR][/B])];

203-1 nicht geklammert...