Fotoalbum mit Javascript, was habe ich falsch gemacht?

RedDef · 13.03.2010

Hallo Leute

Ich versuche mich daran ein Fotoalbum mit Javascript zu erstellen. Ich arbeite nach einem Tutorial von psd. Dieses Tutorial ist super erklärt, ich finde jedoch den Fehler im Quelltext nicht. Das Problem ist, wenn ich die Seite in meinem Browser aufrufe, dann erscheint das Grosse Bild so wie es sollte. Die Navigation funktioniert jedoch überhaupt nicht so wie sie gedacht ist. Die Navigation wird nicht in einer Ebene angezeigt. Wenn ich auf die Pfeile gehe um auf die Seite zu scrollen funktionieren diese nicht. Zudem muss ich die Bilder immer doppelt anklicken, welche die in der Navigation sind, damit das Original angezeigt wird. Ich habe schon lange nach Fehlern gesucht, kann jedoch keinen finden.

Hier sind die Quellcodes:

CSS:

Code:

*html{
    margin:0;
    padding:0;
}

body{
    margin:0;
    padding:0;
}

#gallery{
    position:relative;
    width:810px;
    height:715px;
    top:20px;
    left:50%;
    margin-left:-400px;
    border:1px solid #000000;
}

#bildgross{
    position:absolute;
    width:800px;
    height:600px;
    top:5;
    left:5;
}

#navigation{
    position:absolute;
    width:800px;
    height:100px;
    top:610px;
    left:5;
}

#thumbs{
    width:734px;
    float:left;
    white-space:nowrap;
    overflow:hidden:
}

#thumbs img{
    opacity:0.6;
    filter:alpha(opacity=60);
}

HTML/javascript:

Code:

<html>
<head>
<title>Fotoalbum</title>
<link href="format.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript">

    var scrollStep=2;
    var timer;
    
    function scrollDivRight(){
        clearTimeout(timer);
        d=document.getElementById('thumbs');
        d.scrollLeft+=scrollStep;
        timer=setTimeout("scrollDivRight()",10);
    }
    
    function scrollDivLeft(){
        clearTimeout(timer);
        d=document.getElementById('thumbs');
        d.scrollLeft-=scrollStep;
        timer=setTimeout("scrollDivLeft()",10);
    }
    
    function stopMe(){
        clearTimeout(timer);
    }
    
    //Thumbnails mit mouseover versehen
    
    function opac(thumb,wert){
        thumb.style.opacity = wert;
        thumb.style.filter = "alpha(opacity="+ wert*100 +")";
    }
    
    //Bilder anzeigen mit Ueberblendung
    
    function bildershow(bild){
        document.bild.src = document.bild2.src;
        document.bild2.src = bild;
        fade(0);
    }
    
    function fade(step){
        var imgs = document.getElementById("bildergross").getElementsByTagName("img");
        imgs[1].style.opacity = step/100;
        imgs[1].style.filter = "alpha(opacity=" + step + ")";
        step = step + 2;
        if (step <=100){
            window.setTimeout(function(){ fade(step); }, 1);
        }
    }
    
    function preloadImg(){
        document.vorladen = new Array();
        if(document.images){
            for(var i = 0; i < preloadImg.arguments.length; i++){
                document.vorladen[i] = new Image();
                document.vorladen[i].src = preloadImg.arguments[i];
            }
        }
    }
</script>

</head>

<body onLoad="preloadImg('../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg',);">
    <div id="gallery">
    <div id="bildgross">
        <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg" name="bild" style="position:absolute; top:0; left:0;" />
        <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg" name="bild1" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" />
        <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg" name="bild2" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" />
        <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg" name="bild3" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" />
        <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg" name="bild4" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" />
        <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg" name="bild5" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" />
        <img src="../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg" name="bild6" style="position:absolute; top:0; left:0; opacity:0; filter:alpha(opacity=0);" />
    </div>
    
    <div id="navigation">
    
    <img src="../Fotoalbum/Beispielbilder/Format/left.png" style="float:right" onMouseOver="scrollDivLeft();" onMouseOut="stopMe()"/>
    
    <div id="thumbs">
    <img src="../Fotoalbum/Beispielbilder/Format/th-1.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg');"/>
    <img src="../Fotoalbum/Beispielbilder/Format/th-2.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg');"/>
    <img src="../Fotoalbum/Beispielbilder/Format/th-3.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg');"/>
    <img src="../Fotoalbum/Beispielbilder/Format/th-4.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg');"/>
    <img src="../Fotoalbum/Beispielbilder/Format/th-5.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg');"/>
    <img src="../Fotoalbum/Beispielbilder/Format/th-6.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg');"/>
    <img src="../Fotoalbum/Beispielbilder/Format/th-7.jpg" onMouseOver="opac(this,1.0);" onMouseOut="opac(this,0.6);" onClick="bildershow('../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg');"/>
    </div>    
    
    <img src="../Fotoalbum/Beispielbilder/Format/right.png" style="float:right" onMouseOver="scrollDivRight();" onMouseOut="stopMe()"/>
    
    </div>
    </div>
