krijg foto's niet gelinkt.

Status
Niet open voor verdere reacties.

newdeep

Gebruiker
Lid geworden
9 okt 2007
Berichten
207
Wil graag een slideshow op mijn homepage zetten.
Ben inmiddels aardig op dreef.
Heb thumbnails in script geplaatst die ik wil linken naar grotere foto's maar dit wil niet lukken.
Kan iemand mij op weg helpen.



Code:
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="900px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2
//configure background color:
slidebgcolor="#CCCCCC"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="plaatjes klein/slideshow-tester.jpg" /><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(1).jpg" /><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(2).jpg" /><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(3).jpg" /><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(4).jpg" /><img src="dynamicbook5.gif" border=1></a>'

//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>



</head>
<body>

<div align="center"></div>
</body>
</html>
 
Laatst bewerkt door een moderator:
HTML:
<a href="http://">
moet worden
HTML:
<a href="URL_naar_groter_plaatje">
dus bijvoorbeeld
HTML:
<a href="grote_plaatjes/slideshow-tester.jpg">
 
JHx,

Heb veranderd zoals jij voorstelde...maar helaas.
Zie nu wel dat de thumbnails veranderen(geleurd randje) omdat ze gelinkt zijn.
Maar krijg de grote foto niet te zien.
Hieronder kan je zien dat ik de eerste 2 foto's heb ingevoegd.


Code:
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="<img src="plaatjes groot/slideshow-tester.jpg" />"><img src="plaatjes klein/slideshow-tester.jpg" /><img src="dynamicbook1.gif" border=1></a>'
leftrightslide[1]='<a href="<img src="plaatjes groot/slideshow-tester-(1).jpg" />"><img src="plaatjes klein/slideshow-tester-(1).jpg" /><img src="dynamicbook2.gif" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(2).jpg" /><img src="dynamicbook3.gif" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(3).jpg" /><img src="dynamicbook4.gif" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(4).jpg" /><img src="dynamicbook5.gif" border=1></a>'
 
Laatst bewerkt door een moderator:
Sorry...ik was misschien niet helemaal duidelijk...
HTML:
leftrightslide[0]='<a href="http://"><img src="plaatjes klein/slideshow-tester.jpg" /><img src="dynamicbook1.gif" border=1></a>'
moet worden:
HTML:
leftrightslide[0]='<a href="plaatjes groot/slideshow-tester.jpg"><img src="plaatjes klein/slideshow-tester.jpg" /><img src="dynamicbook1.gif" border=1></a>'
 
JHx,

We komen steeds een stukje verder.
De linken doen het nu,na de laatste wijziging,maar zoals je ziet in de bijlage klopt de layout niet.
 

Bijlagen

  • ScreenShot017.jpg
    ScreenShot017.jpg
    91,6 KB · Weergaven: 33
Ik vroeg mij idd al af wat die
HTML:
<img src="dynamicbook1.gif" border=1>
te betekenen had... Ik vermoedde dat dat een soort 'spacer' of zo moest zijn. Maar dat is dus de oorzaak van de rode kruisjes...
Maak van
HTML:
leftrightslide[0]='<a href="plaatjes groot/slideshow-tester.jpg"><img src="plaatjes klein/slideshow-tester.jpg" /><img src="dynamicbook1.gif" border=1></a>'
het volgende
HTML:
leftrightslide[0]='<a href="plaatjes groot/slideshow-tester.jpg"><img src="plaatjes klein/slideshow-tester.jpg" /></a>'
 
JHx,

Het geheel begint er steeds beter uit te zien.
Heb nog even een bijlage meegestuurd zodat je kan zien dat de thumbnails zijn voorzien van een kader...die ik niet wegkrijg.
Ook staat er tussen de foto's een 5 ,die moest ik invullen als imagegap.
Graag nog even je oordeel.


//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="plaatjes groot/slideshow-tester.jpg" /><img src="plaatjes klein/slideshow-tester.jpg" ></a>'
leftrightslide[1]='<a href="plaatjes groot/slideshow-tester-(1).jpg" /><img src="plaatjes klein/slideshow-tester-(1).jpg" ></a>'
leftrightslide[2]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(2).jpg" ></a>'
leftrightslide[3]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(3).jpg" ></a>'
leftrightslide[4]='<a href="http://"><img src="plaatjes klein/slideshow-tester-(4).jpg" ></a>'

//Specify gap between each image (use HTML):
var imagegap= 5

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap= 5
 

Bijlagen

  • ScreenShot018.jpg
    ScreenShot018.jpg
    95,3 KB · Weergaven: 25
Die rand krijg je wel weg door border="0" toe te voegen aan de img-tag
HTML:
leftrightslide[0]='<a href="plaatjes groot/slideshow-tester.jpg"><img src="plaatjes klein/slideshow-tester.jpg" border="0" /></a>'
Die 5 heeft dus inderdaad toch te maken met de 'spacer' die ik je heb laten weghalen... Daar moet ik nog eens goed naar kijken ... Ik kom straks of morgen wel terug;)
 
Het getal dat je moet invullen bepaalt de afstand tussen de laatste en de terugkerende eerste foto.
Ik heb het script even op mijn eigen site gezet en daar werkt het prima
Kijk hier maar even...
De code kan je bekijken door de bron van de pagina op te vragen ;)
PS: ik heb nog een kleinde aanpassing gedaan, namelijk de grote foto tonen vlak onder de slideshow...
 
JHx,

Helemaal geweldig dit script.Als ik 'm aan de gang krijg is het helemaal te gek.
Ik heb jou foto's vervangen door die van mij....maar helaas. doe er nog even een bijlage bij wat ik in beeld krijg.




//Specify the slider's width (in pixels)
var sliderwidth="900px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2
//configure background color:
slidebgcolor="#CCCCCC"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img src="plaatjes klein/slideshow-tester-(1).jpg" />" onclick=\'ToonFoto("plaatjes klein/slideshow-tester-(1).jpg");\' />'
leftrightslide[1]='<img src="plaatjes klein/slideshow-tester-(4).jpg" />" onclick=\'ToonFoto("plaatjes klein/slideshow-tester-(4).jpg");\' />'
leftrightslide[2]='<img src="plaatjes klein/slideshow-tester-(7).jpg" />" onclick=\'ToonFoto("plaatjes klein/slideshow-tester-(7).jpg");\' />'
leftrightslide[3]='<img src="plaatjes klein/slideshow-tester-(8).jpg" />" onclick=\'ToonFoto("plaatjes klein/slideshow-tester-(8).jpg");\' />'
leftrightslide[4]='<img src="plaatjes klein/slideshow-tester-(9).jpg" />" onclick=\'ToonFoto("plaatjes klein/slideshow-tester-(9).jpg");\' />'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=50


////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>')
}
}
function ToonFoto(welke){
document.all("div1").innerHTML="<img src='plaatjes groot/"+welke+"'>";
}
</script>



</head>
<body bgcolor='#CCCCCC'>

<div align="center"></div>
<div id='div1'></div>
 

Bijlagen

  • ScreenShot0119.jpg
    ScreenShot0119.jpg
    79,3 KB · Weergaven: 28
HTML:
leftrightslide[0]='<img src="plaatjes klein/slideshow-tester-(1).jpg" />" onclick=\'ToonFoto("plaatjes klein/slideshow-tester-(1).jpg");\' />'
vervangen door:
HTML:
leftrightslide[0]='<img src="plaatjes klein/slideshow-tester-(1).jpg" onclick="ToonFoto(\'plaatjes klein/slideshow-tester-(1).jpg\');" />'
en dat voor elk van die lijnen
 
Bijna....bijna.
De thumbnails doen het allemaal....en ze lopen ook lekker door beeld alleen de hyperlink naar de vergroting doet het niet.

greetz


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
</head>
<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="900px"
//Specify the slider's height
var sliderheight="150px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2
//configure background color:
slidebgcolor="#CCCCCC"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<img src="plaatjes klein/slideshow-tester-(1).jpg" onclick="ToonFoto(\'plaatjes klein/slideshow-tester-(1).jpg\');"/>'
leftrightslide[1]='<img src="plaatjes klein/slideshow-tester-(4).jpg" onclick="ToonFoto(\'plaatjes klein/slideshow-tester-(4).jpg\');"/>'
leftrightslide[2]='<img src="plaatjes klein/slideshow-tester-(7).jpg" onclick="ToonFoto(\'plaatjes klein/slideshow-tester-(7).jpg\');"/>'
leftrightslide[3]='<img src="plaatjes klein/slideshow-tester-(8).jpg" onclick="ToonFoto(\'plaatjes klein/slideshow-tester-(8).jpg\');"/>'
leftrightslide[4]='<img src="plaatjes klein/slideshow-tester-(9).jpg" onclick="ToonFoto(\'plaatjes klein/slideshow-tester-(9).jpg\');"/>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=50


////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>')
}
}
function ToonFoto(welke){
document.all("div1").innerHTML="<img src='plaatjes groot/"+welke+"'>";
}
</script>



