Slideshow

[Franky]

Ich werd Javascript nie schnallen - dabei bin ich doch garnicht so dumm.

Ich brauche mal wieder Hilfe bei JAVASCRIPT!! - ein echt rotes Tuch für mich.

ich habe mir bisher in diesem Forum folgenden Code ausgetüfteltt:
[...
<script type="text/javascript">
function fade(step)
         {
         var imgs = document.getElementById("slideshow").getElementsByTagName("img");
         step = step || 0;
         imgs[counter].style.opacity = step/100;
         imgs[counter].style.filter = "alpha(opacity=" + step + ")";
         step = step + 2;
         window.setTimeout(next, 2000);
         if (step <= 100)
            {
            window.setTimeout(function () { fade(step); }, 1);
            }
         else
            {
            window.setTimeout(next, 2000);
            }
         }
function next()
         {
         var imgs = document.getElementById("slideshow").getElementsByTagName("img");
         if (typeof(counter) != "number")
            {
            counter = 0;
            }
         counter++;
         if (counter < imgs.length)
            {
            fade();
            }
         }
    </script>
..]

Mit nem <a href...> starte ich meine Slideshow, die aus vier Bildern besteht. Soweit so gut - es klappt auch alles wunderbar.

Jetzt hätte ich aber gerne zwei Dinge anders:
1.) die Slideshow soll nicht erst auf 'klick' starten, sondern von selbst
und
2.) ich hätte gern eine Endlosschleife

Eigentlich doch ganz simple Dinge, oder nicht?

Ich sitze da jetzt schon fast 2 Stunden dran und bekomme es einfach nicht hin...

Vielleicht wäre einer von Euch Wissenden so lieb mich in Euer Reich eintreten zu lassen...

Gruß Frank

[mrjerk]

Hallo,
Die Endlosschleife müsstest Du einfach durch Änderung eines ifs
hinkriegen:

if (counter < imgs.length)
            {
            fade();
            }

wird zu

  
if (counter >= imgs.length)  
{  
   counter = 0;  
}  
  
fade();  

Dann startest Du das ganze mit "fade(1000);" (oder welchen Step du auch nehmen willst), entweder beim body-Onload event oder in einem separaten Script-Block möglichst weit unten in Deiner HTML-Seite.

Viele Grüße,
Jörg

[Franky]

Also ich will das mal versuchen zu verstehen:

if (counter < imgs.length)
            {
            fade();
            }

hier wird doch geprüft, ob counter kleiner ist, als die Anzahl der Bilder?!
Und wenn wenn dem so ist, wird der Fade mit dem nächsten Bild ausgeführt.

Du hast jetzt folgendes vorgeschlagen:
Wenn Counter größer oder gleich die Bilderanzahl, soll er counter auf '0' setzen. Anschließend wird der Fade ausgeführt. Wozu dann noch den counter prüfen?

if (counter >= imgs.length)
{
   counter = 0;
}
fade();

Dann hast Du geschrieben, ich soll das ganze möglichst weit unten auf der Seite mit fade(1000); starten. Was genau bewirkt diese Funktion?
Bisher starte ich das ganze mit next();
Fragen über Fragen - aber ich wills einfach mal verstehen...

thx für die Gedult

Gruß Frank

[mrjerk]

Hallo,

hier wird doch geprüft, ob counter kleiner ist, als die Anzahl der Bilder?!
Und wenn wenn dem so ist, wird der Fade mit dem nächsten Bild ausgeführt.

Genau. Das bedeutet, wenn alle Bilder durch gefaded sind, hört die Animation auf, weil counter nicht mehr kleiner ist als die Anzahl der Bilder.
Das willst Du aber ja nicht. Du willst ja, das er wieder von vorne anfängt beim ersten Bild, also bei counter = 0.

Du hast jetzt folgendes vorgeschlagen:
Wenn Counter größer oder gleich die Bilderanzahl, soll er counter auf '0' setzen. Anschließend wird der Fade ausgeführt. Wozu dann noch den counter prüfen?

