slideshow mit ajax

[LA1984]

Hey Leute,

ich hab folgendes Problem .... ich habe ein Ajax Request das daten aus einerdatei lädt und eine slideshow script, beides wollt ich verbinden und hab es auch soweit gut geschafft. .


... hier erstmal das script:

<script language="JavaScript">
  function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
	return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
	return new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  
   var Pic = new Array();

    request = getXmlHttpRequestObject();
    //xmlget.overrideMimeType('text/xml; charset=ISO-8859-1');

    request.open("GET", "stream.php?request=1");
    request.onreadystatechange = function(){
  
    if(request.readyState == 4 && polaroidbox.responseText) {
        image = polaroidbox.responseText;
        Pic = image.split(',');
        nr = Pic.length;
        for (var i=0; i<nr -1; i++) {
        Pic[i] = 'picture.php?image='+ Pic[i]
        }
    }
	}
  request.send(null);
  
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;

// do not edit anything below this line
var t;
var j = 0;
var p = 16;

var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>

Das problem an dem ganzen zusammen spiel ist... ist der wert der im var p steht ...

ich kann via ajax request ein array zusammen stellen: 'Pic' ... funktioniert soweit ganz gut unnd nun bräucht ich für das neue script den wert 'p'

dort muss die gesamtanzahl der bilder stehen die im array: 'Pic' stehen....
Normal mach ich das ja mit: 'pic.length' aber das funktioniert irgendwie nach dem request nicht mehr. kA warum...

nun wollte ich oben den wert von 'nr' (also ... was im request bereits steht: nr = Pic.length; ) .. da dort schon die gesamtanzahl drin steht nehmen und auf den wert 'p' ( vom zweiten script ) übertragen aber leider ohne erfolg.

###

Also so funktioniert das ganze script tadellos... durch die datei stream.php wird ein verzeichnis mit bilder ausgelesen und im array 'Pic' gespeichert ... die datei picture.php dient nur der neuberechnung der bilder bei der anzeige( da die orginalbilder sehr groß sind )

###

Hat jemand eine Idee wie ich den wert vonder variable 'nr' aus dem ajax script in die variable 'p' vomn zweiten script bekomme ?



liebe grüße aus berlin und ein schönen abend euch noch
=> La1984

 

[kkapsner]

Du hast da ein AJAX - also ein asynchrones Abrufen der stream.php. Das bedeutet, dass das JS der HTTP-Request einfach nur startet und dann weiter im Text macht. Wenn HTTP-Request dann zurückkommt, wird die onreadystate-Funktion aufgerufen und das Array Pic wird befüllt.
Du musst also das Slider-Script auch erst in der onreadystate-Funktion aufrufen.

PS: der Code ist ja echt nicht gut:

• globale Variablen, die man alle vermeiden kann und soll
• inkonsistente oder komplett fehlende Codeeinrückung
• Verwendung des Array-Konstruktors: keine Vorteile, nur Nachteile, da inkonsistent -> verwende Array-Literale
• unübliche Namenskonvention: in JS verwenden die Meisten klein geschriebene Variablen. Groß geschriebene Sachen sind üblicher Weise Konstruktoren.
• document.all sollte nicht mehr verwendet werden und den Zugriff auf eine bestimmte Node im DOM (also bei dir das <img>) geht besser über document.getElementById().
• außerdem ist die Browserweiche mit document.all falsch, da das auch in den Browsern, die keine Filter kennen, existiert.
• ja und die Filter... gehen nur in älteren IEs... also sinnfrei. Verwende doch ein Framework für die Animationen oder CSS3 transitions.
• window.setTimeout() soll man keinen String als ersten Parameter übergeben, sondern eine Funktionsreferenz. Bei dir also t = window.setTimeout(runSlideShow, slideShowSpeed);
• invalides/veraltetes HTML: das language-Attribut ist veraltet -> weg damit, HTML-Kommentare im JS - du willst doch nicht wirklich den Mosaik unterstützen?

 

[LA1984]

Hmm.... ne menge input...

Ja also ich bin wie es scheint absoluter anfänger in dem punkt. Hab zwar gedacht ich weis wie ajax funktioniert aber anscheinend noch nicht ganz.

Beides sind scripte die ich ausm internet mal heraus suchte und beide funktionierten auch .... auf ihre eigenen weise auch sehr gut.

Nun wollt ich eiggentlich nur ne slideshow die bilder ausm ordner liest und dann die bilderwechselt...

So kam ich auf die idee, diese beiden scripte zusamm zu setzen...

###

Ich danke dir zwar für die hilfe aber ab dein "ps" verstehe ich leider nur bahnhof....

Vielleicht hast du ein beispiel oder ne seite mit mehr info für mich zum belesen, besser verstehen und belesen.

Lg
=> LA1984

 

[kkapsner]

Hab zwar gedacht ich weis wie ajax funktioniert aber anscheinend noch nicht ganz.

Keine Angst - das kommt mit der Zeit.

auf ihre eigenen weise auch sehr gut.

Das "sehr" würde ich bei der Slideshow anzweifeln, da man die Übergangsanimation in modernen Browsern gar nicht sieht.

So kam ich auf die idee, diese beiden scripte zusamm zu setzen...

Die Idee ist ja auch nicht abwegig und es ist auch machbar. Du musst nur das Slideshow-Skript erst im onreadystatechange des AJAX-Skriptes aufrufen und nicht sofort.

Ich danke dir zwar für die hilfe aber ab dein "ps" verstehe ich leider nur bahnhof....

Was verstehst du denn genau nicht?

Vielleicht hast du ein beispiel oder ne seite mit mehr info für mich zum belesen, besser verstehen und belesen.

SELFHTML: JavaScript/DOM für den Einstieg - ist aber an manchen Stellen nicht mehr aktuell und auch nicht immer der beste Stil.
Zum Nachschlagen verwende ich immer https://developer.mozilla.org/ .