</body>
</html>

Die Namen der Fotos und der Thumbs stimmen und der Pfad auch, dies habe ich überprüft, und sie werden auch angezeigt. Ich wäre echt froh, wenn mir jemand helfen könnte.

Lg

Red_Def

sokie · 13.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

welches Tutorial ist das denn (link)?
Was sagt denn deine javascriptkonsole?

RedDef · 13.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Das Tutorial findet ihr hier:

Ich schreibe das ganze mit dem Dreamweaver und ein Fehler wird mir nicht angezeigt...
Ich habe keine Ahnung wo ich weitersuchen soll.

GReez

sokie · 13.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

beim betrachten im Browser kann man (zB beim firefox) über Extras->Fehlerkonsole die Fehler anzeigen lassen. Beim IE wird es auch so etwas geben.

bolle75 · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Vielleicht hast du es ja inzwischen bereits gefunden.

Code:

...
<body onLoad="preloadImg('../Fotoalbum/Beispielbilder/Format/Unbenannt-1.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-2.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-3.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-4.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-5.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-6.jpg',
                            '../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg',);">
...

Entferne das letzte Komma:
'../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg',);">

...und es wird funktionieren.

RedDef · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Danke für eure Hilfe. Ich habe jetzt das Koma geändert so wie du es mir gesagt hast, jedoch tritt an dieser Stelle immer noch ein Fehler auf...
Firefox meint es sei ein Syntax Error. Er gibt mir Zeile sieben an bei

Code:

'../Fotoalbum/Beispielbilder/Format/Unbenannt-7.jpg');">

Und der Pfeil zeigt auf das ; ich habe jedoch den Strichpunkt schon an alle möglichen Stellen gesetzt und es hat nichts gebracht.

Der Zweite Fehler, den Firefox meldet ist, dass in Zeile 46 bei:

Code:

var imgs = document.getElementById("bildergross").getElementsByTagName("img");

Der Wer von "bildgross" null ist.

Mein Problem ist, dass ich nicht so lange Javascript programmiere und deswegen nur langsam durchblicke.

Ich danke euch jetzt schon für eure Hilfe
LG Red_Def

bolle75 · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Hmm...also mit dem Code aus deinem Eingangspost und ohne das gesagte Komma funktioniert es bei mir im FF ohne Java-Script Fehler.
Hast du evtl. noch was anderes im Code geändert? :uhm:

RedDef · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Nein, geändert habe ich nichts...
Kann es sein, dass es bei mir nicht funktioniert weil einen Mac OS X habe?
sollte eigentlich nicht sein oder?

bolle75 · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Nein, aber jetzt habe ich es gesehen. Der Fehler tritt erst auf, wenn du auf ein Thumbnail klickst, oder?
Dein div heisst bildgross und nicht bildergross:

Code:

<div id="[COLOR=Red]bildgross[/COLOR]">

var imgs = document.getElementById("[COLOR=Red]bildergross[/COLOR]").getElementsByTagName("img");

Also ändere mal bildergross zu bildgross

RedDef · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

so das habe ich, jetzt funktioniert es schonmal, das die Bilder ineinander überlaufen.
Jedoch kehrt immer wieder das selbe Bild zurück und das neue wird nur kurz angezeigt.... Und die Navigation funktioniert immer noch nicht richtig, sie ist nicht auf einer Linie, sonder verteilt auf 3 Linien etwa so:
<--
Bild1 Bild2 Bild3 Bild4 Bild5 Bild6 Bild7
-->
Fehler in der Konsole sind immer noch dieselben.