if (counter >= imgs.length)
{
   counter = 0;
}
fade();

Würdest Du den Counter nicht prüfen, also so:

counter = 0;
fade();

dann würde er bei jedem Fade den counter wieder zurücksetzen, also immer wieder das gleiche (nämlich das erste) Bild benutzen.

Du willst aber, dass der Counter in einem einzigen Spezialfall zurückgesetzt wird, nämlich, wenn Du am Ende angekommen bist, also counter den Wert von imgs.length hat.

Dann hast Du geschrieben, ich soll das ganze möglichst weit unten auf der Seite mit fade(1000); starten. Was genau bewirkt diese Funktion?
Bisher starte ich das ganze mit next();

fade(step) und next() rufen sich ja gegenseitig auf, von daher dürfte es egal sein, was Du aufrufst - next geht genauso.

Es ist nur wichtig, dass Du das ganze erst loslaufen lässt, wenn der Browser das komplette Dokument geladen hat. Denn sonst könnte es ja sein, dass er nicht alle Bilder findet, die Du in Deiner fade- und next-Funktion holst (mit getElementById(...).getElementsByTagName(...)).

Um dies sicher zu stellen gibt es zwei möglichkeiten:

• Nutzen des "onload"-Attributes des Body-Tags
    <body onload="next();">
• Ausführen des Scriptes möglichst weit unten auf der Seite, wo Du sicher sein kannst, dass der HTML-Code für Deine Bilder schon komplett geladen wurde.

Viel Erfolg,
Jörg

[Franky]

Hallo Jörg,

vielen lieben Dank für die Ausführliche Erklärung.
Soweit habe ich alles verstanden. Ein Problem ist schonmal gelöst:
Die Slideshow beginnt von selbst. Ich habe es mit dem <body onload..> gelöst.

Die Endlosschleife klappt allerdings nicht. Haben wir da noch irgendwas übersehen? Ich habe jetzt folgenden Code:
[...
<script type="text/javascript">
function fade(step)
         {
         var imgs = document.getElementById("slideshow").getElementsByTagName("img");
         step = step || 0;
         imgs[counter].style.opacity = step/100;
         imgs[counter].style.filter = "alpha(opacity=" + step + ")"; //
         step = step + 2;
         if (step <= 100)
            {
            window.setTimeout(function () { fade(step); }, 1);
            }
         else
            {
            window.setTimeout(next, 2000);
            }
         }
function next()
         {
         var imgs = document.getElementById("slideshow").getElementsByTagName("img");
         if (typeof(counter) != "number")
            {
            counter = 0;
            }
         counter++;
         if (counter >= imgs.length)
            {
            counter=0;
            }
         fade();
         };
</script>
...]

Das letzte Bild bleibt einfach stehen und nichts weiter passiert.
Auch mit next(1000); im Body-Tag funzt es nicht.

Wofür genau steht jetzt nochmal die 1000?

Gruß Frank

[mrjerk]

Hallo,
Gibt es JavaScript-Fehler? Wenn ja solltest Du denen mal zuerst nachgehen.

Wenn nein:
Hmmmm...wie genau sind denn die Bilder in "slideshow" angeordnet? Liegen die alle übereinander (mit unterschiedlichem Z-Index)?
Dann könnte es sein, dass das prinzipiell schon funktioniert, aber das letzte Bild halt alle anderen verdeckt - wenn dann das erste Bild einfaded siehst Du's dann natürlich nicht.

In diesem Fall könntest Du natürlich, wenn Du beim letzten Bild ankommst, für alle Bilder die Opacity einfach auf 0 zurückdrehen.

  
 if (counter >= imgs.length) {  
  
    // Alle Bilder auf durchsichtig zurücksetzen  
    for (var i = 0; i < imgs.length; i++) {  
         imgs[i].style.opacity = 0;  
         imgs[i].style.filter = "alpha(opacity=0)";  
    }  
    counter=0;  
 }  
  

Hat aber den Nachteil, dass das letzte Bild auf einen Schlag komplett verschwindet und erst dann das erste langsam wieder eingeblendet wird.

