July 11, 2012 2 Comments
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
Source: http://www.stumbleupon.com/su/9Kj1Yo/www.developerdrive.com/2012/07/slide-show-snippet-with-javascript/
No comments:
Post a Comment