Fading-Effekt für mehr als 2 Bilder: wie?

[juewi]

Hallo!

Ich habe auf meiner Homepageein JS eingebaut, welches mir 2 Bilder im Fading-Effekt endlos abspielt. So weit so gut.

Allerdings:
Dieses JS ist explizit für nur 2 Bilder ausgerichtet - ich hab zwar schon VERSUCHT, es auf mehrere umzuschreiben aber Erfolg leider null.

könnt Ihr euch mal den Code ansehen und mir sagen, was umgeschrieben gehört damit ich eine unbegrenzte Anzahl an Bildern damit verwalten kann????

Ich habe leider nur Programmierungskenntnisse rudimentär in HTML und Schulwissen darüber von vor 20 Jahren ...

DANKE!

Jürgen

[Felix Riesterer]

Lieber Jürgen,

Ich habe leider nur Programmierungskenntnisse rudimentär in HTML und Schulwissen darüber von vor 20 Jahren ...

das wäre doch DIE Gelgenheit, JavaScript dazuzulernen! Wenn Du willst, dann fange ich hier gleich damit an, Deinen Code zu analysieren, damit wir daraus etwas Neues bauen können. OK?

Ich poste einmal den JavaScript-Code von Deiner Seite:

  <script language="JavaScript">  
<!-- Begin

/************************************************************************  
Script made by Martial Boissonneault © 2001 http://getElementById.com/  
This script may be used and changed freely as long as this msg is intact  
Visit http://getElementById.com/ for more free scripts and tutorials.  
*************************************************************************/  
var ie5=(document.getElementById && document.all);  
var ns6=(document.getElementById && !document.all);  
nPlus = 5 //the % of fading for each step  
speed = 150 //the speed  
// You don't have to edit below this line  
nOpac = 100  
function FadeImg(){  
if(document.getElementById){  
document.getElementById('img1').style.visibility="visible";  
imgs = document.getElementById('img2');  
opacity = nOpac+nPlus;  
nOpac = opacity;  
setTimeout('FadeImg()',speed);  
if(opacity>100 || opacity<0){  
nPlus=-nPlus;  
}  
if(ie5){  
imgs.style.filter="alpha(opacity=0)";  
imgs.filters.alpha.opacity = opacity;  
}  
if(ns6){  
imgs.style.MozOpacity = 0;  
imgs.style.MozOpacity = opacity/100;  
}  
}  
}  
onload=FadeImg;  
// End -->

</script>

Dieser JavaScript-Code sollte zuallererst in eine externe Textdatei (mit der Endung ".js") gespeichert werden, um ihn von dort aus einzubinden. Fangen wir also an. Neue Textdatei mit dem Dateinamen "image-fader.js" erstellt und alles zwischen dem "<!-- Beginn" und "// Ende -->" (die beiden aber nicht selbst auch!) in diese JavaScript-Datei kopiert und abgespeichert!

So, diese JavaScript-Datei sollte nun Deinem Projekt hinzugefügt werden. Das bedeutet, dass Du sie irgendwo auf dem Server ablegen solltest. In meinem Falle speichere ich alles, was mit JavaScript zu tun hat in einem extra JavaScript-Ordner, den ich sinnigerweise "js" nenne. Ich empfehle Dir, dasselbe zu tun.

Du hast jetzt Deine neue JavaScript-Datei in diesem Ordner und kannst sie in Deinem HTML-Dokument nun so einbinden:
<script type="text/javascript" src=js/iamge-fader.js"></script>
Eventuell musst Du den Pfad anpassen, falls Deine HTML-Datei nicht im selben Verzeichnis liegt, wie der "js"-Ordner.

Wie wir Dein Script umschreiben, verrate ich im nächsten Posting, wenn Du das willst.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Oops, da fehlte doch ein Anführungszeichen - und der Dateiname war auch Mist:

<script type="text/javascript" src=js/iamge-fader.js"></script>

Der korrekte Code sollte so lauten:
<script type="text/javascript" src="js/image-fader.js"></script>

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[juewi]

Ähhhhh, noch was ....

eine Zufallsfunktion einzubauen - ginge das? ...

Ich beuge mich in Demut und Scham wenn sowas hinhaut!

LG, Jürgen

[minicrispie]

Hallo,

eine Zufallsfunktion einzubauen - ginge das? ...

Ich beuge mich in Demut und Scham wenn sowas hinhaut!

var Zufallszahl = Math.round(Math.random())

MfG. Christoph

[Kai345]

[latex]Mae  govannen![/latex]

var Zufallszahl = Math.round(Math.random())

Schlecht

Cü,

Kai

[minicrispie]

Hallo,

Schlecht