Du könntest aber bei jedem Durchlauf für jedes Bild den z-Index anheben und dazu seine Opacity zurückdrehen. Etwa so:

  
// Wird gebraucht, um den Z-Index hoch zu zaehlen  
var zIndexCounter = 0;  
function next()  
         {  
         var imgs = document.getElementById("slideshow").getElementsByTagName("img");  
         if (typeof(counter) != "number")  
            {  
            counter = 0;  
            }  
         counter++;  
         if (counter >= imgs.length)  
            {  
            counter=0;  
            }  
  
         // Das ist das nächste Bild, welches eingeblendet werden soll  
         var nextImage = imgs[counter];  
  
         // Erstmal auf durchsichtig stellen  
         nextImage.style.opacity = 0;  
         nextImage.style.filter = "alpha(opacity=0)";  
  
         // Zum obersten Bild machen  
         zIndexCounter++;  
         nextImage.style.zIndex = zIndexCounter;  
  
         // Jetzt können wir überblenden  
         fade();  
         };  
  

(Kann nicht garantieren, dass das so funktioniert ;) )

Wofür genau steht jetzt nochmal die 1000?

Ignorier das, hab mich in Deinem Code verguckt :)

Viele Grüße,
Jörg

[Franky]

Ja Krass...
das geht so alles wunderbar.
Nachmals echt ein ganz dickes Dankeschön für Deine hilfe und auch den Kommentarzeilen dazu.

Ist es normal dass der IE doppelt so lange braucht um die Bilder zu faden als Mozilla? Wenn ich es auf Mozilla anpasse, schläft man beim IE fast ein und wenn ich es auf den IE anpasse zappt Mozilla die im Schnelldruchlauf durch, dass man ganz wuschig wird...

Thanks Frank

[Felix Riesterer]

Lieber Franky,

Ist es normal dass der IE doppelt so lange braucht um die Bilder zu faden als Mozilla?

IE<8 mit der filter-Eigenschaft braucht deutlich länger, ja. Im 8er geht es mit der "echten" opacity-Eigenschaft wesentlich schneller - glaube ich mich zu erinnern.

Obwohl Dein Script jetzt "funzt", möchte ich Dir trotzdem den von mir bereits genannten Artikel anempfehlen.

Liebe Grüße,

Felix Riesterer.

[Franky]

Hi Felix,

das werde ich gerne mal tun.
Ich habe mal eben rein geschnuppert und es war auch für mich als Leien im ersten Eindruck verständlich geschrieben und veranschaulicht.
Mir ist aufgefallen, dass meine aktuelle Lösung beim 'faden' etwas ruckelt und das 'Faden' ansich auch unregelmäßig scheint...?

Vielleicht kann ich ja die Lösung mittels Deines Projektes lösen, wenn nicht, würde ich mich nochmal melden.

Vielen Dank auch für den Link bzw. den Hinweis ;)

Besten Gruß

Frank

Lieber Franky,

Ist es normal dass der IE doppelt so lange braucht um die Bilder zu faden als Mozilla?

IE<8 mit der filter-Eigenschaft braucht deutlich länger, ja. Im 8er geht es mit der "echten" opacity-Eigenschaft wesentlich schneller - glaube ich mich zu erinnern.

Obwohl Dein Script jetzt "funzt", möchte ich Dir trotzdem den von mir bereits genannten Artikel anempfehlen.

Liebe Grüße,

Felix Riesterer.

[Franky]

Hallo Felix,

ich habe mich mal mit Deinem Kompfort-Fader beschäftigt und hänge da schon gleich am Anfang.
Ich habe mir mal die original 'fader-framework.js' in den gleichnamigen Ordner kopiert und mir im Root eine test.php erstellt, in der ich den Quelltext Deines Showbeispiels kopiert habe. Das einzige was ich geändert habe ist der Pfad der einzelnen Bilder.
Stutzig wurde ich bei dem Bild in der test.php bzw. Deinem Quellcode.
Da schreibst Du:
[...
<p>Fader: <img src="images/biggrin.gif" alt="" id="fader" /></p>
...]
Was ist das? - Aber weder damit, noch mit einem anderen Bild funktioniert der Fader.

