Photo Slideshow

@hoffmanstoysApr 23.2006

This is the first time for me to get on a Forum and ask questions, so please be patient. I have a website and am trying to do a slideshow using Javascript…Finally found a code that I thought was simple enough for me to just copy and paste my JPEG info into it. However, after putting in 3 or 4 photos, I can’t get it to work any longer by adding any more photos to it. Could someone please help me with a simple code? Sorry but at my age, it’s rather hard for me to understand all the new computer stuff. Thanks!

to post a comment

JavaScript

5 Comments(s) _↴

@balloonbuffoonApr 23.2006 — #What do you currently have?

--Steve

@BytesApr 23.2006 — #We will need to have a peek at the code you're using, to be of best help to you and your slide show.

Thanks,

@hoffmanstoysauthorApr 23.2006 — #Sorry....that might help! Here it is...

<script language="JavaScript1.1">



</script>

<a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=250 height=250></a>

<script>



</script>

@BytesApr 23.2006 — #I’m going to suggest you perhaps consider the following script for a slide show instead of attempting to fix your present effort.

Place the following in the <HEAD> of your document:

[CODE]<script type="text/javascript">
 
 var group1 = [];
 group1[0] = "PopUps/driftwoodstand-100_1413.jpg";
 group1[1] = "PopUps/driftwoodstand-100_1413.jpg";
 group1[2] = "PopUps/driftwoodstand-100_1414.jpg";
 group1[3] = "PopUps/driftwoodstand-100_1415.jpg";
 group1[4] = "PopUps/driftwoodstand-100_1413.jpg";
 group1[5] = "PopUps/driftwoodstand-100_1413.jpg";
 group1[6] = "PopUps/driftwoodstand-100_1414.jpg";
 group1[7] = "PopUps/driftwoodstand-100_1415.jpg";
 group1[8] = "PopUps/driftwoodstand-100_1414.jpg";
 group1[9] = "PopUps/driftwoodstand-100_1415.jpg";
 
 var textCaption = [];
 textCaption[0]= "Drift Wood Mounted on a Stand 1413";
 textCaption[1]= "Drift Wood Mounted on a Stand 1413";
 textCaption[2]= "Drift Wood Mounted on a Stand 1414";
 textCaption[3]= "Drift Wood Mounted on a Stand 1415";
 textCaption[4]= "Drift Wood Mounted on a Stand 1413";
 textCaption[5]= "Drift Wood Mounted on a Stand 1413";
 textCaption[6]= "Drift Wood Mounted on a Stand 1414";
 textCaption[7]= "Drift Wood Mounted on a Stand 1415";
 textCaption[8]= "Drift Wood Mounted on a Stand 1413";
 textCaption[9]= "Drift Wood Mounted on a Stand 1414";
 
 var rotate_delay = 3000; // delay in milliseconds (5000 = 5 secs)
 var current = 0;
 var caption = "";
 
 function next(){
 if (current < group1.length-1)
 {
 current++;
 }
 else {
 current = 0;
 }
 document.images.show.src = group1[current]
 caption.innerHTML = textCaption[current];
 }
 
 function gal1() {
 current = 0;
 document.images.show.src = document.slideform.slide[0].value;
 document.slideform.slide.selectedIndex = 0;
 caption.innerHTML = current;
 }
 
 function previous(){
 if (current > 0)
 {
 current--;
 }
 else {
 current = group1.length-1;
 }
 document.images.show.src = group1[current];
 caption.innerHTML = textCaption[current];
 }
 
 function ap(text) {
 document.forms[0].slidebutton.value = (text == "Stop") ? "AutoPlay" : "Stop";
 rotate();
 }
 
 function rotate(){
 if (document.forms[0].slidebutton.value == "Stop")
 {
 current = (current == group1.length-1) ? 0 : current+1;
 document.images.show.src = group1[current];
 caption.innerHTML = textCaption[current];
 setTimeout("rotate()", rotate_delay);
 }
 }
 
 function init(){
 caption = document.getElementById('description');
 caption.innerHTML = textCaption[0];
 }
 
 onload=init;
 
 </script>	[/CODE]

Edit:
[CODE]group1[0] = "PopUps/driftwoodstand-100_1413.jpg";[/CODE]and
[CODE]textCaption[0]= "Drift Wood Mounted on a Stand 1413";[/CODE] to reflect your own photos. I've listed 10 photos within the script, but you can add more by appending to these two aforementioned groups of code.

Add to following to the <BODY> of your document:

[CODE]<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td align="center" valign="middle">
 
 <form name="slideform" style="margin: 0px">
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr><td align="center" valign="middle">
 
 <TABLE cellpadding="0" cellspacing="0" border="1" bordercolor="#1F3564" style="border-collapse: collapse">
 <tr>
 <td><img src="PopUps/driftwoodstand-100_1413.jpg" name="show">
 </td>
 </tr>
 <tr>
 <td style="font-size:10pt;color:darkblue;background-color:#808080;padding:5px" align="middle" id="description">&nbsp;
 </td>
 </tr>
 </table>
 
 <br>
 
 <!-- START THE SLIDESHOW BUTTONS -->
 
 <input type=button value="Close" onClick='self.close()' class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
 <input type=button name="slidebutton" onClick="ap(this.value);" value="AutoPlay" title="AutoPlay" class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
 <input type=button onClick="previous();" value="<<" title="Previous" class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
 <input type=button onClick="next();" value=">>" title="Next" class="button-popups" onmouseover="this.className='buttonon-popups'" onmouseout="this.className='button-popups'">
 </td>
 </tr>
 </table>
 </form>[/CODE]

Revise the following code (within your <BODY> section) to reflect what photo you would like your slide show to start with:

[CODE]<img src="PopUps/driftwoodstand-100_1413.jpg" name="show">[/CODE]To keep things [B]Fair[/B], this script was presented to me by a member of this forum in an earlier posting.

Take Care,

@hoffmanstoysauthorApr 23.2006 — #Wanted to say thanks for your help early this morning. This code did work for me on a couple of slideshows on the same page but when I went to do the third one, it never would work. Is there a problem where you can only put one or two shows on a page? Here is the URL to check what I was wanting to use it for. Any other suggestions would be greatly appreciated....

http://www.hoffmanstoys.com/nurserypgC.html

Also in #JavaScript _↴

Print only text that has been selected with a checkbox How to judge which checkbox objects are checked in server side?server Search Help

Success!

Help @hoffmanstoys spread the word by sharing this article on Twitter...

Tweet This

Photo Slideshow

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Photo Slideshow

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