ok, dann eben so:
var Zufallszahl = Math.round(Math.random() * (max - min)) + min;

MfG. Christoph

[Felix Riesterer]

Lieber minicrispie,

Schlecht

ok, dann eben so:
var Zufallszahl = Math.round(Math.random() * (max - min)) + min;

nein, denn Du verwendest noch immer round()...

var Zufallszahl = Math.floor(Math.random() * (max - min)) + min;

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[minicrispie]

Hallo,

nein, denn Du verwendest noch immer round()...

Das ist doch egal: math.round() rundet nach den rundungsregeln und math.floor rundet eben speziell ... was ist da der unterschied ?
Ich glaube nicht sehr viel.

MfG. Christoph

[Felix Riesterer]

Lieber minicrispie,

Das ist doch egal: math.round() rundet nach den rundungsregeln und math.floor rundet eben speziell ... was ist da der unterschied ?
Ich glaube nicht sehr viel.

glauben heißt nicht wissen. Du hast den Hinweis vorhin nicht gelesen, oder?

Schlecht

Lies erneut!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[minicrispie]

Hallo,
Schlecht

Lies erneut!

Hab ich. ich weiß genauso viel wie vorher: Math.floor() is abrunden und Math.round() rundet auf oder ab... anscheinend will man nicht aufrunden...

MfG. Christoph

[Struppi]

Hab ich. ich weiß genauso viel wie vorher: Math.floor() is abrunden und Math.round() rundet auf oder ab... anscheinend will man nicht aufrunden...

Irgendwie ist deine Lesetechnik nicht ausreichend.
Dir ist noch nicht aufgefallen, dass die Wahrscheinlichkeit bei Math.round() nicht gleichmäßig verteilt ist?

Struppi.

[minicrispie]

Hallo,

ja. ich dachte das math.round() nach den mathematischen rundungregeln arbeitet:
bei 5 und drüber aufrunden und unter 5 abrunden
(so dachte ich, nur wenn das nicht so ist ...)

MfG. Christoph

[Struppi]

ja. ich dachte das math.round() nach den mathematischen rundungregeln arbeitet:
bei 5 und drüber aufrunden und unter 5 abrunden
(so dachte ich, nur wenn das nicht so ist ...)

Ich glaub du hast den Artikel immer noch nicht gelesen. Dann lassen wir das einfach.

Struppi.

[minicrispie]

Hallo,

sondern benachteiligt die erste und letzte Zahl...

meinst du etwa DAS ?

MfG. Christoph

[Felix Riesterer]

Lieber Jürgen,

eine Zufallsfunktion einzubauen - ginge das? ...

das lässt sich alles implementieren. Sollen wir loslegen? Ich nehme das einmal an. Also los!

Du hast doch eine externe Datei angelegt, die Du in Deinem HTML-Dokument einbindest, richtig? Ganz analog dazu bauen wir uns jetzt eine zweite Datei, in der wir die unglaublich überlegenere Version Deines Scripts entwickeln werden. Schöne Werbesprache, oder?

Unsere Datei nennen wir hochtrabend "fader-framework.js" und legen sie dort ab, wo auch die andere JavaScript-Datei (nannten wir sie nicht "image-fader.js"?) abgelegt war.

In diese neue JavaScript-Datei notieren wir folgenden Code:

var FaderFramework = {  
  
    images: new Array(), // hier stehen später viele Bilder-URLs  
  
    init: function () {  
        alert("Hallo Welt!");  
    },  
  
    onload: function () {  
        alert("Script geladen!");  
        this.init();  
    }  
}  
  
window.onload = FaderFramework.onload;

So. Nun kannst Du getrost die alte Datei aus Deinem HTML-Dokument durch die neue Datei ersetzen - also anstatt "image-fader.js" notierst Du "fader-framework.js", klar? Und dann natürlich die Seite neu laden und beobachten, was passiert.

Und natürlich hier melden, ob das alles irgendetwas bewirkt hat!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[juewi]

Du hast doch eine externe Datei angelegt, die Du in Deinem HTML-Dokument einbindest, richtig?

Nein, aus bestimmten Gründen kann ich auf DIESE Anbieter-Seite nur HTML-Seiten raufladen - wenn geht würde ich also lieber direkt wie gehabt im HTML-Code das Script unterbringen. Auch wenns nicht so schön oder unübersichtlich ist ;-)

»» In diese neue JavaScript-Datei notieren wir folgenden Code:

var FaderFramework = {

images: new Array(), // hier stehen später viele Bilder-URLs

init: function () {
        alert("Hallo Welt!");
    },

onload: function () {
        alert("Script geladen!");
        this.init();
    }
}

