<script type="text/javascript">
function fotoalbum(){
current_pic = 0;
this.pics = new Array('image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg','image6.jpg')
this.vorige = function vorige(){
if(current_pic > -1){
current_pic--;
document.getElementById('links').style.background = 'url("fotos/' + this.pics[current_pic - 1] + '") no-repeat right top'
document.getElementById('rechts').style.background = 'url("fotos/' + this.pics[current_pic + 1] + '") no-repeat left top'
document.getElementById('midden').innerHTML = '<img src="fotos/' + this.pics[current_pic] + '" class="imageborder" />'
}
}
this.volgende = function volgende(){
if(current_pic + 1 <= this.pics.length - 1){
current_pic++;
document.getElementById('links').style.background = 'url("fotos/' + this.pics[current_pic - 1] + '") no-repeat right top'
document.getElementById('rechts').style.background = 'url("fotos/' + this.pics[current_pic + 1] + '") no-repeat left top'
document.getElementById('midden').innerHTML = '<img src="fotos/' + this.pics[current_pic] + '" class="imageborder" />'
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
album = new fotoalbum();
</script>
<div id="container">
<div id="links">
<a href="javascript:void(0)" onclick="album.vorige()">vorige</a>
</div>
<div id="rechts">
<a href="javascript:void(0)" onclick="album.volgende()">volgende</a>
</div>
<div id="midden">
<img src="fotos/image2.jpg" class="imageborder" />
</div>
</div>
Maar nu heb ik het volgende probleem: Soms zijn de foto's wel zichtbaar en soms niet, maar ze worden op een een of andere manier tijdens het laden afgebroken, want de middelste afbeelding heeft een border om zich heen, deze border klopt wel steeds met de afmetingen van de afbeelding. Soms laadt een afbeelding ook voor de helft. Wie heeft een idee hoe dit kan?
[edit]
Het gebeurt vooral in IE
voorbeeldje: http://temp.saimen.nl/fotoviewer.html
[/edit]