Many websites nowadays make use of sliders to highlight different content or pages but these slide shows usually appear at the top of the home page. Anyone who deals with content knows the power that images have to keep a reader engaged. In fact, most content creators try to scatter images throughout their text for this very purpose.

But what happens if you marry the two concepts together? Taking the slide show concept and inserting it into the content of a web page…

Begin by opening up the HTML of your web page and insert the following JavaScript code between the <head> tags:

<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] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.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>

Now, insert the this snippet into the <body> section:

<BODY onLoad="runSlideShow()">

And finally insert this snippet into the <body> section where you wish the slide show to appear:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=640 height=150>
</td>
</tr>
</table>

Considerations:

  • Change the names of 1.jpg, 2.jpg, etc. to the names of your images.
  • In the line of code that reads: <img src=”1.jpg” name=’SlideShow’ width=640 height=150>, be sure to change the width and height to match your images.
  • In the same line of code, change 1.jpg to the name of the first image you wish to display.

In the demo, I have inserted some text just so you can see how it looks in between two paragraphs of content. Want to see? Check out the demo here: http://developerdrive.com/demo/slide_show/demo.html

By Jeff
Jeff is a freelance writer and the editor of Developer Drive. He writes on web development topics with a focus on web application security. In his spare time he coaches youth football and works as a technology coordinator for the Palm Beach County school district.
  • Trevor Geene

    Why would anyone use a table for a slide show? Lists are a much better option.

  • Michael Girouard

    This is very bad JS code. Please please please don’t use this in any real work.

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns