simple image cycler?

resin · 06-01-2012, 01:23 PM

Hello I'm having trouble coming up with a javascript that can cycle through a set of images, and is able to set length of time that each image is displayed? I don't want any extra buttons, fade transitions, etc.. Just a simple automatic image cycler. Javascript or jQuery is fine, whatever can get the job done. Any idea?

Philip M · 06-01-2012, 01:49 PM

Quote:

Originally Posted by resin

Hello I'm having trouble coming up with a javascript that can cycle through a set of images, and is able to set length of time that each image is displayed? I don't want any extra buttons, fade transitions, etc.. Just a simple automatic image cycler. Javascript or jQuery is fine, whatever can get the job done. Any idea?

Have a look at the many fine scripts at http://www.vicsjavascripts.org.uk/

Here is a very simple script which may be sufficient for your purposes. The time each image is displayed is 2000 millseconds = 2 seconds, naturally you can alter that.

Code:

<html>
<head>
</head>
<body onload = "show(); setInterval(show,2000)">

<img id="photoslider">

<script type = "text/javascript">

var photos=[];
photos[0]="myimage1.jpg";
photos[1]="myimage2.jpg";
photos[2]="myimage3.jpg";
photos[3]="myimage4.jpg";
photos[4]="myimage5.jpg";
photos[5]="myimage6.jpg";
photos[6]="myimage7.jpg";
photos[7]="myimage8.jpg";
photos[8]="myimage9.jpg";
photos[9]="myimage10.jpg";

var count = 0;
function show() {
document.getElementById("photoslider").src=photos[count];
count ++;
if (count >9) {count = 0}
}

</script>
</body>
</html>

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

resin · 06-01-2012, 02:06 PM

Wow lots of good stuff there, however these are all too fancy for what I need here, unless I missed it in the list. I don't want anything besides the images themselves to appear (I don't want previous/next buttons, thumbnails, transitions, etc).

Philip M · 06-01-2012, 02:09 PM

Quote:

Originally Posted by resin

Wow lots of good stuff there, however these are all too fancy for what I need here, unless I missed it in the list. I don't want anything besides the images themselves to appear (I don't want previous/next buttons, thumbnails, transitions, etc).

See the simple script which I added to my post two minutes before your second post.

Edit: I interpreted your request to set the length of time as applying to all the images, but vic below allows you to show each image for a different length of time if you wish.

vwphillips · 06-01-2012, 02:49 PM

with changes for individual delays

Code:

<html>
<head>
<script type = "text/javascript">

var photos=[
["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg",1000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg",2000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg",1000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg",3000]
];

var photos2=[
["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg",2000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg",3000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg",4000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg",5000]
];

function show(id,ary,cnt){
 clearTimeout(show[id]);
 cnt=cnt||0;
 var nu=cnt;
 document.getElementById(id).src=ary[nu][0];
 cnt=++cnt%ary.length;
 show[id]=setTimeout(function(){ show(id,ary,cnt);  },ary[nu][1]||2000);
}

</script>
</head>
<body onload = "show('photoslider',photos);show('photoslider2',photos2);">

<img id="photoslider">

<img id="photoslider2">
</body>
</html>

resin · 06-01-2012, 04:25 PM

.....

Philip M · 06-01-2012, 04:39 PM

There are two reasons why multiple scripts in the same page will not work together.

a) duplicate global variable and/or function names (including loop counters etc.)
b) multiple onload statements.

Have a look at:-
http://www.javascriptkit.com/javatut...iplejava.shtml
http://www.dyn-web.com/tutorials/combine.php

Or you can simply fire a set of functions when the page loads.

Code:

<script type="text/javascript">
window.onload = function() {
functionOne();
functionTwo();
}
</script>

resin · 06-02-2012, 11:49 AM

ok...

resin · 06-02-2012, 07:38 PM

Is it possible to somehow add css styling to each individual image under the var photos list? Say if I wanted to move third image down 5px, how would I do that?

jmrker · 06-03-2012, 12:46 AM

Quote:

Originally Posted by resin

Is it possible to somehow add css styling to each individual image under the var photos list? Say if I wanted to move third image down 5px, how would I do that?

Which post above is the current code you are trying to modify?

resin · 06-03-2012, 05:27 AM

The code in vwphillips post above.

vwphillips · 06-03-2012, 09:10 AM

Code:

<html>
<head>
<script type = "text/javascript">

var photos=[
["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg",1000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg",2000,5],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg",1000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg",3000]
];

var photos2=[
["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg",2000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg",3000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg",4000],
["http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg",5000]
];

function show(id,ary,cnt){
 clearTimeout(show[id]);
 cnt=cnt||0;
 var nu=cnt;
 document.getElementById(id).src=ary[nu][0];
 document.getElementById(id).style.top=(ary[nu][2]||0)+'px';
 cnt=++cnt%ary.length;
 show[id]=setTimeout(function(){ show(id,ary,cnt);  },ary[nu][1]||2000);
}

</script>
</head>
<body onload = "show('photoslider',photos);show('photoslider2',photos2);">

<img id="photoslider" style="position:relative;" >

<img id="photoslider2">
</body>
</html>

resin · 06-03-2012, 10:35 AM

Wow good call, how did you know I missed that lol? This is working perfect now. Thanks again

vwphillips · 06-03-2012, 02:03 PM

Code:

<img id="photoslider" style="position:relative;" >