element, positioned off-screen, which'll hold the precache images.
*
*******************************************************************************************/
function createPageElements() {
//Get a reference to the object that'll hold our images
var divSlideShow = document.getElementById('divSlideShow');
//divSlideShow.style.position = 'relative';
//Create two image elements
var img1 = document.createElement('img');
var img2 = document.createElement('img');
img1.setAttribute('id', 'imgSlideShow1');
img2.setAttribute('id', 'imgSlideShow2');
img1.style.position = 'absolute';
img2.style.position = 'absolute';
img1.style.zIndex = 100;
//img1.style.visibility = "hidden";
img2.style.zIndex = 200;
img2.src = getNextPic(); //Queue up the first image
img1.src = getNextPic();
curPicNum --;
//Resize the first image, if enabled
if (STRETCH_IMAGES) {
img2.style.width = divSlideShow.style.width;
img2.style.height = divSlideShow.style.height;
}
divSlideShow.appendChild(img1);
divSlideShow.appendChild(img2);
//setOpacity('100','imgSlideShow2');
//Create a div to hold all the images for pre-caching
var divPreCache = document.createElement('div');
divPreCache.setAttribute('id', 'divPreCache');
divSlideShow.appendChild(divPreCache);
divPreCache.style.position = 'absolute';
divPreCache.style.top = '-9999px'; // off the screen
divPreCache.style.visibility = 'hidden';
}
/*** preCacheImages() **********************************************************************
*
* Takes: nothing
*
* Returns: nothing
*
********************************************************************************************
*
* Creates a new
![]()
element for each image, which starts loading them with the page,
* instead of when it's their turn to be displayed.
*
*******************************************************************************************/
function preCacheImages() {
var newImg;
var divContainer = document.getElementById('divPreCache');
for (var i = 1; i < pics.length; i++)
{
newImg = document.createElement('img');
newImg.setAttribute('width', '1');
newImg.setAttribute('height', '1');
newImg.setAttribute('src', pics[i]);
divContainer.appendChild(newImg);
}
}
/*** showNextPic() *************************************************************************
*
* Takes: imgTopID (string), a DHTML identifier for an
![]()
element on the page.
* imgBottomID (string), a DHTML identifier for an
![]()
element on the page.
*
* Returns: nothing
*
********************************************************************************************
*
* Fades the current picture into the next one
*
*******************************************************************************************/
function showNextPic(imgTopID, imgBottomID) {
if ((curPicNum + 1) < pics.length) {
//NC.Log(curPicNum + '< ' + pics.length);
//Load them backwards -- first thing we'll do is swap 'em.
var imgTop = document.getElementById(imgBottomID);
var imgBottom = document.getElementById(imgTopID);
//Swap 'em; put top image on top
imgTop.style.zIndex = 300;
imgBottom.style.zIndex = 100;
//Load next picture
imgBottom.src = getNextPic();
//Stretch image, if this option is enabled
if (STRETCH_IMAGES) {
var divSlideShow = document.getElementById('divSlideShow');
imgBottom.style.width = divSlideShow.style.width;
imgBottom.style.height = divSlideShow.style.height;
}
//Reset next picture to be visible
// setOpacity(100, imgBottom.id);
clearOpacity(imgBottom.id);
//Fade out top image
fadeImg(imgTop.id, 99, 0, FADE_DURATION*1000);
var timeout = setTimeout("showNextPic('" + imgTop.id + "', '" + imgBottom.id + "')",
ROTATION_INTERVAL*1000);
}
}
/*** showNextPic() *************************************************************************
*
* Takes: nothing. Reads global integer curPicNum
*
* Returns: (string) path to the next picture
*
********************************************************************************************
*
* Increment the number of the current picture. After the last picture, reset to the first.
*
*******************************************************************************************/
function getNextPic() {
if (++curPicNum >= pics.length) {
//curPicNum = 0;
}
return(pics[curPicNum]);
}
////////////////////////////////////////////////////////////////////////////////////////////
//
// Opacity functions. These appear on several websites and forums, so unfortunately I
// don't know the original author. I changed some function and variable names for clarity.
//
////////////////////////////////////////////////////////////////////////////////////////////
/*** fadeImg() *****************************************************************************
*
* Takes: id (string), the DHTML ID of the target
![]()
element to fade
* opacStart (integer), the image's starting opacity, 100 = opaque, 0 = transparent
* opacEnd (integer), the image's ending opacity, 100 = opaque, 0 = transparent
* duration (integer), the total number of milliseconds the fade should take.
*
* Returns: nothing
*
********************************************************************************************
*
* Starts the fade-in or fade-out of the specified image
*
*******************************************************************************************/
function fadeImg(id, opacStart, opacEnd, duration) {
//speed for each frame
var speed = Math.round(duration / 100);
var timer = 0;
//Decides whether to fade in or fade out
//If opacStart and opacEnd are the same, nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("setOpacity(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++) {
setTimeout("setOpacity(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
/*** setOpacity() **************************************************************************
*
* Takes: opacity (integer), how opaque to make image. 100 = opaque, 0 = transparent
* id (string), the DHTML ID of the target
![]()
element whose opacity is changing
*
* Returns: nothing
*
********************************************************************************************
*
* Change opacity of the specified image
*
*******************************************************************************************/
function setOpacity(opacity, id) {
var imgStyle = document.getElementById(id).style;
//CSS3 method; works in Firefox 1.0+, IE 7.0+, Safari 1.2+, Opera 9.0+
imgStyle.opacity = (opacity / 100);
imgStyle.MozOpacity = (opacity / 100); //Netscape 6-7, older Mozilla/Firefox/Phoenix/FireBird
imgStyle.KhtmlOpacity = (opacity / 100); //Konqueror 3.0-3.2, Safari 1.0-1.1
imgStyle.filter = "alpha(opacity=" + opacity + ")"; //IE 4.0-6.0
}
function clearOpacity(id) {
var imgStyle = document.getElementById(id).style;
//CSS3 method; works in Firefox 1.0+, IE 7.0+, Safari 1.2+, Opera 9.0+
imgStyle.opacity = "";
imgStyle.MozOpacity = ""; //Netscape 6-7, older Mozilla/Firefox/Phoenix/FireBird
imgStyle.KhtmlOpacity = ""; //Konqueror 3.0-3.2, Safari 1.0-1.1
imgStyle.filter = ""; //IE 4.0-6.0
}