allyson
08-03-2002, 06:11 AM
Hi coding forum
Below is the code for a slideshow that I have been developing. It is located at http://homepages.ihug.co.nz/~usateden/panacea/slideshow
It displays pictures in the main frame, but the size of the images is resized to a certain size. For example the the image called Potters Park is really 500 x 800. For some reason the pictures are being forced into 400 x 279 size. (I know this size is created in code 2, but I have no idea how to free up the size restriction). I want each image to be displayed as the size that I have originally sized them too. (I hope this makes sense).
Code 1
<html>
<head>
<title>Panacea Arts Trust</title>
</head>
<body background="bg1.jpg">
<table border="0" cellpadding="0">
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript">
var photos=new Array()
var text=new Array()
var which=0
var what=0
/*Images */
photos[0]="../Cards/Potters Park.jpg"
photos[1]="../Cards/Flowers for Elizabeth.jpg"
photos[2]="../Cards/Busy Lizzies.jpg"
photos[3]="../Cards/Racing Yachts.jpg"
photos[4]="../Cards/Nana Mouskouri.jpg"
/*Descriptions*/
text[0]="Potters Park, by Mario Franchini"
text[1]="Flowers for Elizabeth, by Dale Bush"
text[2]="Busy Lizzies, by Lizzi Collenette"
text[3]="Racing Yachts, by Lynda Rodgers"
text[4]="Nana Mouskouri, by William Webb"
function preloadImages(){
//load first slide
top.frames["main"].document.images.photoslider.src=photos[0];
top.frames["description"].document.rotater.description.value=text[0];
//pre-load other slides
for (var i=1;i<photos.length;i++){
image = new Image(photos[i]);
}
}
window.onload=preloadImages;
function backward(){
if (which>0){
window.status=''
which--
top.frames["main"].document.images.photoslider.src=photos[which] ;
what--
top.frames["description"].document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
top.frames["main"].document.images.photoslider.src=photos[which] ;
what++
top.frames["description"].document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
</script><input type="button"
value="<<Back" name="B2" onClick="backward()"><input type="button"
value="Next>>" name="B1" onClick="forward()" </center><br>
<input type="button" value="Start Over" name="B3" onClick="which=1;what=1;backward()"></p>
</center></div>
</form>
</td>
</tr>
</table>
<p align="center"> </p>
</body>
</html>
Code 2
<html>
<head>
<title>Panacea Arts Trust </title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center"><img src="../Cards/Busy%20Lizzies.jpg" width="400" height="279"
alt="Busy Lizzies.jpg (29439 bytes)"></p>
</body>
</html>
Below is the code for a slideshow that I have been developing. It is located at http://homepages.ihug.co.nz/~usateden/panacea/slideshow
It displays pictures in the main frame, but the size of the images is resized to a certain size. For example the the image called Potters Park is really 500 x 800. For some reason the pictures are being forced into 400 x 279 size. (I know this size is created in code 2, but I have no idea how to free up the size restriction). I want each image to be displayed as the size that I have originally sized them too. (I hope this makes sense).
Code 1
<html>
<head>
<title>Panacea Arts Trust</title>
</head>
<body background="bg1.jpg">
<table border="0" cellpadding="0">
<tr>
<td width="100%"><form method="POST" name="rotater">
<div align="center"><center><p><script language="JavaScript">
var photos=new Array()
var text=new Array()
var which=0
var what=0
/*Images */
photos[0]="../Cards/Potters Park.jpg"
photos[1]="../Cards/Flowers for Elizabeth.jpg"
photos[2]="../Cards/Busy Lizzies.jpg"
photos[3]="../Cards/Racing Yachts.jpg"
photos[4]="../Cards/Nana Mouskouri.jpg"
/*Descriptions*/
text[0]="Potters Park, by Mario Franchini"
text[1]="Flowers for Elizabeth, by Dale Bush"
text[2]="Busy Lizzies, by Lizzi Collenette"
text[3]="Racing Yachts, by Lynda Rodgers"
text[4]="Nana Mouskouri, by William Webb"
function preloadImages(){
//load first slide
top.frames["main"].document.images.photoslider.src=photos[0];
top.frames["description"].document.rotater.description.value=text[0];
//pre-load other slides
for (var i=1;i<photos.length;i++){
image = new Image(photos[i]);
}
}
window.onload=preloadImages;
function backward(){
if (which>0){
window.status=''
which--
top.frames["main"].document.images.photoslider.src=photos[which] ;
what--
top.frames["description"].document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
top.frames["main"].document.images.photoslider.src=photos[which] ;
what++
top.frames["description"].document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
</script><input type="button"
value="<<Back" name="B2" onClick="backward()"><input type="button"
value="Next>>" name="B1" onClick="forward()" </center><br>
<input type="button" value="Start Over" name="B3" onClick="which=1;what=1;backward()"></p>
</center></div>
</form>
</td>
</tr>
</table>
<p align="center"> </p>
</body>
</html>
Code 2
<html>
<head>
<title>Panacea Arts Trust </title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p align="center"><img src="../Cards/Busy%20Lizzies.jpg" width="400" height="279"
alt="Busy Lizzies.jpg (29439 bytes)"></p>
</body>
</html>