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:
HTML/javascript:
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
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);
}
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>
Lg
Red_Def
Zuletzt bearbeitet von einem Moderator: