jürgen: Foto-Galerie in FF o.k., in IE nicht

Hallo ihr!

Ihr habt mir mit diesem schönen http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm#quelltext@title=SelfHTML-Beispiel zu meiner Beta-Version auf meiner Homepage verholfen! Dazu mal danke!

Das Beispiel ist allerdings mit immer gleich großen Grafiken aufgebaut und da liegt mein Problem:
im FF werden meine verschieden-formatigen Fotos ohne weiteres angezeigt, in IE verzerrt er alle Fotos nach dem Abmessungen des ERSTEN gezeigten Fotos

guckst Du hier: meine Testseite

ich finde im Code einfach nicht den Haken woran das liegt!!!

  
  <script type="text/javascript" src="dhtml.js"></script>  
  <script type="text/javascript">  
var Bild = new Array();Bild[0] = new Image();  
Bild[0].src = "01.jpg";  
Bild[1] = new Image();  
Bild[1].src = "02.jpg";  
Bild[2] = new Image();  
Bild[2].src = "03.jpg";  
Bild[3] = new Image();  
Bild[3].src = "04.jpg";  
Bild[4] = new Image();  
Bild[4].src = "05.jpg";  
var bildbereich;  
var zeige = 0;  
var Breite = 300;  
var aktuelleBreite = 0;  
var Schrittweite = 6;  
var Schrittverzoegerung = 1;  
function Blaettern (Richtung) {  
zeige = zeige + Richtung;  
if (zeige > Bild.length - 1) {  
zeige = 0;  
} else if (zeige < 0) {  
zeige = Bild.length - 1;  
}  
if (DOM || MSIE4) {  
bildbereich.style.clip = "rect(0 0 225px 0)";  
} else if (NS4) {  
bildbereich.clip.right = 0;  
}  
if (DOM && bildbereich.firstChild) {  
bildbereich.firstChild.src = Bild[zeige].src;  
} else if (MSIE4) {  
bildbereich.innerHTML = '<img src="' + Bild[zeige].src + '">';  
} else if (NS4) {  
bildbereich.visibility = "hide";  
setContent("id", "Bildbereich", null,  
'<img src="' + Bild[zeige].src + '">');  
bildbereich.visibility = "show";  
}  
BildAufbauen();  
}  
function BildAufbauen () {  
if (aktuelleBreite <= Breite) {  
if (DOM || MSIE4) {  
bildbereich.style.clip = "rect(0 " + aktuelleBreite + "px 225px 0)";  
} else if (NS4) {  
bildbereich.clip.right = aktuelleBreite;  
}  
aktuelleBreite = aktuelleBreite + Schrittweite;  
window.setTimeout("BildAufbauen()", Schrittverzoegerung);  
} else {  
aktuelleBreite = 0;  
if (DOM || MSIE4) {  
bildbereich.style.clip = "rect(0 " + Breite + "px 225px 0)";  
} else if (NS4) {  
bildbereich.clip.right = Breite;  
}  
}  
}  
function Init () {  
bildbereich = getElement("id", "Bildbereich");  
if (DOM && document.createElement && bildbereich.appendChild) {  
var img = document.createElement("img");  
img.setAttribute("src", Bild[0].src);  
bildbereich.appendChild(img);  
} else if (MSIE4) {  
bildbereich.innerHTML = '<img src="' + Bild[0].src + '">';  
} else if (NS4) {  
setContent("id", "Bildbereich", null,  
'<img src="' + Bild[0].src + '">');  
}  
}  

