Re: Need Help Creating an Image Slideshow

Bart Van der Donck wrote:
Madcap wrote:
I want to experiment with a new feature for my web app. The feature
is basically a "slideshow" of pictures with each picture loading in
the same frame after a delay of some seconds. So, when the user opens
the page/frame it will...

1. Load multiple images from web server (preload all)
2. Display first image
3. Wait xx seconds (different interval for each picture)
4. Load next image
5. Repeat

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd";>
<html>
<head>
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var interval = 1.5; // in seconds
var t = 0;

Unnecessary global variables.

var f = new Array();
f[0] = new Image();

Untested construction of host object.

f[0].src = 'http://216.92.6.95/app_pics/large/kCAm14d1JNRM7vn.jpg';
f[1] = new Image();
f[1].src = 'http://216.92.6.95/app_pics/large/YQk8ePvHibk19W6.jpg';
f[2] = new Image();
f[2].src = 'http://216.92.6.95/app_pics/large/H3rmiFJw3MheUaC.jpg';

Unnecessary, harder-to-maintain assignments.

var f = [
"http://216.92.6.95/app_pics/large/kCAm14d1JNRM7vn.jpg";,
"http://216.92.6.95/app_pics/large/YQk8ePvHibk19W6.jpg";,
"http://216.92.6.95/app_pics/large/H3rmiFJw3MheUaC.jpg";
];

// or: jsx.object.isMethod(jsx.global, "Image"))
var t = typeof Image;
if (/^\s*unknown\s*/i.test(t)
|| /^\s*(function|object)\s*$/i.test(t) && Image)
{
var imageFactory = function(uri) {
var img = new Image();
img.src = uri;
return img;
};

for (var i = f.length; i--;)
{
f[i] = imageFactory(f[i]);
}
}

function refr() {
++t;
if (t >= f.length) t=0;

Inefficient operation; as you initialize with 0, and increment by 1,
only `>' is needed. However, I would not use a global variable here:

function refr(img, intv, t)
{
var me = arguments.callee;

if (typeof me.target == "undefined")
{
// or: !jsx.object.getFeature("document", "images", "pic")
if (typeof document == "undefined"
|| typeof document.images == "undefined"
|| typeof document.images[imgName] == "undefined"
|| typeof (me.target = document.images[imgName]).src
== "undefined")
{
return false;
}
}

if (typeof t == "undefined") t = -1;
++t;

img.src = (typeof f[t].src != "undefined" ? f[t].src : f[t]);

if (typeof window != "undefined"
&& jsx.object.isMethod(window, "setTimeout"))
{
window.setTimeout(function() { me(img, intv, t); }, intv * 1000);
}
}

In fact, all slides could be defined as properties of the animation method
so as to minimize the use of global variables. Then again, one would
consider using a slideshow object in the first place.

var slideshow = {
slides: [
{uri: ..., specialDelay: 0.5},
...
],
start: 0,
delay: 1.0,

run: function() {
// this.slides, this.start, this.current, this.delay
}
};

<body onload="slideshow.run('pic', 1.5)">

document.images['pic'].src = f[t].src;

Untested property access (Reference Worm).

setTimeout('refr()', interval * 1000);

Untested method call, relying on more error-prone scope chain resolution.

}
</script>
</head>
<body onLoad="setTimeout('refr()', interval * 1000);">

<body onload="refr('pic', 1.5);">


PointedEars
.

Relevant Pages

  • Re: setInterval problem?
    ... then pause for 5 seconds etc. ... It is invalid in HTML 4.01 Strict, XHTML 1.0 Strict, and XHTML 1.1. ... // List all the pictures in the slideshow here ... var intv; ...
    (comp.lang.javascript)
  • Slideshow and Opera
    ... I am using a script to run a small slideshow on my site. ... var crossFadeDuration = 100; ... adding to the array below ...
    (microsoft.public.frontpage.client)
  • Re: javascript picture insert?
    ... Outta curiosity, on the butterfly pages url you listed...what is the little gray door on the right side, then I see two more gray vertical rectangles. ... | I'm trying to place a picture on a page "offer_form.htm" by linking from ... | var qvbl; ... | I've made the whole shebang work in a new practice web, ...
    (microsoft.public.frontpage.client)
  • Re: how to implement AJAX to html
    ... happens) here's some simple PHP and ajax mushed together. ... ....copy some images into slideshow ... var http = createRequestObject; ... http.onreadystatechange = handleResponse; ...
    (comp.lang.php)
  • Re: Anticipated Finish Variance
    ... make sure you delay any incomplete work to the date it will restart. ... With a baseline the finish variance should calculate as you go, no need to wait for an actual finish date. ... A client has asked if an anticipated finish var. ... Many Thanks - Luca ...
    (microsoft.public.project)