SitePoint.com

gloryboy · Jul 11, 2006, 03:50

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%">


<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='javascript

revSlide()'>Previous Image</a></td>

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


</td>

cheers

Mittineague · Jul 11, 2006, 21:24

! 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.

gloryboy · Jul 11, 2006, 23:18

thanks for the reply, what do i do if i want 10 different slide shows on 1 page, i.e property listings?

Mittineague · Jul 12, 2006, 16:41

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 -->

gloryboy · Jul 15, 2006, 14:43

cheers mate, much appreciated

Jul 11, 2006, 03:50	#1
gloryboy SitePoint Zealot Join Date: Jan 2006 Location: south london Posts: 181	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

Jul 11, 2006, 21:24	#2
Mittineague Google search user Join Date: Jul 2005 Location: West Springfield, Massachusetts Posts: 9,418	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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Jul 11, 2006, 23:18	#3
gloryboy SitePoint Zealot Join Date: Jan 2006 Location: south london Posts: 181	thanks for the reply, what do i do if i want 10 different slide shows on 1 page, i.e property listings?

Jul 15, 2006, 14:43	#5
gloryboy SitePoint Zealot Join Date: Jan 2006 Location: south london Posts: 181	cheers mate, much appreciated