Danke, LG, Jürgen

  1. Hi,

    Ihr habt mir mit diesem schönen http://de.selfhtml.org/dhtml/beispiele/bilderbuch.htm#quelltext@title=SelfHTML-Beispiel zu meiner Beta-Version auf meiner Homepage verholfen!

    Mir schein dieses Beispiel irgendwie etwas veraltet. Vielleicht findest Du in diesem Test ein paar Anregungen, der hat keine Probleme mit unterschiedlichen Grössen:
    http://www.wendenburg.de/test/gallery_simple/

    Für Deine Zwecke müsstest Du dann anstelle der Mouseover-Thumbs durch das Bildarray durchblättern. Alternativ kannst Du gerne auch das schwarz-weiss.net script hernehmen...

    Gruesse, Joachim

    --
    Am Ende wird alles gut.
    1. ...

      Mir schein dieses Beispiel irgendwie etwas veraltet. Vielleicht findest Du in diesem Test ein paar Anregungen, der hat keine Probleme mit unterschiedlichen Grössen:
      http://www.wendenburg.de/test/gallery_simple/

      ...

      Gruesse, Joachim

      Danke Joachim für Deinen Tipp - wenn ich zu gar keinem Ergebnis komme seh ichs mir genauer an (sieht ganz gut aus!).

      Aber was ich eigentlich vorhabe:

      • EINBINDUNG der Galerie in meine Seite (wie eben hier schon klappt)
      • KEINE Thumbnails erforderlich/erwünscht
      • Durch KLICK auf oder eben auf Pfeilsymbole blättern ermöglichen
      • KEIN Flash, höchstens eben Java
      1. Hi,

        • KEINE Thumbnails erforderlich/erwünscht

        damit nimmst Du Dir die Möglichkeit, Alternativlinks für Suchmaschinen zu plazieren, Stichwort SEO

        • Durch KLICK auf oder eben auf Pfeilsymbole blättern ermöglichen

        Na ja, ein bisschen Eigenarbeit darf schon, sein, Du musst ja nur anstelle des Auslesens im Beispiel ein Array der Bildobjekte erzeugen.

        • KEIN Flash, höchstens eben Java

        Was hat jetzt Flash damit zu tun? Und merke: Java hat nicht mit Javascript zu tun!

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        1. ... Du musst ja nur anstelle des Auslesens im Beispiel ein Array der Bildobjekte erzeugen.

          hey! genauso in der Funktion brauch ich´s! Nur leider funktionierts schon wieder nicht wenn ich mit dem Quellcode und eigenen Fotos die Seite hochlade .... *grübel*

    2. ... Vielleicht findest Du in diesem Test ein paar Anregungen, der hat keine Probleme mit unterschiedlichen Grössen:

      http://www.wendenburg.de/test/gallery_simple/

      Pfuhhh ...... also ....
      1. ich kann auf HTMLisch bzw. JAVAisch "Guten Tag" und "Wie geht es Ihnen sagen" und mir ein bisschen was zusammenreimen aber Dein Code geht weit weit über meinen Horizont ;-)
      2. Hab Dein Beispiel 1:1 übernommen -> funktioniert leider nicht ...

    3. hi,

      Alternativ kannst Du gerne auch das schwarz-weiss.net script hernehmen...

      Ist das ein von dir selbst geschriebenes Script? Es ist jedenfalls ein ganz gelungenes Script.

      mfg

      --
      echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
      array(2) {
        ["SELFCODE"]=>
        string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
        ["Aight"]=>
        string(?) "I Have a Dream"
      }
      1. Hi

        Ist das ein von dir selbst geschriebenes Script? Es ist jedenfalls ein ganz gelungenes Script.

        ja von mir... danke fürs Lob :-)

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
        1. hi,

          Ist das ein von dir selbst geschriebenes Script? Es ist jedenfalls ein ganz gelungenes Script.
          ja von mir... danke fürs Lob :-)

          Wenn es mal Open-Source wird, melde ich mich freiwillig zur Nutzung ;)

          Und _mich_ stört es auch nicht, wenn es im IE nicht laufen sollte ;)

          War on IE!

          mfg

          --
          echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
          array(2) {
            ["SELFCODE"]=>
            string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
            ["Aight"]=>
            string(?) "I Have a Dream"
          }
          1. hi,

            einen verbesserungsvorschlag hätte ich da noch:

            .gallery-navi img { /* (Linie 574) */  
            border:medium none;  
            cursor:pointer;  
            margin:0 0 0 10px;  
            }
            

            Aber das ist wohl Geschmackssache ;)

            mfg

            --
            echo '<pre>'; var_dump($Malcolm_Beck`s); echo '</pre>';
            array(2) {
              ["SELFCODE"]=>
              string(74) "ie:( fl:) br:> va:? ls:? fo:) rl:| n4:# ss:{ de:? js:} ch:? sh:( mo:? zu:("
              ["Aight"]=>
              string(?) "I Have a Dream"
            }
    4. [latex]Mae  govannen![/latex]

      Mir schein dieses Beispiel irgendwie etwas veraltet. Vielleicht findest Du in diesem Test ein paar Anregungen, der hat keine Probleme mit unterschiedlichen Grössen:
      http://www.wendenburg.de/test/gallery_simple/

      Du könntest noch die Event-Listener für jedes Bild weglassen und einen in ein übergeordnetes Element setzen:

      for (var i = 0; i < img.length; i++) {  
        thumb_src                   =  img[i].src;  
        view_src                    =  img[i].parentNode.href;  
        this.imgobj[thumb_src]      =  new Image();  
        this.imgobj[thumb_src].src  =  view_src;  
      }  
      list.onmouseover = function(e) {  
        if (!e) e = window.event;  
        var element = e.target || e.srcElement;  
        if (element.nodeName.toUpperCase() == "IMG") {  
           obj.dplimg(element);  
        }  
      }
      

      Test-Beispiel: (Nur mit Opera9.62 und IE6 getestet, ich muß allmählich doch mal ins Bett :)

      Cü,

      Kai

      --
      Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
      SelfCode: sh:( fo:| ch:? rl:( br:< n4:( ie:{ mo:| va:) js:| de:> zu:) fl:( ss:| ls:?
      1. Hi Kai,

        Test-Beispiel: (Nur mit Opera9.62 und IE6 getestet, ich muß allmählich doch mal ins Bett :)

        danke für die Anregung, das sieht ganz gut aus. Nur diese Syntax läuft nicht im FF-Mac:
        for (var l = img.length; t_img = img[--l];) {

        und musste so ersetzt werden:
        for (var l = 0, t_img; t_img = img[l]; l++) {

        Gruesse, Joachim

        --
        Am Ende wird alles gut.
  2. Hat niemand ansatzweise eine Idee woher die besch.... Verzerrung im IE kommt? ....

    Ich verzweifle gleich, ich finde nämlich nirgends im Script einen Hinweis darauf, dass in irgendeiner Form eine Verzerrung zum 3:2-Format passieren sollte ....

    Bitte bitte bitte danke ...

    (Auch wenn die Programmierung veraltet ist: sie stellt eben genau dieses schlichte (kein Übergang, keine Thumbs, Vor-Button, Zurück-Button) dar, das ich gern für meine Seite haben möchte)

    1. Hat niemand ansatzweise eine Idee woher die besch.... Verzerrung im IE kommt? ....

      ach ja: hier nochmals die Problemseite