Mandarin Design: Fade Images JavaScript

Fade Image JavaScript

The JavaScript Cross-Browser SlideShow Script with the cross-fade effect between images has adjustable timing and unlimited Images. It works with common browsers but only fades in IE. In Netscape the images swap, they just don't do the transitional fade.

This particular slideshow script is from CodeLifter.com (link opens to the copy-and-paste code). There are a number of JavaScript slideshow variations available so there is no need for us to create yet another slide show script.

Compare the JavaScript Slideshow with Cross-fade with the FadeImages Applet. Both will fade an unlimited number of images. Both are somewhat browser sensitive.

Copy and Paste Code for the JavaScript Slideshow

===========================================================
Script:   JavaScript Cross-Browser SlideShow Script
          With Cross-Fade Effect between Images
          Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
          presentation format, with a fade effect on
          image transitions.
Browsers: All common browsers: NS3-6, IE 4-6
          Fade effect only in IE; others degrade gracefully
Author:   etLux
===========================================================

Step 1.
Put the following script in the head of your page:

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// 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)
}
</script>

===========================================================

Step 2.
Put this onload event call in your body tag:
  
<body onload="runSlideShow()">

===========================================================

Step 3.
Put this in the body of your page where you want the 
slide show to appear.

Set widths and heights same as images
Set image file same as first image in array Pic[] (above)

===========================================================

Easy Setup

Select a few images, each the same size. Here we are using three images.

Back to Top Back to Blog Back to Main