Entry
How can I script an image slide show?
How can I script an image slide show using IE's reveal transition?
Mar 19th, 2000 06:58
Martin Honnen,
Here is an example that works well with IE4+ taking advantage of IE's
dynamic resizing of IMG elements when the src is swapped. It doesn't
look to well with older browsers when the images have different sizes.
HTML to use IE's revealTransition filter and js to check for that
filter and apply it is included.
<HTML>
<HEAD>
<SCRIPT>
// how long an image is shown, any transition time for IE is added
var delay = 2000;
// IE transition duration, specify as floating point in seconds
var transDuration = 2.0;
var transType = 23; // random change as needed
var images = new Array();
preloadImages( // use your images here
'http://www.kibo.com/kiboarch/kibo_inside_icon.gif',
'http://www.kibo.com/i/time_tunnel_in_3_anim.gif',
'http://www.kibo.com/i/proceed_optim3.gif',
'http://www.faqts.com/symphony/local/brands/faqts/javascript-'
+ 'faqts.gif'
);
/* or do a loop for indexed images
for (var i = 0; i < 7; i++)
preloadImages ('img' + (i + 1) + '.gif');
*/
var cnt = 0;
function preloadImages() {
for (var i = 0; i < arguments.length; i++) {
images[images.length] = new Image();
images[images.length - 1].src = arguments[i];
}
}
var imgTag = '';
imgTag += '<IMG NAME="theImage" ';
imgTag += document.all ?
' STYLE="filter: revealTrans(duration='
+ transDuration + ',transition=' + transType + ');" ' :
'';
imgTag += ' SRC="' + images[0].src + '"';
imgTag += '>';
function nextImage () {
cnt = ++cnt % images.length;
var img = document.theImage;
if (img.filters && transType == 23) // get random type
img.filters.revealTrans.transition =
Math.floor(Math.random() * 23);
if (img.filters)
img.filters.revealTrans.apply();
img.src = images[cnt].src;
if (img.filters)
img.filters.revealTrans.play();
setTimeout('nextImage()',
delay + (img.filters ? Math.round(transDuration * 1000) : 0));
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="setTimeout('nextImage()', delay)">
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0">
<TR>
<TD ALIGN="center" VALIGN="middle">
<SCRIPT>
document.write(imgTag);
</SCRIPT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
