Validator kann Website nicht validieren + kleinere Fargen

[Taschmahal]

Guten Tag.

Ich arbeite noch immer an meiner Website (an dieser Stelle nochmals großes Dankeschön an Ingo, der mir sehr geholfen hat ).

Es gibt noch ein paar Kleinigkeiten, die noch auf meiner ToDo stehen, und zwar:
1. Die Bilder in der Galerie sollen von oben und unten gesehen auch in der Mitte sein. Das habe ich bis jetzt irgendwie nicht hinbekommen.
2. Wenn man zum letzten Bild gekommen ist, und dann auf weiter klickt, soll man einfach wieder zum ersten Bild kommen.
3. Der Validator kann meine Website nicht validieren. Es kommt folgender Fehler:

Sorry, I am unable to validate this document because on line 146 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

The error was: utf8 "\xE4" does not map to Unicode

http://validator.w3.org/check?uri=http%3A%2F%2Fk10243-01.s02.xyon-hosting.de%2Ftaschmahal%2Ftaschmahal%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.591

In genannter Zeile steht folgendes:

Code: Alles auswählen

<a href="http://k10243-01.s02.xyon-hosting.de/taschmahal/taschmahal/page/2"><img alt="Nchste Beitrge" src="http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png" border="0" width="32" height="32"/></a>

Auch bei der Galerie kommt beim Validator der gleiche Fehler, nun in Zeile 130:

Code: Alles auswählen

<img alt="Zurck" src="http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png"

http://k10243-01.s02.xyon-hosting.de/taschmahal/taschmahal/

Nun weiß ich nicht, warum der Validator den UTF-Code nicht lesen kann. Hat jemand eine Idee?

[Ingo]

Hi.

Zu Punkt 3 der Liste: Du hast zwar als "charset" UTF-8 angegeben, aber das Dokument selbst ist
nicht als utf-8 gespeichert, es sieht mehr nach ISO-8859-1 aus: Das ä in "Nächste Beiträge" steht
im Dok als Byte \xE4 (ISO), sollte in utf-8 aber \xC3 A4 sein. Darüber stolpert der Validator.
Wahrscheinlich hat dein Editor das Dokument nicht als utf-8 abgespeichert. Einfach mal in den
Einstellungen oder Menüs gucken, wo man das einstellen kann.

Gruß, Ingo

Edit 1: zu Punkt 2 (Galerie-Buttons): Versuch mal folgende Ergänzung der galerie.js. Die else-Zweige
sind neu; das ließe sich noch vereinfachen, aber besser erstmal testen:

Code: Alles auswählen

