PDA

View Full Version : HTML slideshow


eric_darling
07-14-2003, 02:28 PM
Here's a piece of JavaScript I came across that will allow you to build a slideshow inside an HTML document. Just edit the image names to suit (works with GIF, JPEG and PNG) - place the images in the same directory as the HTML file. The crossfade effect is very nice. It's probably not compatible with version 4 or earlier browsers - just a word of warning there.

Use the HTML file you create inside AMS's Web Object for a snazzy slideshow. Still a workaround, sure, but it works!

----------------
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'choc_cream_cheese_cake.jpg'
Pic[1] = 'apple_pie.jpg'
Pic[2] = 'key_lime_pie.jpg'
Pic[3] = 'carolina_trifle.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play( );
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
----------------------

Remember, of course, to put this script before your body tag, but after the opening head tag in your HTML file.
Corey
07-14-2003, 02:33 PM
Cool...

Corey Milner
Creative Director, Indigo Rose Software (http://www.indigorose.com)
yosik
01-12-2005, 06:15 AM
Sounds great Eric...but I couldn't make it work. The way I put it was:

<html>
<head>
<title>Slideshow1</title>
<meta **********="Content-Type" content="text/html; charset=iso-8859-8">
</head>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'BAUM1.JPG'
Pic[1] = 'BAUM2.JPG'
Pic[2] = 'BAUM3.JPG'
Pic[3] = 'BAUM4.JPG'
Pic[4] = 'BAUM5.JPG'
Pic[5] = 'BAUM6.JPG'
Pic[6] = 'BAUM7.JPG'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play( );
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
<body bgcolor="#FFFFFF" text="#000000">
Plain text
</body>
</html>

And of course, I had the images in the same folder as the htm file.
Anything wrong?

Thanks
Yossi
JimS
01-12-2005, 07:18 AM
That's really nifty Eric.

Yossik, I haven't tried this out yet, but I noticed that you have your closing head tag before the script. Try moving it after the script but before the body.

If that still doesn't work, you may need to add the code to display your first picture, within the body tag.
Corey
01-12-2005, 07:33 AM
Hi. Another way is to just increment a variable in the URL and use a recursive meta-refresh tag. That's how I created the "View all as slideshow" slideshow in our screen gallery:

http://www.indigorose.com/sf/screenshots.php

Works good, gives the user speed control, and it's sooooo simple. I also saw a really good free .mxp extension for Dreamweaver once which created slideshows in just a few seconds via point and click. I've been using more and more Flash/Dreamweaver extensions lately and I must say they are real time savers, especially for Dreamweaver.

So much so in fact that I have vowed to place higher priority from now on for learning the extension systems of all software I use.
yosik
01-12-2005, 09:15 AM
Thanks Jim.
Tried that too, even inserted the first picture inside the html code...still doesn't work.

Thanks
Yossi
longedge
01-12-2005, 10:42 AM
Checkout the stuff Here (http://www.dynamicdrive.com/dynamicindex14/index.html) for a variety of 'html' slideshows. Each of the links provides a small demo of the effect.