</head>
<body bgcolor='#CCCCCC'>

<div align="center"></div>
<div id='div1'></div>
</body>
 
dit:
HTML:
leftrightslide[0]='<img src="plaatjes klein/slideshow-tester-(1).jpg" onclick="ToonFoto(\'plaatjes klein/slideshow-tester-(1).jpg\');"/>'
moet je veranderen in dit:
HTML:
leftrightslide[0]='<img src="plaatjes klein/slideshow-tester-(1).jpg" onclick="ToonFoto(\'slideshow-tester-(1).jpg\');"/>'
Ik heb de locatie van de grote foto's 'vast' opgenomen in de functie die de grote foto's laat zien. Da's eigenlijk een schoonheidsfoutje...
Op mijn eigen voorbeeldpagina heb ik dat veranderd. De locatie wordt daar nu meegegeven als argument naar de functie.
Ofwel pas je je code aan zoals hierboven aangegeven, ofwel pas je ze aan zoals ze nu is in mijn voorbeeld. Het eerste is waarschijnlijk wat makkelijker, het tweede is echter wat 'correcter';)
 
Heb via een redirect een testpage gemaakt.
www.dreamweavertest.ontheweb.nl
Zoals jullie zien lopen de thumbnails mooi en ze zijn zichtbaar...als ik met de aanwijzer op een plaatje ga staan dan stopt de show,alleen de hyperlink doet het nog steeds niet.
Ik weer het één en ander veranderd in het script...hoop dat het zichtbaar is.
 
Nu zat je weer een beetje fout met de enkele en dubele quotes...
Dit is de verbeterde broncode van jou pagina:
HTML:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript">
      /***********************************************
      * Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
      * This notice MUST stay intact for legal use
      * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
      ***********************************************/
      //Specify the slider's width (in pixels)
      var sliderwidth="900px"
      //Specify the slider's height
      var sliderheight="150px"
      //Specify the slider's slide speed (larger is faster 1-10)
      var slidespeed=1
      //configure background color:
      slidebgcolor="#CCCCCC"
      //Specify the slider's images
      var leftrightslide=new Array()
      var finalslide=''
      leftrightslide[0]='<img src="plaatjes klein/slideshow-tester-(1).jpg" onclick="ToonFoto(\'plaatjes groot/slideshow-tester-(1).jpg\')"/>'
      leftrightslide[1]='<img src="plaatjes klein/slideshow-tester-(4).jpg" onclick="ToonFoto(\'plaatjes groot/slideshow-tester-(4).jpg\')"/>'
      leftrightslide[2]='<img src="plaatjes klein/slideshow-tester-(7).jpg" onclick="ToonFoto(\'plaatjes groot/slideshow-tester-(7).jpg\')"/>'
      leftrightslide[3]='<img src="plaatjes klein/slideshow-tester-(8).jpg" onclick="ToonFoto(\'plaatjes groot/slideshow-tester-(8).jpg\')"/>'
      leftrightslide[4]='<img src="plaatjes klein/slideshow-tester-(9).jpg" onclick="ToonFoto(\'plaatjes groot/slideshow-tester-(9).jpg\')"/>'
      //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
      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)
      }
      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
          }
        }
      }
      function ToonFoto(welke){
        document.getElementById("div1").innerHTML="<img src='"+welke+"'>"
      }
    </script>
  </head>
  <body bgcolor='#CCCCCC'>
    <script type="text/javascript">
      if (iedom){
        document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
      }
      window.onload=fillup
      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>')
        }
      }
      if (iedom||document.layers){
        with (document){
          if (iedom){
            write('<div id="div1"></div>')
          }else if (document.layers){
            write('<ilayer id="div1"></ilayer>')
          }
        }
      }
    </script>
  </body>
</html>
 
Laatst bewerkt:
Hij doet het....geweldig:thumb:
www.dreamweavertest.ontheweb.nl
Ik ga nu een serie foto's selecteren en het geheel verkleinen...huidige is iets te groot.
Wat ik mij nog afvraag...als ik het script op de pagina heb geplaatst en ga de foto's invoegen dan veranderen de quotes steeds...is daar misschien een wat simpelere manier voor?
 
Het is gelukt en hij is online.:thumb:
Neem maar even een kijkje om het eindresultaat te bekijken op www.newdeep.ontheweb.nl (onderaan de sail 2008 pagina).
Bij het invoegen van de foto's in het script veranderen er wel wat quotes maar die verander ik steeds handmatig....dat neem ik voor lief.
Nogmaals bedankt voor de hulp.:thumb:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan