// load dependent scripts
loadScript('/Specific/basefcts.js');
loadScript('/Functions/Element/Display/Opacity/script.js');
/*
JS files needed:
- basefcts.js
- element opacity
Usage:
-
FadingImage
- ImageFaderTest.js
var fdImage1 = new ImageFader(0, 'ImageFader1_Div1', 'ImageFader1_Img1', 'ImageFader1_Div2', 'ImageFader1_Img2');
fdImage1.Add(new ImageInfo('i/baby_sister_02b.jpg'));
fdImage1.Add(new ImageInfo('i/La_Baby_Sister_16.jpg'));
fdImage1.Add(new ImageInfo('i/paola_rey2.jpg'));
fdImage1.Add(new ImageInfo('i/paola_rey3.jpg'));
fdImage1.Add(new ImageInfo('i/paola13.jpg'));
fdImage1.Add(new ImageInfo('i/paola20.jpg'));
fdImage2.SetFadeDelay(50);
fdImage1.Start();
var fdImage2 = new ImageFader(1, 'ImageFader2_Div1', 'ImageFader2_Img1', 'ImageFader2_Div2', 'ImageFader2_Img2');
fdImage2.Add(new ImageInfo('i/baby_sister_02b.jpg'));
fdImage2.Add(new ImageInfo('i/La_Baby_Sister_16.jpg'));
fdImage2.Add(new ImageInfo('i/paola_rey2.jpg'));
fdImage2.Add(new ImageInfo('i/paola_rey3.jpg'));
fdImage2.Add(new ImageInfo('i/paola13.jpg'));
fdImage2.Add(new ImageInfo('i/paola20.jpg'));
fdImage2.SetFadeDelay(30);
fdImage2.Start();
*/
// Sets the time interval between the images
function SetTimeRotDelay(rotDelay)
{
if ( true == checkInteger(rotDelay) )
{
this.rotDelay = rotDelay;
}
}
// Gets the time interval between the images
function GetTimeRotDelay()
{
return this.rotDelay;
}
// Sets the cicle type of the images
function SetPicRandom(random)
{
this.random = random;
}
// Gets the cicle type of the images
function GetPicRandom()
{
return this.random;
}
// Sets the time fade delay
function SetTimeFadeDelay(fadeDelay)
{
this.fadeDelay = fadeDelay;
}
// Gets the time fade delay
function GetTimeFadeDelay()
{
return this.fadeDelay;
}
// Sets the time fade smoothness
function SetTimeFadeSmoothness(fadeSmoothness)
{
this.fadeSmoothness = fadeSmoothness;
}
// Gets the time fade delay
function GetTimeFadeSmoothness()
{
return this.fadeSmoothness;
}
// Sets the time the picture will stay visible after fading-in is 100%
function SetTimeStayVisible(stayVisible)
{
this.stayVisible = stayVisible;
}
// Gets the time the picture will stay visible after fading-in is 100%
function GetTimeStayVisible()
{
return this.stayVisible;
}
// Sets the delay for the picture to stay visible after opacity has reached to 100
function SetTimeStayVisible(stayVisible)
{
this.stayVisible = stayVisible;
this.remainingVisible = stayVisible;
}
// Gets the delay for the picture to stay visible after opacity has reached to 100
function GetTimeStayVisible()
{
return this.stayVisible;
}
// Adds an image to the array
function AddImage(image)
{
if ( false == checkReference(image) || false == checkString(image.src) )
{
return;
}
this.array.push(image);
}
// returns the element at position index, or null if index is invalid
function GetImageAt(index)
{
if ( false == checkInteger(index) )
{
return null;
}
if ( index < 0 || index >= this.array.length )
{
return null;
}
return this.array[index];
}
// returns the number of the occurrences of the image denoted by imgSrc
function GetImageOccurrences(imgSrc)
{
if ( false == checkString(imgSrc) )
{
return 0;
}
var nrOccur = 0;
for ( var i = 0; i < this.array.length; ++i )
{
if ( this.array[i].src == imgSrc )
{
++nrOccur;
}
}
return nrOccur;
}
// Returns the next index of the image to be shown (only if variable random is false)
function GetNextImageIndex()
{
if ( 0 == this.array.length )
{
return -1;
}
var index = -1;
if ( true == this.random )
{
var dt = new Date();
index = dt.getTime() % this.array.length;
}
else
{
this.curIndex++;
if ( this.curIndex >= this.array.length )
{
this.curIndex = 0;
}
index = this.curIndex;
}
return index;
}
// Called to initialize the object
function OnInitImageFader(firstDivID, firstImgID, secondDivID, secondImgID)
{
if ( true == checkString(firstDivID) )
{
this.firstDivTag = document.getElementById(firstDivID);
setElementOpacity(this.firstDivTag, this.firstOpacity);
}
if ( true == checkString(firstImgID) )
{
this.firstImgTag = document.getElementById(firstImgID);
}
if ( true == checkString(secondDivID) )
{
this.secondDivTag = document.getElementById(secondDivID);
setElementOpacity(this.secondDivTag, this.secondOpacity);
}
if ( true == checkString(secondImgID) )
{
this.secondImgTag = document.getElementById(secondImgID);
}
}
// Global function to rotate
function SneakyFadeImages(objNumber)
{
if ( true == window.sneakyFaderImageRef[objNumber].started )
{
window.sneakyFaderImageRef[objNumber].Fade();
setTimeout("window.SneakyFadeImages(" + objNumber + ")", window.sneakyFaderImageRef[objNumber].GetFadeDelay());
}
}
// Starts fading the pictures
function StartFading()
{
if ( true == this.started )
{
return;
}
if ( 0 == this.array.lenght )
{
return;
}
this.firstImgTag.src = this.array[this.GetNextIndex()].src;
this.secondImgTag.src = this.array[this.GetNextIndex()].src;
if ( false == checkReference(window.sneakyFaderImageRef) )
{
window.sneakyFaderImageRef = new Array();
}
window.sneakyFaderImageRef[this.objNumber] = this;
if ( false == checkReference(window.window.SneakyFadeImages) )
{
window.SneakyFadeImages = SneakyFadeImages;
}
this.started = true;
window.SneakyFadeImages(this.objNumber);
}
// Fades images
function FadeImages()
{
if ( true == this.firstTime )
{
if ( this.remainingVisible > 0 )
{
this.remainingVisible -= this.fadeDelay;
return;
}
else
{
this.firstTime = false;
this.remainingVisible = this.stayVisible;
}
}
if ( true == this.fadeDirection )
{
if ( this.firstOpacity - this.fadeSmoothness < 0 )
{
this.firstOpacity = 0;
this.secondOpacity = 100;
if ( this.remainingVisible == this.stayVisible )
{
this.firstImgTag.src = this.array[this.GetNextIndex()].src;
}
if ( this.remainingVisible > 0 )
{
this.remainingVisible -= this.fadeDelay;
}
else
{
this.remainingVisible = this.stayVisible;
this.fadeDirection = false;
}
}
else
{
this.firstOpacity -= this.fadeSmoothness;
this.secondOpacity += this.fadeSmoothness;
}
}
else
{
if ( this.secondOpacity - this.fadeSmoothness < 0 )
{
this.secondOpacity = 0;
this.firstOpacity = 100;
if ( this.remainingVisible == this.stayVisible )
{
this.secondImgTag.src = this.array[this.GetNextIndex()].src;
}
if ( this.remainingVisible > 0 )
{
this.remainingVisible -= this.fadeDelay;
}
else
{
this.remainingVisible = this.stayVisible;
this.fadeDirection = true;
}
}
else
{
this.secondOpacity -= this.fadeSmoothness;
this.firstOpacity += this.fadeSmoothness;
}
}
setElementOpacity(this.firstDivTag, this.firstOpacity);
setElementOpacity(this.secondDivTag, this.secondOpacity)
}
// function for creating an object
function ImageFader(objNumber, firstDivID, firstImgID, secondDivID, secondImgID)
{
// --private
this.objNumber = objNumber;
this.array = new Array();
this.rotDelay = 1111;
this.random = false;
this.fadeDelay = 50;
this.fadeSmoothness = 2;
this.stayVisible = 2000;
this.curIndex = -1;
this.firstDivTag = null;
this.firstImgTag = null;
this.secondDivTag = null;
this.secondImgTag = null;
this.firstOpacity = 100;
this.secondOpacity = 0;
this.fadeDirection = true;
this.remainingVisible = this.stayVisible;
this.firstTime = true;
this.started = false;
// --public
this.SetRotDelay = SetTimeRotDelay;
this.GetRotDelay = GetTimeRotDelay;
this.SetRandom = SetPicRandom;
this.GetRandom = GetPicRandom;
this.SetFadeDelay = SetTimeFadeDelay;
this.GetFadeDelay = GetTimeFadeDelay;
this.SetFadeSmoothness = SetTimeFadeSmoothness;
this.GetFadeSmoothness = GetTimeFadeSmoothness;
this.SetStayVisible = SetTimeStayVisible;
this.GetStayVisible = GetTimeStayVisible;
this.Add = AddImage;
this.GetAt = GetImageAt;
this.GetOccurrences = GetImageOccurrences;
this.GetNextIndex = GetNextImageIndex;
this.Start = StartFading;
this.Fade = FadeImages;
// --private
this.OnInit = OnInitImageFader;
// call for initialization
this.OnInit(firstDivID, firstImgID, secondDivID, secondImgID);
}