Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Auckland, New Zealand
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slideshow sizing of pictures

    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="&lt;&lt;Back" name="B2" onClick="backward()"><input type="button"
    value="Next&gt;&gt;" 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">&nbsp;</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>

  • #2
    New Coder
    Join Date
    Jul 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try taking the width and height dimensions out of code 2.

    <p align="center"><img name="photoslider" src="../Cards/Busy%20Lizzies.jpg" > </p>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •