SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Location
    south london
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    where to put slideshow images?

    hi guys

    i have copied this script from a free javascript site, (http://simplythebest.net/scripts/DHT...script_96.html)
    i have the first image displayed but cannot get the following images to follow on. The instructions say: Name the images for the slideshow like this: 1.jpg, 2.jpg, etc if applicable, i am using their saved names i.e beach1.jpg, i dont understand where in the script the following images go - Name the images for the slideshow like this: 1.jpg, 2.jpg, etc if applicable (but where in the script) ,can anyone help.

    The code is:
    <head>
    <script language="JavaScript">
    /* Extension written by David G. Miles (http://www.z3roadster.net/dreamweaver/)
    based in part on code written by Thomas Brattli (http://www.bratta.com)*/
    // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
    if(document.images) {
    currentslide=1;
    maxslides=6;
    slide = new Array(maxslides+1);
    for(var n=1;n<=maxslides;n++) {
    slide[n]=new Image(400,245);
    slide[n].src='images/'+n+'.jpg';
    }
    }
    function prevSlide() {
    if(document.images) {
    currentslide--;
    if(currentslide<1) currentslide=maxslides;
    document.images['slide'].src=slide[currentslide].src;
    }
    }
    function nextSlide() {
    if(document.images) {
    currentslide++;
    if(currentslide>maxslides) currentslide=1;
    document.images['slide'].src=slide[currentslide].src;
    }
    }
    </script>

    </head>
    <body>
    <td align="center" width="50%">

    <!-- Start SlideShow -->
    <table border=0 cellspacing=0 cellpadding=0>
    <tr>
    <td height=5 colspan=2> </td>
    </tr>
    <tr valign=bottom align=center>
    <td height=245 colspan=2><img name='slide' width=400 height=245 border=0 hspace=0 vspace=0 alt='slideshow' src='kingsimports_images/beach1.jpg'></td>
    </tr>
    <tr>
    <td height=5 colspan=2> </td>
    </tr>
    <tr>
    <td height=5 align=left><a href='javascriptrevSlide()'>Previous Image</a></td>

    <td height=5 align=right><a href='javascript:nextSlide()'>Next Image</a></td>
    </tr>
    </table>
    <!-- End SlideShow -->

    </td>

    cheers

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    images

    ! Please put you code inside BB tags. (it'll stop the "tongue" )
    I think the key is the line
    HTML Code:
    slide[n].src='images/'+n+'.jpg';
    This will call images from the "images" folder that are named 1-6 .jpg
    If you want to have beach1.jpg, change the line to
    HTML Code:
    slide[n].src='images/beach'+n+'.jpg';
    etc. This will work as long as ALL the images for each script are named similarly with sequential numbers.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2006
    Location
    south london
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reply, what do i do if i want 10 different slide shows on 1 page, i.e property listings?

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    multiple ss scripts

    Quote Originally Posted by gloryboy
    what do i do if i want 10 different slide shows on 1 page, i.e property listings?
    You could change the function and mark-up for more slide shows. eg. something like this
    Code:
    <script language="JavaScript">
    /* Extension written by David G. Miles (http://www.z3roadster.net/dreamweaver/)
    based in part on code written by Thomas Brattli (http://www.bratta.com)*/
    // Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
    if (document.images) {
      currentslide = 1;
      maxslides = 6;
      slide_1 = new Array(maxslides+1);
      for (var n = 1; n <= maxslides; n++) {
        slide_1[n] = new Image(400, 245);
        slide_1[n].src = 'images/beach' + n + '.jpg';
      }
    /* next ss */
      slide_2 = new Array(maxslides+1);
      for (var n = 1; n <= maxslides; n++) {
        slide_2[n] = new Image(400,245);
        slide_2[n].src = 'images/city' + n + '.jpg';
      }
    /* etc */
    }
    function prevSlide() {
      if (document.images) {
        currentslide--;
        if (currentslide < 1) {
          currentslide = maxslides;
          document.images['slide_1'].src = slide_1[currentslide].src;
    /* next ss */
          document.images['slide_2'].src = slide_2[currentslide].src;
    /* etc */
        }
      }
    }
    function nextSlide() {
      if (document.images) {
        currentslide++;
        if (currentslide > maxslides) {
          currentslide = 1;
          document.images['slide_1'].src = slide_1[currentslide].src;
    /* next ss */
          document.images['slide_2'].src = slide_2[currentslide].src;
    /* etc */
        }
      }
    }
    </script>
    HTML Code:
    <tr valign="bottom" align="center">
    <td height="245px" colspan="2"><img name='slide_1' width="400px" height="245px" border="0" hspace="0" vspace="0" alt='slideshow' src='kingsimports_images/beach1.jpg'></td>
    </tr>
    <tr valign="bottom" align="center">
    <td height="245px" colspan="2"><img name='slide_1' width="400px" height="245px" border="0" hspace="0" vspace="0" alt='slideshow' src='kingsimports_images/city_1.jpg'></td>
    </tr>
    <!-- etc -->

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2006
    Location
    south london
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers mate, much appreciated


Bookmarks

Posting Permissions

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