Fading images in Javascript

CicleImatges()

Source code:

// Copyright 2009 Rubén Berenguel

// ruben /at/ maia /dot/ ub /dot/ es

// This program is free software: you can redistribute it and/or
// modify it under the terms of the GNU General Public License as
// published by the Free Software Foundation, either version 3 of
// the License, or (at your option) any later version.

// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.

// You should have received a copy of the GNU General Public
// License along with this program. If not, see
// <http://www.gnu.org/licenses/>.

// Variable initialization: NumImatges is the number of images to be
// shown

var IndexActual=0
var ImatgeActual=0
var NumImatges=3
var IndexAnterior=0

// Set of image files to be used.

var ImatgesAtzar=new Array()

ImatgesAtzar[0]=“http://lh3.ggpht.com/_f3d3llNlZKQ/RlISOebv9mI/AAAAAAAAADc/coFYsCFe4wU/s512/test1.jpg”
ImatgesAtzar[1]=“http://lh5.ggpht.com/_f3d3llNlZKQ/RlXwuObv9qI/AAAAAAAAAD8/PKALGDJPH50/s512/test4-sph-pl-mc-r-10min.jpg”
ImatgesAtzar[2]=“http://lh4.ggpht.com/_f3d3llNlZKQ/RltJlebv9rI/AAAAAAAAAEE/08_sLlO40f4/9%20%2810%20min%29.jpg”
ImatgesAtzar[3]=“http://lh6.ggpht.com/_f3d3llNlZKQ/RlWTgebv9pI/AAAAAAAAAD0/cDNJ1ZJn5og/s512/test-sph-mc-r.jpg”
ImatgesAtzar[3]=“http://lh6.ggpht.com/_f3d3llNlZKQ/R17DJl5dkjI/AAAAAAAAAM0/SRI3QHh4zfg/s720/SketchBegetLlapis.jpg”
ImatgesAtzar[4]=“http://lh4.ggpht.com/_f3d3llNlZKQ/Sap0KWEYdwI/AAAAAAAAAwg/c5zGUKxY2Yg/s512/BigRabbitScaled.jpg”
ImatgesAtzar[5]=“http://lh6.ggpht.com/_f3d3llNlZKQ/SobwVfFCmLI/AAAAAAAABSI/piL0IbmRNGg/s512/BWLavaurs13.jpg”
ImatgesAtzar[6]=“http://lh3.ggpht.com/_f3d3llNlZKQ/Smgc3HO6ydI/AAAAAAAABNM/e5n1j-9xuAY/s640/Butterfly.jpg”
ImatgesAtzar[7]=“http://lh3.ggpht.com/_f3d3llNlZKQ/Sjk0uHW5X9I/AAAAAAAAA-g/vKnK_Wl7_as/s512/spheres.jpg”

// Set of identifiers for the html code

var IdImatges=new Array()

IdImatges[0]=“idImatge0”;
IdImatges[1]=“idImatge1”;
IdImatges[2]=“idImatge2”;
// IdImatges[3]=“idImatge3”;
// IdImatges[4]=“idImatge4”;
// IdImatges[5]=“idImatge5”;

// Preloading all images in a new array

PreCarrega=new Array()

var MatriuNumImatges= new Array()

for (n=0;n<ImatgesAtzar.length;n++)
{
PreCarrega[n]=new Image()
PreCarrega[n].src=ImatgesAtzar[n]
}

// This resets the “renew” image counters

for(n=0;n<NumImatges;n++){MatriuNumImatges[n]=-3;}

// And this prefills the image list, without repeating images

for(n=0;n<NumImatges;n++){
do{
Potser=Math.floor(Math.random()*(ImatgesAtzar.length));
Potser=(Potser>=ImatgesAtzar.length)?Potser-1:Potser;
}while(Discrimina(Potser,-3, MatriuNumImatges));
MatriuNumImatges[n]=Potser;
}

function Discrimina(Actual, Anterior, Matriu)
{
// This function checks whether a new random image is suitable for
// a next step: It is if it is not already in the matrix.

if(Actual==Anterior){ return true;}
for(i=0;i<Matriu.length;i++){
if(Actual==Matriu[i])
{return true;}
}
return false;
}

function SetOpacitat(objId, opacitat)
{
// This function sets the opacity of the image element, hopefully
// in several browsers

obj=document.getElementById(objId)
if(obj==null){return;}
opacitat = (opacitat == 100)?99.999:opacitat;

obj.style.filter = “alpha(opacity:"+opacitat+")";

obj.style.KHTMLOpacity = opacitat/100;

obj.style.MozOpacity = opacitat/100;

obj.style.opacity = opacitat/100;
}

function fadeIn(obj,opacitat)
{
// Fade in an image. The speed can be modified later, but not as a
// parameter. Change “7” to suit your tastes (it is the percentage
// step)

SetOpacitat(obj, opacitat);
if (opacitat < 100) {
opacitat += 2
window.setTimeout(“fadeIn('"+obj+"',"+opacitat+")”, 7);
}
}

function fadeOut(obj,opacitat)
{
// Fade out an image. The speed can be modified later, but not as
// a parameter. Change “7” to suit your tastes (it is the
// percentage step)

if (opacitat > 0) {
SetOpacitat(obj, opacitat);
opacitat -= 2;
window.setTimeout(“fadeOut('"+obj+"',"+opacitat+")”, 7);
}
}

function initImatge(imatgeId)
{
// Fade in an image on load.

SetOpacitat(imatgeId, 0);
fadeIn(imatgeId,0);
}

// This part of the code writes the starting image set html

// document.write('

// And the following function will cycle them

function CicleImatges()
{
do{
IndexActual=Math.floor(Math.random()*(MatriuNumImatges.length))
IndexActual=(IndexActual>=MatriuNumImatges.length)?IndexActual-1:IndexActual;
}while(IndexActual==IndexAnterior);
IndexAnterior=IndexActual;
ImatgeAnterior=MatriuNumImatges[IndexActual];
do{
ImatgeActual=Math.floor(Math.random()*(ImatgesAtzar.length))
ImatgeActual=(ImatgeActual>=ImatgesAtzar.length)?ImatgeActual-1:ImatgeActual;
}while(Discrimina(ImatgeActual,ImatgeAnterior, MatriuNumImatges));
MatriuNumImatges[IndexActual]=ImatgeActual;
// ActualIndex now contains the index of the image to be changed,
// which won’t be the same that changed “before”. ImatgeActual
// contains the index of the new, and different, image.
window.setTimeout(“Aux1('"+IdImatges[IndexActual]+"',"+ImatgeActual+")",1300)

}

// Now comes a tricky part with counters… The easiest way was to
// link one to another to keep the process going. Change the last
// parameter to set the timings

function Aux1(Id, Actual)
{
fadeOut(Id,100)
window.setTimeout(“Aux2('"+Id+"',"+Actual+")",1500)
}

function Aux2(Id, Actual)
{
elem=document.getElementById(Id);
if(elem==null){Aux3(Id);}
elem.src=ImatgesAtzar[Actual];
Aux3(Id)
}
function Aux3(Id)
{
initImatge(Id)
window.setTimeout(“AuxiliarCicleImatges()",1500);
}

function AuxiliarCicleImatges()
{
window.setTimeout(“CicleImatges()",1500)
}

CicleImatges()

Related posts:ParseList(ScrambleList(Relateds(Programming)),15)

• Blog
• Programming
• How-to