Forum Moderators: open
<html>
<head>
<title>Slide show 004</title>
<script type="text/Javascript">
var photos= new Array()
photos[0]= "000.jpg"
photos[1]= "001.jpg"
var index =0;
document.write (photos[index]);
</script>
</head>
</html>
var photos = new Array("000.jpg","001.jpg");
var idx=0;
function showImage(index)
{
var mimg=document.getElementById('test');
mimg.setAttribute('src',photos[index]);
}
function initialise()
{
showImage(idx);
}
window.onload=initialise;
</SCRIPT>
<body>
<img id="test">
Whenever u want to change the image, call showImage with a different number.
<img id='test' src='000.jpg'>
<script type='text/javascript'>
SlideShow=
{
pics:[], timer:null, holder:null, posn:0,
init:function()
{
this.holder=document.getElementById(arguments[0]);
for(var i=0, j=2; j<arguments.length; i++, j++)
this.pics[i]=arguments[j];
this.holder.src=this.pics[this.posn];
this.timer=setInterval('SlideShow.swap()', arguments[1]*1000);
},
swap:function()
{
if(++this.posn==this.pics.length)
this.posn=0;
this.holder.src=this.pics[this.posn];
}
}
SlideShow.init('test', 1, '000.jpg', '001.jpg'); //<- add as many more images as desired
</script>
What I'm doing is building my own personal website. And this slideshow is part of it. And I can see where what I'm trying to do would sound wacky enough to be a strange homework assignment.
In the end I'm going to vary the length of time each slide is presented. Some will be presented for 10 seconds, some for 20 seconds, some for 60 seconds, and so on.
That's the next step. And then I'm going to add a visible timer at the top that counts down how long each slide has been on the screen. When the timer gets to zero, the next slide will appear. I know that sounds bizarre, but that's what the page needs to work.
Thanks, and I appreciate your help.
The only way to show an image is via the img tag or via a backround-image.
Both use the attribute 'src' to determine the file to display. So to display an image you need an HTML tag that accept the 'src' attribute which should be an image file.
<html>
<head>
<title>Display image</title>
<script type="text/javascript">
var index=0
var photos=new Array()
photos new image()
photos[0].src="000.jpg"
photos new image()
photos[1].src="001.jpg"
</script>
</head>
<body>
<img src= photos[index].src>
</body>
</html>
<img id='test' src='image1.gif'><script type='text/javascript'>
SlideShow=/*73637269707465726C61746976652E636F6D*/
{
pics:[], holder:null, posn:0,
init:function()
{
this.holder=document.getElementById(arguments[0]);
for(var i=0, j=1; j<arguments.length; i++, j+=2)
{
this.pics[i]={img:arguments[j], period:arguments[j+1]}
this.holder.src=this.pics[this.posn];
}
this.posn=this.pics.length-1;
this.swap();
},
swap:function()
{
if(++this.posn==this.pics.length)
this.posn=0;
this.holder.src=this.pics[this.posn].img;
setTimeout('SlideShow.swap()', this.pics[this.posn].period*1000);
}
}
SlideShow.init('test', 'image1.gif',10, 'image2.gif',2, 'image3.gif',5);
</script>
Example:
var Photos=new Array("000.jpg","001.jpg","002.jpg");
So Photos[0] is 000.jpg [1] is 001.jpg and so on
Alternatively you can declare the Array and set the values later.
Example:
var Photos= new Array();
Photos[0]="000.jpg";
Photos[1]="001.jpg";
Your requirement looks at having the src attribute of an img tag changed on a varying time basis, so if you have the images in an array, and the time intervals in an array you can set the timeout on a funtion using the timeout array and change the image source using the image source array.
So using my original code with a few amendments:
<SCRIPT type="text/javascript">
var photos = new Array("000.jpg","001.jpg","002.jpg","003.jpg");
var interval = new Array(5, 6, 2, 4); // Interval in seconds
var idx=0;
function showImage(index)
{
idx=idx+1;
if(idx>3) // Reset index if over the max no of images
{
idx=0;
}
var mimg=document.getElementById('test');
mimg.setAttribute('src',photos[index]);
// Set the timer to display next image
setTimeout('showImage('+idx+')', interval[index]*1000);
}
function initialise()
{
showImage(idx);
}
window.onload=initialise;
</SCRIPT>
This should do all you require.
If you could fine tune it a bit, I'd like start and stop buttons at the top of the page, and a visible timer at the top, on the screen, that shows how long each slide has been on (it would automatically reset for each new slide, and pushing the start button more than once wouldn't make the timer speed up.) And finally after the timer counts down to zero on the last slide, display a final picture / slide on the screen that says "The End"
And then the page will be done.
Little bit of a re-write to cope with additional requests, this script will have a start button that will dissappear when pressed. This stops the user from pressing it again. Once pressed a stop button appears. If the stop button is pressed the message 'Stopped' appears and the start button re-appears while the stop button is hidden.
The count counts down the number of seconds left and changes the image just as the count gets to 0.
<SCRIPT type="text/javascript">
var photo=new Array("000.jpg","001.jpg","002.jpg","003.jpg");
var interval=new Array(2,4,6,1);
var idx=0;
var secs=interval[idx];
var timed;
var msg='';
function startClock()
{
msg="Stopped";
var bdiv=document.getElementById('start');
bdiv.style.cssText="display:none;";
var bdiv=document.getElementById('stop');
bdiv.style.cssText="display:block;";
var tdiv=document.getElementById('timer');
tdiv.innerHTML=secs;
var mdiv.document.getElementById('test');
mdiv.setAttribute('src','photo[idx]);
timed=setTimeout("startClock()",1000);
if(secs==0)
{
idx=idx-1;
if(idx>3)
{
msg="The End";
clearTimeout(timed);
stopClock();
}
else
{
var mdiv.document.getElementById('test');
mdiv.setAttribute('src','photo[idx]);
secs=interval[idx];
var tdiv=document.getElementById('timer');
tdiv.innerHTML=secs;
}
}
secs=secs-1;
}
function stopClock()
{
clearTimeout(timed);
var bdiv=document.getElementById('start');
bdiv.style.cssText="display:display;";
var bdiv=document.getElementById('stop');
bdiv.style.cssText="display:none;";
var mdiv=document.getElementById('test');
if(msg='The End')
{
mdiv.setAttribute('src','ending.jpg');
}
else
{
mdiv.setAttribute('src','stopped.jpg');
}
var mdiv=document.getElementById('timer');
mdiv.innerHTML=msg;
idx=0;
secs=interval[idx];
}
</SCRIPT>
<BODY>
<img id="test">
<div id="timer"> </div>
<div id="start"><input type="button" onClick="javascript:startClock();" value="Start"></div>
<div id="stop"><input type="button" onClick="javascript:stopClock();" value="Stop"></div>
</BODY>
Now when you get your qualification can I have a copy of the Certificate to hang on my wall. :o)
This is quick and dirty code, there is probably a better way of doing this, however, this is probably easier to understand.
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT type="text/javascript">
var photo=new Array("000.jpg","001.jpg","002.jpg","003.jpg");
var interval=new Array(2,4,6,1);
var idx=0;
var secs=interval[idx];
var timed;
var msg='';
function startClock()
{
msg="Stopped";
var bdiv=document.getElementById('start');
bdiv.style.cssText="display:none;";
var bdiv=document.getElementById('stop');
bdiv.style.cssText="display:block;";
var mdiv=document.getElementById('timer');
mdiv.innerHTML=secs;
var mdiv=document.getElementById('test');
mdiv.setAttribute('src',photo[idx]);
timed=setTimeout("startClock()",1000);
if(secs==0)
{
idx=idx+1;
if(idx>3)
{
msg="The End";
clearTimeout(timed);
stopClock();
}
else
{
var mdiv=document.getElementById('test');
mdiv.setAttribute('src',photo[idx]);
secs=interval[idx];
var mdiv=document.getElementById('timer');
mdiv.innerHTML=secs;
}
}
secs=secs-1;
}
function stopClock()
{
clearTimeout(timed);
var bdiv=document.getElementById('start');
bdiv.style.cssText="display:block;";
var bdiv=document.getElementById('stop');
bdiv.style.cssText="display:none;";
var mdiv=document.getElementById('test');
if(msg=="The End")
{
mdiv.setAttribute('src','Ending.jpg');
}
else
{
mdiv.setAttribute('src','');
}
var mdiv=document.getElementById('timer');
mdiv.innerHTML=msg;
idx=0;
secs=interval[idx];
}
</SCRIPT>
</HEAD>
<BODY>
<img id="test">
<div id="timer"> </div>
<div id="start"><input type="button" onClick="javascript:startClock();" value="Start"></div>
<div id="stop" style="display:none;"><input type="button" onClick="javascript:stopClock();" value="Stop"></div>
</BODY>
</HTML>
[b]if(idx>[blue]3[/blue])[/b][b]if(idx==[blue]photo.length[/blue])[/b](I guess Colandy just missed this when cleaning up)
Hard coded numbers inside the logical structure should always be viewed with suspicion.
Use the length of the
photo--------------------------
[b]bdiv.style.[blue]cssText[/blue]="display:none;";[/b][b]bdiv.style.[blue]display[/blue]="none";[/b]Using the cssText property is handy on very particular occasions, but the potential downside is that it overwrites whatever may already be in the element's inline CSS (though not stylesheet rules).
In this case, it is better to apply to the display property, because there's no reason not to, and it keeps one's ass covered.
--------------------------
[b]timed=setTimeout([blue]"startClock()"[/blue],1000);[/b][b]timed=setTimeout([blue]startClock[/blue],1000);[/b]setTimeoutsetInterval--------------------------
[b]onClick="[blue]javascript:[/blue]startClock();"[/b][b]onClick="startClock();"[/b]Event handlers have never needed or wanted the
javascript:[edited by: Bernard_Marx at 1:52 pm (utc) on June 21, 2007]
<html>
<head>
<title>Slide show 004</title>
<script type="text/Javascript">
var photos= new Array()
photos[0]= "<img scr="000.jpg">"
photos[1]= "<img scr="001.jpg">"
var index =0;
document.write (photos[index]);
</script>
</head>
</html>
Many thanks for the improvements, as I'd mentioned on a previous post, this is what I call quick and dirty code but understandable hopefully. The improvements you mentioned are ideal and not done in mine partly due to ignorance on my part (being a reasonable beginner with JS).
This was a case of here's what I want, so I just did it as quickly and easily as possible.
Adam,
This should all work now, let us know..!
Andy. You’re fabulous, magnificent, superb, tops, topnotch, stupendous, prodigious, and a lot of other good things. I’ve been working on this for at least two weeks and making slow progress at best. This is a terrific page and you’ve got a good head on your shoulders. This is going to be by far the most complicated page on my site, and it’s just what the page needs to make it work. You did a great job and compliments, kudos, and accolades to you.
And also thanks to everyone else who helped.. This page is done.