// vorheriges Bild (gross) aus Bilderliste anzeigen
function zurueck_gross ()
{
        // nur noetig, wenn nicht schon das erste Bild angezeigt wird
        if (index_grosses_bild > 0)
        {
                // zum vorherigen Bild
                index_grosses_bild--;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf letztes Bild setzen
                index_grosses_bild = anzahl_bilder - 1;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();               
        }
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross ()
{
        // nur wenn nicht schon beim letzten Bild angekommen
        if (index_grosses_bild + 1 < anzahl_bilder)
        {
                // zum naechsten Bild
                index_grosses_bild++;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf erstes Bild setzen
                index_grosses_bild = 0;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();       
        }
}


Edit 2: Zu Punkt 1 (vertikales Zentrieren): Allein mit CSS wird das nicht einfach; da du ohnehin für die Galerie
JS nutzt, kannst du das Galerie-Skript auch um eine Funktion erweitern, die das Zentrieren übernimmt:

Code: Alles auswählen

  function zentriere_bild_vertikal()
  {
     var bild = document.getElementById('gross');
     var container = document.getElementById('grosscontainer');
     
     var neuer_margin = (container.offsetHeight - bild.offsetHeight)/2;

     if(neuer_margin > 0)
     {
       bild.style.marginTop = neuer_margin + 'px';
     }
  }


Diese Funktion einfach in die galerie.js schreiben und dann in die Funktion grosses_bild_auffrischen() als
letzte Zeile den Aufruf zentriere_bild_vertikal(); schreiben. - Bin gespannt.

[Lareth]

Fürs Zentrieren hilft dir Vielleicht das hier:

http://www.jakpsatweb.cz/css/css-vertic ... ution.html

habe das, bzw sowas ähnliches auch schonmal gemacht. Sollte funktionieren. Dann kannst du unnötiges Javascript auch weglassen. Ist ja immer schöner ohne

[Taschmahal]

Hi.

Zu Punkt 3 der Liste: Du hast zwar als "charset" UTF-8 angegeben, aber das Dokument selbst ist
nicht als utf-8 gespeichert, es sieht mehr nach ISO-8859-1 aus: Das ä in "Nächste Beiträge" steht
im Dok als Byte \xE4 (ISO), sollte in utf-8 aber \xC3 A4 sein. Darüber stolpert der Validator.
Wahrscheinlich hat dein Editor das Dokument nicht als utf-8 abgespeichert. Einfach mal in den
Einstellungen oder Menüs gucken, wo man das einstellen kann.

Gruß, Ingo

Hi Ingo! Ich war jetzt im Urlaub, deswegen konnte ich hier nicht Antworten.
Ok also ich habe jetzt alle öäü durch den utf-8 code ersetzt. Es funktioniert einwandfrei, der Valdidator kann alles wieder validieren.

Edit 1: zu Punkt 2 (Galerie-Buttons): Versuch mal folgende Ergänzung der galerie.js. Die else-Zweige
sind neu; das ließe sich noch vereinfachen, aber besser erstmal testen:

Code: Alles auswählen

// vorheriges Bild (gross) aus Bilderliste anzeigen
function zurueck_gross ()
{
        // nur noetig, wenn nicht schon das erste Bild angezeigt wird
        if (index_grosses_bild > 0)
        {
                // zum vorherigen Bild
                index_grosses_bild--;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf letztes Bild setzen
                index_grosses_bild = anzahl_bilder - 1;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();               
        }
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross ()
{
        // nur wenn nicht schon beim letzten Bild angekommen
        if (index_grosses_bild + 1 < anzahl_bilder)
        {
                // zum naechsten Bild
                index_grosses_bild++;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf erstes Bild setzen
                index_grosses_bild = 0;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();       
        }
}


Funktioniert! Danke!

Edit 2: Zu Punkt 1 (vertikales Zentrieren): Allein mit CSS wird das nicht einfach; da du ohnehin für die Galerie
JS nutzt, kannst du das Galerie-Skript auch um eine Funktion erweitern, die das Zentrieren übernimmt:

Code: Alles auswählen

  function zentriere_bild_vertikal()
  {
     var bild = document.getElementById('gross');
     var container = document.getElementById('grosscontainer');
     
     var neuer_margin = (container.offsetHeight - bild.offsetHeight)/2;

     if(neuer_margin > 0)
     {
       bild.style.marginTop = neuer_margin + 'px';
     }
  }


Diese Funktion einfach in die galerie.js schreiben und dann in die Funktion grosses_bild_auffrischen() als
letzte Zeile den Aufruf zentriere_bild_vertikal(); schreiben. - Bin gespannt.

Das geht irgenwie nicht. Es hat gar keinen Effekt.
Aber sonst geht alles! Danke!

[Ingo]

Tja, wenn ich mal was ungetestet 'rausgebe ... Gar keinen Effekt kann ich nicht bestätigen, aber die
Routine tut noch nicht das, was sie soll. Das Problem entsteht wohl, wenn zu Beginn die Bilder noch nicht
alle im Browsercache sind. Versuchen wir folgende Änderungen (im FF2 wird das erste Bild beim ersten
Aufruf nicht zentriert, danach sollte es klappen):

Code: Alles auswählen

Funktion addPhoto() ergänzt um simplen Preloader:

  function addPhoto (bild, alt, beschreibung)
  {
    ...       
     
    var dummy = new Image();  // preload
    dummy.src = bild;
  }

Funktion zentriere_bild_vertikal() geändert:   

  function zentriere_bild_vertikal()
  {
    var bild = document.getElementById('gross');
    var bildHoehe = bild.height ? bild.height : 500;   // vorgabe 500
 
    var containerHoehe = parseInt(document.getElementById('grosscontainer').style.height);
    if(!containerHoehe) containerHoehe = 550;          // vorgabe 550

    var neuer_margin = (containerHoehe - bildHoehe)/2;

    if(neuer_margin > 0)
    {
      bild.style.marginTop = neuer_margin + 'px';
    }
  }


Bei einer Überarbeitung der Seite wäre eine Methode wie die von Lareth erwähnte einen Versuch wert. -
Noch'was: Der letzte Teil von grosses_bild_auffrischen() ab "// Navigationslinks ..." erzeugt Fehlermeldungen.
Weil dieser Teil derzeit eh nicht genutzt wird, kann man ihn auch auskommentieren.
Und: Im HTML steht beim Zurück-Link die Anweisung href="javascript:zurueck_gross();" noch mit "ü" in utf-8.
Es muss aber "zurueck_gross()" mit "ue" heißen, sonst funktioniert der Button nicht.

Gruß, Ingo

[Taschmahal]

Danke nun läuft alles! Die Bilder sind in der Mitte, und das mit dem zurück geht jetzt auch. Danke!

Ich muss jetzt noch die Inhalte einfügen, und dann werde ich wohl bald meine Website im Showroom zeigen, damit jeder noch Kritik anbringen kann.

PS: Ich habe jetzt auch alle Teile XHTML1 Valid gemacht.

Danke!

[Taschmahal]

Jetzt gibt es wieder ein Problem. Ich habe frei neue Gallerien hinzugefügt. Nun ist es so, dass wenn ich eine Gallerie aufrufe, dass die Bilder nicht an ihren gewünschten Positionen sind. wenn ich ein Bild weiter und dann wieder auf das Bild zurück gehe, ist es an der richtigen Position.

Woran könnte das liegen?

http://k10243-01.s02.xyon-hosting.de/taschmahal/taschmahal/misc

[Ingo]

Hi.

Hm, möglicherweise irre ich mich, aber es sieht so aus, als sei das "alte" galerie.js aktiv, also
die Version ohne die letzten Änderungen (insbesondere den dummy-Preload). So jedenfalls sagt
es mein Firebug.

Gruß, Ingo

[Taschmahal]

Hi. Also ich hab jetzt deinen Code nochmal eingefügt. Hatte wirklich vergessen die neuere Version von der galerie.js hochzuladen. Gehen tut es aber immer noch nicht irgendwie...

Der neue Code sieht wie folgt aus:

Code: Alles auswählen

// Datenstruktur, in der die einzelnen Bilddaten gespeichert werden,
// in Form eines assoziativen Arrays anlegen
var Photos = new Array();

// Photo zur Galerie hinzufuegen
// thumbnail - URL zum Thumbnail
// bild - URL zum Detailbild
// alt - Beschreibung die angezeigt werden soll, wenn man mit der Maus ueber das Bild faehrt
// beschreibung - Beschreibung des Bildes, welches als Beschriftung unter dem Detailbild angezeigt werden soll
function addPhoto (bild, alt, beschreibung)
{
        Photos[Photos.length] = new Object();
        // URL des Bildes
        Photos[Photos.length - 1]["datei_gross"] = bild;
        // Text der angezeigt werden soll, wenn das Bild unter der angegebenen URL nicht gefunden wurde
        Photos[Photos.length - 1]["alt"] = alt;
        // Kurze Bildbeschreibung zum jeweiligen Bild
        Photos[Photos.length - 1]["beschreibung"] = beschreibung;
}

// Zaehlt Bilder mit IDs, die mit 'thumbnail' beginnen und einer ganzen Zahl
// enden und liefert die Anzahl als Rueckgabewert.
// Diese ID muessen die Image-Tags haben, die als Thumbnails verwendet werden.


// Index des aus den Thumbnails ausgewaehlten grossen Bildes setzen und Anzeige des grossen Bildes auffrischen
function grosses_bild_anzeigen (i)
{
        // neuer Index des grossen Bildes
        index_grosses_bild = index_erstes_bild + i - 1;
        // Anzeige des grossen Bildes auffrischen
        grosses_bild_auffrischen ();
}

function zentriere_bild_vertikal()
{
  var bild = document.getElementById('gross');
  var container = document.getElementById('grosscontainer');

  var neuer_margin = (container.offsetHeight - bild.offsetHeight)/2;

  if(neuer_margin > 0)
  {
    bild.style.marginTop = neuer_margin + 'px';
  }
}

// grosses Bild und zugehoerige Beschriftung im IMG mit der ID 'gross' anzeigen (nach index_grosses_bild)
function grosses_bild_auffrischen ()
{
        // URL des Bildes setzen
        document.getElementById ('gross').src = Photos[index_grosses_bild]["datei_gross"];
        // Alt-Text des Bildes setzen
        document.getElementById ('gross').alt = Photos[index_grosses_bild]["alt"];
        // Title-Text des Bildes setzen
        document.getElementById ('gross').title = Photos[index_grosses_bild]["alt"];

        /*// Falls das P-Tag mit der ID 'beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
        // damit die Beschriftungsdaten darin gespeichert werden koennen
        if (!document.getElementById ('beschriftung').firstChild)
                document.getElementById ('beschriftung').appendChild (document.createTextNode (""));

        // Variablen in Beschriftungsstring ersetzen
        tstr = bild_beschriftung.replace (/%index_gross%/i, (index_grosses_bild + 1));
        tstr = tstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
        tstr = tstr.replace (/%beschreibung%/i, Photos[index_grosses_bild]["beschreibung"]);
        // Beschriftung des Bildes im zugehoerigen P-Tag setzen
        document.getElementById ('beschriftung').firstChild.data = tstr;*/

        // Bild vertikal zentrieren
        zentriere_bild_vertikal();

        // Navigationslinks fuer grosse Bilder anzeigen
        if (index_grosses_bild > 0)
                document.getElementById ('zurueck_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";
        else
                document.getElementById ('zurueck_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";

        if (anzahl_bilder > index_grosses_bild + 1)
                document.getElementById ('weiter_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";
        else
                document.getElementById ('weiter_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";
}

// vorheriges Bild (gross) aus Bilderliste anzeigen
function zurueck_gross ()
{
        // nur noetig, wenn nicht schon das erste Bild angezeigt wird
        if (index_grosses_bild > 0)
        {
                // zum vorherigen Bild
                index_grosses_bild--;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf letztes Bild setzen
                index_grosses_bild = anzahl_bilder - 1;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();               
        }
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross ()
{
        // nur wenn nicht schon beim letzten Bild angekommen
        if (index_grosses_bild + 1 < anzahl_bilder)
        {
                // zum naechsten Bild
                index_grosses_bild++;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf erstes Bild setzen
                index_grosses_bild = 0;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();       
        }
}

[Ingo]

Hi.

Das ist immer noch der alte Code. Hier die Version, wie ich sie im Sinn habe und du sie zwischendurch
eingebaut hattest:

Code: Alles auswählen

// Datenstruktur, in der die einzelnen Bilddaten gespeichert werden,
// in Form eines assoziativen Arrays anlegen
var Photos = new Array();

// Photo zur Galerie hinzufuegen
// thumbnail - URL zum Thumbnail
// bild - URL zum Detailbild
// alt - Beschreibung die angezeigt werden soll, wenn man mit der Maus ueber das Bild faehrt
// beschreibung - Beschreibung des Bildes, welches als Beschriftung unter dem Detailbild angezeigt werden soll
function addPhoto (bild, alt, beschreibung)
{
        Photos[Photos.length] = new Object();
        // URL des Bildes
        Photos[Photos.length - 1]["datei_gross"] = bild;
        // Text der angezeigt werden soll, wenn das Bild unter der angegebenen URL nicht gefunden wurde
        Photos[Photos.length - 1]["alt"] = alt;
        // Kurze Bildbeschreibung zum jeweiligen Bild
        Photos[Photos.length - 1]["beschreibung"] = beschreibung;

    // +++ Ergänzung +++++++++++++++++++++++++++++++++++++++++++++++++
    var dummy = new Image();  // preload
    dummy.src = bild;

}

// Zaehlt Bilder mit IDs, die mit 'thumbnail' beginnen und einer ganzen Zahl
// enden und liefert die Anzahl als Rueckgabewert.
// Diese ID muessen die Image-Tags haben, die als Thumbnails verwendet werden.


// Index des aus den Thumbnails ausgewaehlten grossen Bildes setzen und Anzeige des grossen Bildes auffrischen
function grosses_bild_anzeigen (i)
{
        // neuer Index des grossen Bildes
        index_grosses_bild = index_erstes_bild + i - 1;
        // Anzeige des grossen Bildes auffrischen
        grosses_bild_auffrischen ();
}


// +++ geändert ++++++++++++++++++++++++++++++++++++++++++++++++++++
function zentriere_bild_vertikal()
{
  var bild = document.getElementById('gross');
  var bildHoehe = bild.height ? bild.height : 500;   // vorgabe 500
 
  var containerHoehe = parseInt(document.getElementById('grosscontainer').style.height);
  if(!containerHoehe) containerHoehe = 550;          // vorgabe 550

  var neuer_margin = (containerHoehe - bildHoehe)/2;

  if(neuer_margin > 0)
  {
    bild.style.marginTop = neuer_margin + 'px';
  }
}


// grosses Bild und zugehoerige Beschriftung im IMG mit der ID 'gross' anzeigen (nach index_grosses_bild)
function grosses_bild_auffrischen ()
{
        // URL des Bildes setzen
        document.getElementById ('gross').src = Photos[index_grosses_bild]["datei_gross"];
        // Alt-Text des Bildes setzen
        document.getElementById ('gross').alt = Photos[index_grosses_bild]["alt"];
        // Title-Text des Bildes setzen
        document.getElementById ('gross').title = Photos[index_grosses_bild]["alt"];

        /*// Falls das P-Tag mit der ID 'beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
        // damit die Beschriftungsdaten darin gespeichert werden koennen
        if (!document.getElementById ('beschriftung').firstChild)
                document.getElementById ('beschriftung').appendChild (document.createTextNode (""));

        // Variablen in Beschriftungsstring ersetzen
        tstr = bild_beschriftung.replace (/%index_gross%/i, (index_grosses_bild + 1));
        tstr = tstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
        tstr = tstr.replace (/%beschreibung%/i, Photos[index_grosses_bild]["beschreibung"]);
        // Beschriftung des Bildes im zugehoerigen P-Tag setzen
        document.getElementById ('beschriftung').firstChild.data = tstr;*/

        // Bild vertikal zentrieren
        zentriere_bild_vertikal();

        // Navigationslinks fuer grosse Bilder anzeigen
        if (index_grosses_bild > 0)
                document.getElementById ('zurueck_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";
        else
                document.getElementById ('zurueck_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";

        if (anzahl_bilder > index_grosses_bild + 1)
                document.getElementById ('weiter_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";
        else
                document.getElementById ('weiter_gross').src = pfad_zu_navbildern + "http://k10243-01.s02.xyon-hosting.de/taschmahal/red.png";
}

// vorheriges Bild (gross) aus Bilderliste anzeigen
function zurueck_gross ()
{
        // nur noetig, wenn nicht schon das erste Bild angezeigt wird
        if (index_grosses_bild > 0)
        {
                // zum vorherigen Bild
                index_grosses_bild--;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf letztes Bild setzen
                index_grosses_bild = anzahl_bilder - 1;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();               
        }
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross ()
{
        // nur wenn nicht schon beim letzten Bild angekommen
        if (index_grosses_bild + 1 < anzahl_bilder)
        {
                // zum naechsten Bild
                index_grosses_bild++;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();
        }
        else
        {
                // Index auf erstes Bild setzen
                index_grosses_bild = 0;
                // grosses Bild aktualisieren
                grosses_bild_auffrischen ();       
        }
}


Gruß, Ingo

[Taschmahal]

Ok, dann hat mein Kumpel wohl die ältere Version wieder hochgeladen.
Ist jetzt endlich die richtige galerie.js oben? Falls ja, gibt es manchmal immer noch diese Verschiebungen, jetzt aber seltener und nicht mehr so schlimm. Irgendwie unlogisch, aber ist so

[Ingo]

Jap, jetzt ist es angekommen. Die Probleme tauchen immer dann auf, wenn eine Datei erst noch geladen
werden muss. Dann kennt das Skript nämlich die Höhe der Datei nicht und nimmt 500px an (kann man
im Skript ändern, Stelle hab ich markiert). Für die allerersten Dateien reicht das Preloading also nicht.
Entweder man überarbeitet das Skript dahingehend nochmal, oder man versucht eine CSS-Lösung wie
von Lareth oben angesprochen gehen, dazu muss der HTML-Teil aber wohl leicht verändert werden.

Gruß, Ingo

[Taschmahal]

Nunja da du denke ich mal keine Lust hast, das ganze Script zu überarbeiten und ich das nicht kann, müssen wir das wohl anders lösen.

Kann man es nicht so machen, dass man die Höhe der Datei angibt? Also dass das Script weiß, dass das nächste Bild 200px hoch ist und das übernächste 300?

Oder man lädt alle Dateien schon im Header. Das würde aber warscheinlich zu lange dauern...

[Taschmahal]

Jap, jetzt ist es angekommen. Die Probleme tauchen immer dann auf, wenn eine Datei erst noch geladen
werden muss. Dann kennt das Skript nämlich die Höhe der Datei nicht und nimmt 500px an (kann man
im Skript ändern, Stelle hab ich markiert). Für die allerersten Dateien reicht das Preloading also nicht.
Entweder man überarbeitet das Skript dahingehend nochmal, oder man versucht eine CSS-Lösung wie
von Lareth oben angesprochen gehen, dazu muss der HTML-Teil aber wohl leicht verändert werden.

Gruß, Ingo

Bisher habe ich noch keine Lösung gefunden. Den HTML-Teil kann ich nicht verändern, da die seite aus PHP dateien besteht. Könnte ich nicht in das Script irgendwie eine Funktion einbauen, die erst alle Fotos in den Cache lädt? Also das wenn man galerie 1 wählt, alle bilder von dieser geladen werden.
Oder welchen Weg würdest du wählen?

[Ingo]

Hm, schade, dass man an den HTML-Code nicht herankommt. Ein "normales" Preloading"
verhindert auch nicht sicher, dass das erste Bild falsch positioniert wird, es sei denn man
baut eine Wartezeit ein bzw. nutzt AJAX.
Naja, der Vorschlag, die Bildhöhe mitanzugeben, klingt machbar. Allerdings muss man dann
zu jedem Bild die Höhe auch wirklich angeben, was natürlich lästig ist. Ich überlege mir mal,
wie das aussehen kann. - Bis später .

Edit: So. Hab das Galerie-Skript schnell angepasst, siehe Anhang. Änderungen:
Im HTML-Teil:
1) addPhoto hat 2 neue Parameter "breite" und "hoehe"
2) nach addPhoto wird (unbedingt) grosses_bild_auffrischen() gerufen (vor zentriere_bild_vertikal())

Im Skript:
1) zentriere_bild_vertikal() völlig geändert
2) addPhoto() um 2 Parameter ergänzt ("breite" und "hoehe")

Bin gespannt