Thanks for Help
Red_Def

bolle75 · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Fehler in der Konsole sind immer noch dieselben.

Hast du mal die Einträge der Fehlerkonsole gelöscht?

RedDef · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Hmm.. wäre ne gute Idee.
Habe nun den Filter gelöscht und es gibt mir noch folgende Fehler an, welche ich nicht verstehe:

Code:

*html{
	margin:0;
	padding:0;
}

Fehlermeldung dazu: ',' oder '{' erwartet, aber 'html' gefunden. Regelsatz wegen ungültigem Sektor ignoriert.

Und den Fehler: Fehler beim Verarbeiten des Wertes für 'filter' Deklaration ignoriert.
in den Zeilen:

Code:

#thumbs img{
	opacity:0.6;
	filter:alpha(opacity=60);
}

Abgesehen von diesen zwei Fehlern zeigt es mir keinen mehr an.
Die Darstellung der Navigation stimmt jedoch immer noch nicht, und der Übergang der Bilder auch nicht... ich kann die Fehler einfach nicht finden.

LG

Red_Def

sokie · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

*html und dann die definition macht wenig Sinn. an der Stelle kannst du das html weglassen und einfach *{ ... } notieren. die zweite sache ist das filter: was firefox nicht versteht - und das ist auch gut und richtig so, dieser eintrag ist nur für den IE.
Im übrigen sind das 'nur' warnungen. in der Firefox Konsole kannst du die Ansicht so einstellen, dass du nur Fehler, nur Warnungen, oder 'alles' angezeigt bekommst.

ps. die Darstellung der Navigation wird keine javascript Sache sein. hier wäre ein link zur Seite interessant oder ein screenshot. gehört aber eher in den Bereich (x)html/css.

Vorschlag zur besseren Positionierung:

Code:

#gallery{
    position:relative;
    width:810px;
    margin: 20px auto 0 auto;
    border:1px solid #000000;
}

die position der navigation anpassen.

RedDef · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Danke für deine Tips. Ich habe nun das format.css noch korrigiert.
Leider funktioniert es immer noch nicht so, wie es sollte.
Für das bessere Verständnis meiner Probleme habe ich es nun aufs Internet geladen:

Wie ihr sehen könnt, habe ich das Problem mit der Navigation immer noch, sie ist nicht schön angeordnet und wen man ein anderes Bild anklickt, kommt das erste immer wieder zum Vorschein.
In der Firefoxfehlerkonsole werden keine Fehler mehr angezeigt. Ich suche und suche, kann die Fehler aber einfach nicht finden...
Was soll ich am besten tun?
Alles noch einmal neu schreiben hat meiner Meinung nach eigentlich auch keinen Sinn.

Hoffe ihr könnt mir noch weiterhelfen.

Lg

Red_Def

saila · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Hi,

also zum einen würde ich in der Funktion fade() eine Änderung vornehmen.

Code:

var imgs = document.getElementsByTagName("img");

Was mir nicht einleuchtet ist, warum du die Schleife bei jedem Click auf ein Vorschaubild durchlaufen lässt. Es würde ausreichen dem img-tag ein onclick zu verpassen und hier die entsprechende funktion einbetten. Diese Funktion führt dazu, dass du letztlich auch das angeklickte Bild sehen wirst, ohne das es wieder verschwindet.

bolle75 · 14.03.2010

AW: Fotoalbum mit Javascript, was habe ich falsch gemacht?

Mal noch eine ganz grundsätzliche Frage. Warum willst du dir eine Fotogallerie eigentlich von Grund auf selbst programieren und nimmst nicht eine der unzähligen, unter GPL lizenzierten fix fertigen vom Netz (z.B. Galleria)?
Die sind in der Regel ganz einfach in die Seite zu integrieren und haben meistens bereits auch schon die Probleme gelöst, auf welche du im weiteren evtl. erst noch stossen wirst... Klar, es hat auch Vorteile wenn man alles selbst programmiert, bei einem einfachen Fotoalbum sehe ich das jetzt jedoch nicht. Aber ich weiss ja nicht was du noch alles vor hast.