Wenn ich auf 'start' klicke passiert nichts :(

Hast Du da nochmal nen Tipp für mich?

Gruß

Franky

Lieber Franky,

Ist es normal dass der IE doppelt so lange braucht um die Bilder zu faden als Mozilla?

IE<8 mit der filter-Eigenschaft braucht deutlich länger, ja. Im 8er geht es mit der "echten" opacity-Eigenschaft wesentlich schneller - glaube ich mich zu erinnern.

Obwohl Dein Script jetzt "funzt", möchte ich Dir trotzdem den von mir bereits genannten Artikel anempfehlen.

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

Lieber Franky,

ich habe mich mal mit Deinem Kompfort-Fader beschäftigt

mit meinem was?? Achso, Du meinst die Komfort-Version meines Fader-Scripts. OK.

und hänge da schon gleich am Anfang.

Es steht in meinem Artikel ja auch geschrieben, dass man ihn von vorne nach hinten durcharbeiten kann. Es ist schließlich noch kein Meister vom Himmel gefallen, der immer gleich mit der letzten Aufgabe beginnen und sofortigen Erfolg haben kann.

Also schau Dir den Weg zu dieser Komfort-Version an. Dann solltest Du Dir selbst helfen können.

Stutzig wurde ich bei dem Bild in der test.php bzw. Deinem Quellcode.
<p>Fader: <img src="images/biggrin.gif" alt="" id="fader" /></p>

Ja? Was stört Dich an diesem Textabsatz?

Was ist das?

Ein Textabsatz mit etwas Text und einem Bildelement darin.

• Aber weder damit, noch mit einem anderen Bild funktioniert der Fader.

Funktioniert nicht funktioniert nicht.

Wenn ich auf 'start' klicke passiert nichts :(

Wenn Du mir die Fehlermeldung Deiner JS-Konsole nicht nennst, passiert auch nichts.

Hast Du da nochmal nen Tipp für mich?

Ja:
* Zitiere bitte sinnvoll und nur das, worauf Du Dich beziehst.
* Ignoriere keine wertvollen (Fehler-)Meldungen Deines Browsers.
* Gehe systematisch vor und vollziehe jeden Schritt einer Anleitung mit Bedacht.

Liebe Grüße,

Felix Riesterer.

[GiantClients]

Nur so eine Frage... Vielleicht liege ich ja auch falsch... Aber muss du hier nicht ein Parameter angeben?

  
if (counter < imgs.length)  
            {  
            fade('PARAMETER');  
            }  

Oder ist das in JS unnötig?

lg GiantClients

[Franky]

Nur so eine Frage... Vielleicht liege ich ja auch falsch... Aber muss du hier nicht ein Parameter angeben?

if (counter < imgs.length)
            {
            fade('PARAMETER');
            }

  
Da fragst Du genau den richtigen - In Sachen Javascript habe ich ehrlichgesagt NULL-Ahnung :-)

[Micha]

Hallo GiantClients,

Oder ist das in JS unnötig?

Es wird durch die Funktion selbst abgefangen: step = step || 0;. Wird demnach kein Wert für step übergebenen, so wird dieser auf 0 (Null) gesetzt.

Mit freundlichem Gruß
Micha

[Felix Riesterer]

Lieber Franky,

Ich werd Javascript nie schnallen - dabei bin ich doch garnicht so dumm.

ungünstige Einstellung. Daraus könnte ja eine sich selbst erfüllende Prophezeiung werden... vermeide das!

ich habe mir bisher in diesem Forum folgenden Code ausgetüfteltt:

Warum aus dem Forum? Nimm doch gleich den daraus entstandenen Artikel! Dort bekommst Du alles fein säuberlich erklärt und Schritt für Schritt aufgebaut!

Fader-Framework - Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts

Liebe Grüße,

Felix Riesterer.