window.onload = FaderFramework.onload;

  
wie würde das aussehen, wenns direkt in den HTML-Code reinkommt und wohin?  
  
Danke, Jürgen

[Felix Riesterer]

Lieber juewi,

Nein, aus bestimmten Gründen kann ich auf DIESE Anbieter-Seite nur HTML-Seiten raufladen

was ist denn das für ein Hoster??? Und was erzählst Du da? Immerhin kann man anscheinend auch Bilder hochladen, also muss es auch möglich sein, JavaScript-Dateien hochzuladen. Sollte das aus irgendeinem Grund bei bezahltem Webspace nicht möglich sein, dann schau Dich schleunigst nach einem anderen Hoster um!! Oder benutzt Du kein FTP?

wenn geht würde ich also lieber direkt wie gehabt im HTML-Code das Script unterbringen. Auch wenns nicht so schön oder unübersichtlich ist ;-)

Nein, das ist nicht sinnvoll! Du möchtest dieses Fading doch auch auf Unterseiten zur Verfügung haben. Daher muss es als externe Datei vorliegen, da Du sonst den Code ständig erneut laden lassen musst. Nicht gut!

Und was kümmert uns momentan die Website? Du arbeitest mit einer lokalen Kopie! Und die kannst Du gestalten wie Du willst. Wenn es dann ans Hochladen geht, dann reden wir wieder darüber. Aber jetzt möchtest Du doch JavaScript lernen, oder nicht?

Also: Hat mein Code-Beispiel bei Dir lokal geklappt?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Nachtrag

inzwischen habe ich das Teil fertig geschrieben. Es kann so einiges:

* mehrere Fader auf einer Seite
* jeder Fader individuell einstellbar mit
  - Überblendgeschwindigkeit
  - beliebig viele verschiedener Bilder
  - Reihenfolge nach Liste oder zufällig
  - per JavaScript anhaltbar und wieder startbar
* bindet seine eigene CSS Datei ins Dokument ein

Bei Interesse führe ich unsere Programmierstudien gerne fort. Am Ende käme dann dieses Teil heraus und Du hättest eine irre Menge an Programmiertätigkeiten in JavaScript gelernt...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[bosselmann]

Da würde ich mich gern einklinken, klingt interessant und löst wahrscheinlich genau mein Problem. Danke schonmal im Vorraus.

Dominik

[Felix Riesterer]

Liebe(r) bosselmann,

Da würde ich mich gern einklinken

na, dann los!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[juewi]

Felix Riesterer.

das wäre doch DIE Gelgenheit, JavaScript dazuzulernen! Wenn Du willst, dann fange ich hier gleich damit an, Deinen Code zu analysieren, damit wir daraus etwas Neues bauen können. OK?

Gern!

Dieser JavaScript-Code sollte zuallererst in eine externe Textdatei (mit der Endung ".js") gespeichert werden, um ihn von dort aus einzubinden.

Ok, vorerst würde ich trotzdem lieber den JS-Code auf der HTML-Seite stehen lassen da ich es (auf die Schnelle nicht schaffe) eine Text-Datei bzw. eine Nicht-HTML-Datei hochzuladen - wird hoffentlich vorerst kein Problem darstellen ;-)

Wie wir Dein Script umschreiben, verrate ich im nächsten Posting, wenn Du das willst.

Und wie! Bin schon sehr gespannt, wie der Weg dorthin aussieht und ob ich ihn überhaupt schnalle ...

Danke!

[Felix Riesterer]

Lieber Jürgen,

Gern!

Prima. Wenn Du genügend Geduld hast, dann kriegen wird das hier zusammen hin. Und was Deine Website angeht - die kann warten. Wir machen das alles ersteinmal lokal. OK?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[bleicher]

Grüße,
randbemerkung - die "erotik-abteilung" deiner seite fand ich um einiges schneller als "fading". kann es sein dass dies fading gar überflüssig ist?
zumal es in opera scheinbar nicht funktioniert (wozu soll ein fading effekt den man nur im quelltext sieht gut sein?).
MFG
bleicher

[juewi]

Grüße,
randbemerkung - die "erotik-abteilung" deiner seite fand ich um einiges schneller als "fading". kann es sein dass dies fading gar überflüssig ist?
zumal es in opera scheinbar nicht funktioniert (wozu soll ein fading effekt den man nur im quelltext sieht gut sein?).
MFG
bleicher

??? versteh Dich nicht.
Die Galerie ist auch Flash und über JAlbum erstellt, nicht JS.
Wieso nur im Quelltext? - auf der genannten ...fade.html ist der Fade-Effekt doch nicht zu übersehen ;-)

LG, Jürgen