Jump to content

Archived

This topic is now archived and is closed to further replies.

Hellusius

Slideshow

Recommended Posts

I am making a slideshow

Script: (in head of file)
[code]<script language=javascript>
<!-- Slideshow script
var slide = new Array("TR(trailer)0.jpg","TR(trailer)1.jpg","TR(trailer)2.jpg","TR(trailer)3.jpg","TR(trailer)4.jpg")
var presentSlide=0

function previous( ) { 
  if (document.images && presentSlide > 0) { 
      presentSlide = presentSlide -1 
      document.slideshow.src=slide[presentSlide]
      } 
    } 

function next( ) { 
  if (document.images && presentSlide < 4) { 
      presentSlide = presentSlide +1 
      document.slideshow.src=slide[presentSlide]
      } 
    } 
  // End Slideshow script -->
</script>[/code]

and html:
[code]<table width="1000" align="center">
  <tr>
    <td>
<font color="#BF5500" size="4">The Return's Slideshow</font>
<img src="tropic.jpg" name="slideshow"><p>
<size="4">
<a href =  javascript:previous( ) > Previous</A> 
<a href =  javascript:next( ) > Next</A>
    </td>
  </tr>
</table>[/code]

Does for some apperent reason not work, the screenshots are not even displayed even though they are uploaded on the ftp.

suggestions on this issue would be muxh appreciated, thanks in advance =)

Share this post


Link to post
Share on other sites
well first of all use ' href="javascript::previous()" ' . Always use dobule quotes as this is proper coding.
Secondly, instead of using ' document.slideshow ' use ' document.getElementById('slideshow') ' and  add to the img tag an id property like: ' <img src="tropic.jpg" name="slideshow" id="slideshow"> ' .
If these things does not help and still nothing changes I can suggest using something like this as javascript:
[code]
<script language=javascript>
<!-- Slideshow script
var slide = new Array("TR(trailer)0.jpg","TR(trailer)1.jpg","TR(trailer)2.jpg","TR(trailer)3.jpg","TR(trailer)4.jpg")
var presentSlide=0

function previous( ) { 
  if (document.images && presentSlide > 0) { 
      presentSlide = presentSlide -1 
      document.getElementById('slideSpan').innerHTML = '<img src="'+ slide[presentSlide] + '" id="slideshow" name="slideshow"> ' ;
      } 
    } 

function next( ) { 
  if (document.images && presentSlide < 4) { 
      presentSlide = presentSlide +1 
      document.getElementById('slideSpan').innerHTML = '<img src="'+ slide[presentSlide] + '" id="slideshow" name="slideshow"> ' ;
      } 
    } 
  // End Slideshow script -->
</script>
[/code]
and while your html code changes a little bit to:
[code]
<table width="1000" align="center">
  <tr>
    <td>
<font color="#BF5500" size="4">The Return's Slideshow</font>
<span id="slideSpan"><img src="tropic.jpg" name="slideshow"></span><p>
<size="4">
<a href =  javascript:previous( ) > Previous</A> 
<a href =  javascript:next( ) > Next</A>
    </td>
  </tr>
</table>
[/code]

I just changed the changing src to an innerHTML method. Well this code should work if I'm not missing something but you could also try your previous code by changing what I said before.
Hope that helps

Share this post


Link to post
Share on other sites
It worked so far, but now I am thinking of making a thing that if next is pressed at the last picture it will continu on the first picture again.
any idea's on this?

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.