Bouncing Slideshow

Bouncing Slideshow

v1.0 - May 14, 2006
bouncingslideshow.zip (117k)

Bouncing Slideshow is a Dynamic HTML script that adds a bouncing picture slideshow effect to your document. The picture moves around at different angles bouncing back and forth off the edges of the browser window. The new pictures in the slideshow sequence appear as the picture hits the left and right hand sides of the window.

Features:

Simple installation.

Automatic preloading of images.

* This script requires the Dynamic HTML scripting library dynLib. For more information about dynLib please visit the dynLib website.

Installation

1. Upload the files dynlib.js & bouncingslideshow.js then link them to your document as JavaScript include files. Add the following code between the <head> & </head> tags:

<script language="JavaScript" src="dynlib.js"></script>
<script language="JavaScript" src="bouncingslideshow.js"></script>

2. Upload all of the pictures to be used in the slideshow. These are defined in the confuration section of the file bouncingslideshow.js.

Configuration

The bouncingSlideshow.pictureSrc array holds the file names of the pictures used in the slideshow. The slideshow will continuously loop through these pictures in the order listed. If the pictures are stored in a different folder, make sure that the bouncingSlideshow.picturePath string is defined using correct syntax. eg. '/pictures/'.

Source Code

bouncingslideshow.js (5k)

// =================================== // // Bouncing Slideshow // // v1.0 - May 14, 2006 // // ----------------------------------- // // Created by Lloyd Hassell // // Website: lloydhassell.brinkster.net // // Email: lloydhassell@hotmail.com // // =================================== // // INITIALIZATION: bouncingSlideshow = new Object(); // CONFIGURATION: bouncingSlideshow.picturePath = ''; bouncingSlideshow.pictureSrc = new Array('01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'); bouncingSlideshow.pictureWidth = 320; bouncingSlideshow.pictureHeight = 240; bouncingSlideshow.frameRate = 30; bouncingSlideshow.speedX = 2; bouncingSlideshow.speedY = 2; // MAIN: bouncingSlideshow.currentPicture = 0; bouncingSlideshow.isLoaded = false; bouncingSlideshow.winWidth = null; bouncingSlideshow.winHeight = null; bouncingSlideshow.pictureObj = new Array(); bouncingSlideshow.picturesLoaded = false; if (dyn) bouncingSlideshow.pictureObj[0] = loadImg(bouncingSlideshow.picturePath + bouncingSlideshow.pictureSrc[0]); function changePictureSrc() { bouncingSlideshow.currentPicture++; if (bouncingSlideshow.currentPicture == bouncingSlideshow.pictureSrc.length) bouncingSlideshow.currentPicture = 0; bouncingSlideshow.imgObj.src = bouncingSlideshow.pictureObj[bouncingSlideshow.currentPicture].src; } function loadPictures() { bouncingSlideshow.picturesLoaded = true; for (var pictureLoop = 1; pictureLoop < bouncingSlideshow.pictureSrc.length; pictureLoop++) bouncingSlideshow.pictureObj[pictureLoop] = loadImg(bouncingSlideshow.picturePath + bouncingSlideshow.pictureSrc[pictureLoop]); } function getWindowDimensions() { bouncingSlideshow.winWidth = getWinWidth(); bouncingSlideshow.winHeight = getWinHeight(); } function loadBouncingSlideshow() { if (dyn && !bouncingSlideshow.isLoaded) { getWindowDimensions(); bouncingSlideshow.dirX = (Math.round(Math.random()) == 0) ? 'left' : 'right'; bouncingSlideshow.dirY = (Math.round(Math.random()) == 0) ? 'up' : 'down'; bouncingSlideshow.posX = (bouncingSlideshow.winWidth - bouncingSlideshow.pictureWidth) / 2; bouncingSlideshow.posY = (bouncingSlideshow.winHeight - bouncingSlideshow.pictureHeight) / 2; bouncingSlideshow.layerObj = addLayer('bouncingSlideshowLayer'); setLayerSize(bouncingSlideshow.layerObj,bouncingSlideshow.pictureWidth,bouncingSlideshow.pictureHeight); setLayerClip(bouncingSlideshow.layerObj,0,bouncingSlideshow.pictureWidth,bouncingSlideshow.pictureHeight,0); setLayerHTML(bouncingSlideshow.layerObj,getImgTag('bouncingSlideshowImage',bouncingSlideshow.pictureObj[bouncingSlideshow.currentPicture].src,bouncingSlideshow.pictureWidth,bouncingSlideshow.pictureHeight,0)); moveLayerTo(bouncingSlideshow.layerObj,bouncingSlideshow.posX,bouncingSlideshow.posY); showLayer(bouncingSlideshow.layerObj); bouncingSlideshow.imgObj = getImgObj('bouncingSlideshowImage'); } bouncingSlideshow.isLoaded = true; moveBouncingLayer(); } function moveBouncingLayer() { if (bouncingSlideshow.picturesLoaded == false) loadPictures(); if (bouncingSlideshow.dirX == 'left') { if (bouncingSlideshow.posX > bouncingSlideshow.speedX) bouncingSlideshow.posX -= bouncingSlideshow.speedX; else { changePictureSrc(); bouncingSlideshow.dirX = 'right'; bouncingSlideshow.posX = 0; } } else if (bouncingSlideshow.dirX == 'right') { if (bouncingSlideshow.posX + bouncingSlideshow.pictureWidth < bouncingSlideshow.winWidth - bouncingSlideshow.speedX) bouncingSlideshow.posX += bouncingSlideshow.speedX; else { changePictureSrc(); bouncingSlideshow.dirX = 'left'; bouncingSlideshow.posX = bouncingSlideshow.winWidth - bouncingSlideshow.pictureWidth; } } if (bouncingSlideshow.dirY == 'up') { if (bouncingSlideshow.posY > bouncingSlideshow.speedY) bouncingSlideshow.posY -= bouncingSlideshow.speedY; else { bouncingSlideshow.dirY = 'down'; bouncingSlideshow.posY = 0; } } else if (bouncingSlideshow.dirY == 'down') { if (bouncingSlideshow.posY + bouncingSlideshow.pictureHeight < bouncingSlideshow.winHeight - bouncingSlideshow.speedY) bouncingSlideshow.posY += bouncingSlideshow.speedY; else { bouncingSlideshow.dirY = 'up'; bouncingSlideshow.posY = bouncingSlideshow.winHeight - bouncingSlideshow.pictureHeight; } } moveLayerTo(bouncingSlideshow.layerObj,bouncingSlideshow.posX + getDocScrollLeft(),bouncingSlideshow.posY + getDocScrollTop()); window.setTimeout('moveBouncingLayer();',bouncingSlideshow.frameRate); } window.onresize = getWindowDimensions; window.onload = loadBouncingSlideshow;

Notes

This scripts attempts to preload all images used in the slideshow. If the picture file sizes are too big, the images may not load in time and the slideshow effect will not work properly.

Bouncing Slideshow by Lloyd Hassell

Website: lloydhassell.brinkster.net
Email: lloydhassell@hotmail.com