MrMojoRisin
Neues Mitglied
Hallo,
ich habe ne Frage zu meiner Slideshow. Ich habe von javascript nicht wirklich ahnung, deswegen hab ich im Internet nach einem Slider gesucht und den perfekten für meinen Zweck gefunden, funktioniert auch einwandfrei, nur bei der Validierung bekomme ich ca. 60-70 Fehler. Die meisten sowas wie: "document type does not allow element xy here. Aber auch paar andere. Könnt den Code ja selber mal nachprüfen. The W3C Markup Validation Service
Hab mal allen überflüssigen Code gelöscht. Wenn ihr euch nen Ordner pictures anlegt und da die bilder rein und im code noch die namen bearbeitet, seht ihr, wie es funktionieren soll. Es soll halt eine Slideshow sein, bei der ich die Größe, Geschwindigkeit anpassen kann und es soll nicht immer nur ein Bild zu sehen sein, sondern ich habe ca. 10 bilder drin, die sollen alle mit kleinem abstand zwischen den bildern konstant durchlaufen, wenn die 10 durch sind, einfach wieder mit dem ersten anfangen. Habe leider keinen anderen Code als diesen gefunden. Idealerweise bräuchte ich auch noch ne Start/Pause Funktion, allerdings soll es standartmäßig auf an stehen.
Hoffe, ihr könnt mir irgendwie weiterhelfen.
Gruß und schonmal vielen Dank
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="docs/ffs.css" type="text/css" />
<title>Links</title>
</head>
<body>
<div id="gallery">
<script type="text/javascript">
//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="250px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[21]='<img src="images/geraet10.jpg" border=1>'
leftrightslide[22]='<img src="images/pplate03.jpg" border=1>'
leftrightslide[23]='<img src="images/lybra03.jpg" border=1>'
leftrightslide[24]='<img src="images/therapiebetten01.jpg" border=1>'
leftrightslide[25]='<img src="images/geraet16.jpg" border=1>'
leftrightslide[26]='<img src="images/pplate04.jpg" border=1>'
leftrightslide[27]='<img src="images/therapiebetten05.jpg" border=1>'
leftrightslide[28]='<img src="images/umkleide01.jpg" border=1>'
leftrightslide[29]='<img src="images/hypoxi01.jpg" border=1>'
leftrightslide[30]='<img src="images/kaffee01.jpg" border=1>'
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
</div>
</body>
</html>
ich habe ne Frage zu meiner Slideshow. Ich habe von javascript nicht wirklich ahnung, deswegen hab ich im Internet nach einem Slider gesucht und den perfekten für meinen Zweck gefunden, funktioniert auch einwandfrei, nur bei der Validierung bekomme ich ca. 60-70 Fehler. Die meisten sowas wie: "document type does not allow element xy here. Aber auch paar andere. Könnt den Code ja selber mal nachprüfen. The W3C Markup Validation Service
Hab mal allen überflüssigen Code gelöscht. Wenn ihr euch nen Ordner pictures anlegt und da die bilder rein und im code noch die namen bearbeitet, seht ihr, wie es funktionieren soll. Es soll halt eine Slideshow sein, bei der ich die Größe, Geschwindigkeit anpassen kann und es soll nicht immer nur ein Bild zu sehen sein, sondern ich habe ca. 10 bilder drin, die sollen alle mit kleinem abstand zwischen den bildern konstant durchlaufen, wenn die 10 durch sind, einfach wieder mit dem ersten anfangen. Habe leider keinen anderen Code als diesen gefunden. Idealerweise bräuchte ich auch noch ne Start/Pause Funktion, allerdings soll es standartmäßig auf an stehen.
Hoffe, ihr könnt mir irgendwie weiterhelfen.
Gruß und schonmal vielen Dank
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="docs/ffs.css" type="text/css" />
<title>Links</title>
</head>
<body>
<div id="gallery">
<script type="text/javascript">
//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="250px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"
//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[21]='<img src="images/geraet10.jpg" border=1>'
leftrightslide[22]='<img src="images/pplate03.jpg" border=1>'
leftrightslide[23]='<img src="images/lybra03.jpg" border=1>'
leftrightslide[24]='<img src="images/therapiebetten01.jpg" border=1>'
leftrightslide[25]='<img src="images/geraet16.jpg" border=1>'
leftrightslide[26]='<img src="images/pplate04.jpg" border=1>'
leftrightslide[27]='<img src="images/therapiebetten05.jpg" border=1>'
leftrightslide[28]='<img src="images/umkleide01.jpg" border=1>'
leftrightslide[29]='<img src="images/hypoxi01.jpg" border=1>'
leftrightslide[30]='<img src="images/kaffee01.jpg" border=1>'
//Specify gap between each image (use HTML):
var imagegap=" "
//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5
////NO NEED TO EDIT BELOW THIS LINE////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
</div>
</body>
</html>
