FOK!forum / Digital Corner / Probleem bij javascript fotogallery
Parvusdonderdag 21 augustus 2003 @ 16:04
Ik heb bezig met een fotogallery voor mijn website maar loop tegen het volgende probleem aan:

De foto's van formaat 263x350 worden weer gegeven als 350x263. Dit is te verkalren door het volgende stukje htmlcode: <img src="5-Daagse%20van%20Frankrijk.jpg" width="350" height="263" name="photoslider"> .

Hoe kan ik deze foto's toch op een juiste manier weergeven? En hoe moet ik de buttons 'vorige' en 'volgende' vervangen door de tekst 'vorige' en 'volgende' maar dat de functie in tact blijft?

Tot slot even de htmlcode:

<html>

<head>
<title></title>
</head>

<body bgcolor="#FFFFFF" marginheight="5" marginwidth="0" leftmargin="0" topmargin="5"
link="#000000">
<div align="center"><div align="center"><center>

<table border="0" cellpadding="0" cellspacing="0">
</table>
</center></div><div align="center"><center>

<table border="0" cellpadding="0" cellspacing="0" align="center" width="728">
</table>
</center></div><div align="center"><center>

<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="140"></td>
<td valign="top" width="12"></td>
<td width="600"><table border="0" cellpadding="0" cellspacing="0" width="606" height="445">
<tr valign="top">
<td width="606" height="445"><table border="0" cellpadding="0" cellspacing="0" width="420">
<tr>
<td width="420"><br>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="415">
<tr>
<td width="415" style="border: 0px solid" valign="top"><table border="0" width="100%"
height="66">
<tr>
<td width="100%" height="53"><table border="0" cellpadding="0">
<tr>
<td width="300" height="300"><img src="5-Daagse%20van%20Frankrijk.jpg" width="350"
height="263" name="photoslider"></td>
</tr>
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript1.1">
var photos=new Array()
var which=0

/*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
photos[0]="5-Daagse van Frankrijk.jpg"
photos[1]="5-Daagse van Frankrijk (1).jpg"
photos[2]="5-Daagse van Frankrijk (2).jpg"
photos[3]="5-Daagse van Frankrijk (3).jpg"
photos[4]="5-Daagse van Frankrijk (4).jpg"
photos[5]="5-Daagse van Frankrijk (5).jpg"
photos[6]="5-Daagse van Frankrijk (6).jpg"
photos[7]="5-Daagse van Frankrijk (7).jpg"
photos[8]="5-Daagse van Frankrijk (8).jpg"
photos[9]="5-Daagse van Frankrijk (9).jpg"
photos[10]="5-Daagse van Frankrijk (10).jpg"


function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which]
}
}

function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
}
else window.status='End of gallery'
}
</script><input
type="button" value="Vorige" name="B2" onClick="backward()"> <small><font face="Arial"><input
type="button" value="Volgende" name="B1" onClick="forward()"></font></small><br>
</p>
</center></div>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
</table>
<p>&nbsp;</p>
<p><font face="Arial"><br>
</font></p>
<p><font face="Arial"><br>
</font></p>
<p><font face="Arial"><br>
</font></td>
</tr>
</table>
</td>
</tr>
</table>
</center></div></div>
</body>
</html>

Lopatdonderdag 21 augustus 2003 @ 16:15
quote:
De foto's van formaat 263x350 worden weer gegeven als 350x263. Dit is te verkalren door het volgende stukje htmlcode:
code:
<img src="5-Daagse%20van%20Frankrijk.jpg" width="350" height="263" name="photoslider"> .
Je zegt het zelf al...
zet gewoon width=263 en height=350 (met quotes)
quote:
code:
<input
type="button" value="Vorige" name="B2" onClick="backward()"> <small><font face="Arial"><input
type="button" value="Volgende" name="B1" onClick="forward()"></font></small><br>
Doe dit
code:
<a href="#" onClick="backward()">Vorige</a>
<a href="#" onClick="forward()">Volgende</a>
Parvusdonderdag 21 augustus 2003 @ 16:29
Ik zie dat ik het niet helemaal goed het uitgelegd betreffende de formaten van de foto's.
Ik heb 2 soorten foto's:
- formaat 1:263x350
- formaat 2:350x263

De bedoeling is dat beide foto's goed worden weer gegeven. Nu gebeurd dat niet door de volgende code: <img src="5-Daagse%20van%20Frankrijk.jpg" width="350" height="263" name="photoslider">

Lopatdonderdag 21 augustus 2003 @ 16:35
quote:
Op donderdag 21 augustus 2003 16:29 schreef Parvus het volgende:
Ik zie dat ik het niet helemaal goed het uitgelegd betreffende de formaten van de foto's.
Ik heb 2 soorten foto's:
- formaat 1:263x350
- formaat 2:350x263

De bedoeling is dat beide foto's goed worden weer gegeven. Nu gebeurd dat niet door de volgende code: <img src="5-Daagse%20van%20Frankrijk.jpg" width="350" height="263" name="photoslider">

probeer eens geen formaat op te geven

en anders moet je in je array de height en de width opnemen
je functies worden dan uitgebreid met die 2 waarden...

Parvusdonderdag 21 augustus 2003 @ 16:43
Ik heb het uitgeprobeerd door geen waarden op te geven en het is gelukt! . Bedankt voor je tijd en moeite...