Diashow mit window.setInterval zeigt nur nächstes Bild

[burzelmann]

Hallo liebe Forumsbenutzer,

ich hab eine neue Fotogalerie erstellt, die nun um eine Diashowfunktion erweitert werden soll.
Die Diashow ruft allerdings nach Klick auf den entsprechenden Button nur das nächste Bild auf und wiederholt dies endlos.

Die wichtigen Stellen Quelltext:

  
function view(picture_id){  
id = picture_id;  
var picture = "<a href=\"images/pictures/<?php echo $directory;?>/" + picture_id + ".jpg\"><img id=\"" + picture_id + "\" name=\"" + picture_id + "\" src=\"images/pictures/<?php echo $directory;?>/" + picture_id + ".jpg\" style=\"width:0px; height:0px; border:1px solid white;\"></a>";  
if(picture_id != ""){  
document.getElementById("view").innerHTML = picture;  
var image_url = "images/pictures/<?php echo $directory;?>/" + picture_id + ".jpg";  
window.setTimeout("BildAnz('" + image_url + "')", 1);  
window.setTimeout(animiere, 10);  
window.setTimeout(animiere2, 10);}  
else{  
document.getElementById("view").innerHTML = "Kein Bild";}  
};  
function start_diashow(){  
var next = parseInt(id);  
var next = id;  
next++;  
diashow_init = window.setInterval("view('" + next + "')", 3000);  
};  

Erklärung:
In der Galerie gibt es Thumbnails, die bei mouseover die Funktion view(id des Thumbnails) aufrufen. Dadurch wird in der Galerie das Originalbild aufgerufen (die Funktionen animiere() und animiere2() dienen nur als Eingangseffekt und BildAnz() um die Größe des Bild zu bestimmen).

Nun war mein Gedanke, dass ich als Diahowfunktion einfach die Funktion view() mittels setInterval alle 3 Sekunden aufrufen könnte und dabei die globale Variable id erhöhe um immer das nächste Bild aufzurufen.
Das klappt allerdings nicht, wie schon oben gesagt.

Ich hab jetzt echt schon stundenlang herumprobiert und ihr seit meine letzte Hoffnung...

Gruß

burzelmann

[LX]

Ohne ein komplettes Beispiel (am Besten mit URL zum Testen in Firebug) können wir Dir kaum helfen. Möglicherweise sind gerade die Funkionen, die Du uns nicht gezeigt hast, für den Fehler zuständig.

Allerdings ist der folgende Aufruf etwas fragwürdig:

diashow_init = window.setInterval("view('" + next + "')", 3000);

next wird hier einmal in den String geschrieben und dann immer wieder aufgerufen.

Das korrekte Vorgehen hierfür besteht darin, next entweder als globale Variable zu verwenden oder aus dem vorherigen Wert (welcher sich aus dem img-src ergeben sollte) zu berechnen.

Gruß, LX

[burzelmann]

Ohne ein komplettes Beispiel (am Besten mit URL zum Testen in Firebug) können wir Dir kaum helfen. Möglicherweise sind gerade die Funkionen, die Du uns nicht gezeigt hast, für den Fehler zuständig.

»»

Die URL findet sich im Beitrag... oder was meinst du?

Allerdings ist der folgende Aufruf etwas fragwürdig:

diashow_init = window.setInterval("view('" + next + "')", 3000);

next wird hier einmal in den String geschrieben und dann immer wieder aufgerufen.

»»
Wieso wird das immer wieder aufgerufen (an der Stelle sei mal gesagt, dass ich mich erst seit dieser Fotogalerie mit JS beschäftige)?
Der Befehl sollte eigentlich nur die Funktion view mit der um 1 erhöhten id (id wurde vorher von der Funktion view global gesetzt und entspricht dem dem aktuell angezeigten Foto) aufrufen und somit das nächste Bild anzeigen...

Das korrekte Vorgehen hierfür besteht darin, next entweder als globale Variable zu verwenden oder aus dem vorherigen Wert (welcher sich aus dem img-src ergeben sollte) zu berechnen.

Gruß, LX

Mhh, dazu müssten dann wohl reguläre Ausdrücke ran, oder?
Wie macht man das in Javascript?

[burzelmann]

Ok. Ich hab es jetzt geschafft mittels

  
var picture = document.getElementById(id);  
var src_url = picture.src;  
var cut = src_url.split("/");  
var cut2 = cut[9].split(".");  

die ID des aktuellen Bilds zu ermitteln.
Problem besteht aber auch weiterhin, selbst wenn ich die Variable erhöhe und als Übergabewert für view() benutze.

[LX]

Nein, Du solltest den Wert nicht im String von setInterval übergeben, da er sonst nicht darin geändert werden kann...

Gruß, LX

[burzelmann]

Nein, Du solltest den Wert nicht im String von setInterval übergeben, da er sonst nicht darin geändert werden kann...

Gruß, LX

Danke.
Das hat mir den Anstoss in die richtige Richtung gegeben.

Die im ersten Beitrag angegebene URL ist ab jetzt ungültig.

[ChrisB]

Hi,

diashow_init = window.setInterval("view('" + next + "')", 3000);

next wird hier einmal in den String geschrieben und dann immer wieder aufgerufen.
»»
Wieso wird das immer wieder aufgerufen

Weil du das, was hier passiert, von innen nach aussen betrachten musst:

Zuerst mal wird ein String zusammengebastelt, aus "view('" und dem zu diesem Zeitpunkt aktuellen Inhalt von next und "')" - da kommt meinetwegen sowas wie "view('abc')" heraus.
Anschliessend wird das als erster Parameter an setInterval übergeben - was aus diesem String ein Funktionsobjekt macht: Aufruf von view mit dem Parameter 'abc'.
Und genau letzterer Aufruf wird jetzt alle 3000 Millisekunden wieder ausgeführt.
Ob du irgendwann nach dem setInterval den Wert von next änderst, interessiert jetzt überhaupt niemanden mehr. Die Stelle, wo der String für den ersten Parameter zusammengebastelt wurde, ist genau *ein* Mal ausgewertet worden - und diese Code-Stelle kommt nachher nicht mehr zur Ausführung, also kann ein geänderter Wert von next dort auch überhaupt keinen Einfluss mehr haben.

Arbeite dir mal diesen Artikel durch: Fader-Framework - kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Dort bekommst du vermittelt, wie man so etwas zeitgemäßer umsetzt.

MfG ChrisB