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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with simple slideshow

    Hi I have to use a simple javascript slideshow for a section of my coursework creating a website.

    The site is contained in a folder called assignment1 with all of the websites pages and the javascript, there is also a folder in here called images.

    my javascript is as follows.

    var index=1;

    function moveToNextSlide()
    {
    var img = document.getElementById("img1");
    var slideName="Images/img" + index++ + ".jpg";
    img.src=slideName;
    }
    moveToNextSlide();
    // JavaScript Document


    Then the following code is within my html

    in my header is

    <script type="text/javascript" src="………………."></script>

    Then the follwoing is placed where i would like the slideshow to appear.

    <p><img id="img1" src="" width="400" height="325"></p>
    <p><a href="javascript:moveToNextSlide()">Next</a></p>
    <script>
    moveToNextSlide();
    </script>


    All the images are called img1.jpg, img2.jpg and so on. The slideshow is showing up but no images are appearing.

    Does anyone see my problem?

    Thanks oliver

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Try this, or adapt:-

    Code:
    <p align="center">
    <table border="0" cellpadding="0" align="center">
    <caption><font size="3" face="Arial"><b>My Images</b></caption>
    
    <tr>
    <td align="center" width="100%"><img src="img1.jpg" name="photoslider"></td>
    </tr>
    
    <tr>
    <td width="100%">
    <div align="center">
    
    <script type= "text/javascript">
    
    var photos=new Array();
    var which=0;
    
    photos[0]="img1.jpg"
    photos[1]="img2.jpg"
    photos[2]="img3.jpg"
    photos[3]="img4.jpg"
    photos[4]="img5.jpg"
    photos[5]="img6.jpg"
    
    function backward(){
    if (which>0){
    window.status='';
    which-- ;
    document.photoslider.src=photos[which];
    }
    }
    
    function forward(){
    if (which<photos.length-1){
    which++ ;
    document.photoslider.src=photos[which];
    }
    else window.status='End of gallery';
    }
    
    </script>
    
    <br>
    <input type="button" value="&lt;&lt; Back" name="B2" onClick="backward()"> &nbsp &nbsp <input type="button" value="Next &gt;&gt;" name="B1" onClick="forward()"><br><br>
    
          <a href="#" onClick="which=1;backward();return false"><font face="Arial, Helvetica" color="#0000FF"><small><b>Go back to the start</b></small></a></p>
          </center></div>


    i raed a wlihe ago taht as lnog as the frsit and lsat lttesrs in a wrod are in the cerroct pcale msot of us wulod siltl be albe to raed bceause our barnis jsut looks at the frsit and lsat lttesrs.

  • #3
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for that.

    I am actually more interested in fixing my own code, if it comes down to it I may have to use other code.

    Any other ideas people?

    Thanks again

  • #4
    Regular Coder
    Join Date
    Dec 2008
    Location
    Tannhäuser Gate
    Posts
    286
    Thanks
    7
    Thanked 58 Times in 57 Posts
    That should work:
    Code:
    <!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></title>
    <script type="text/javascript">
    //- <![CDATA[
    var index=2;
    function moveToNextSlide()
    {
    var img = document.getElementById("img1");
    var slideName="Images/img" + index++ + ".jpg";
    img.src=slideName;
    }
    //- ]]>
    </script>
    </head>
    <body>
    <p><img id="img1" src="Images/img1.jpg" width="400" height="325"></p>
    <p><a href="javascript:moveToNextSlide()">Next</a></p>
    </body>
    </html>
    I've put index value at 2, and picked img1.jpg as first image that will show when loading the page. Of course if you don't want it this way, just make index=1 and remove image src from IMG tag, like it was in your original code.
    Last edited by freedom_razor; 01-26-2009 at 06:38 PM.


  •  

    Posting Permissions

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