...

View Full Version : JS Slideshow/Gallery help



mat3000000
11-21-2010, 10:13 PM
Here is my code...


var slideshowFadeAnimate = new Array();
var slideshowFadeTimer = new Array();
var slideshowFadeCount = new Array();
var slideshowFadeImages = new Array();


//======================


function slideshowFade(id,cl,imageArray,fadeInter…
{

if(cl)
cl = ' class="'+cl+'"';

document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/><…

var ss = document.getElementById(id+'img');
if(ss.addEventListener)
{
ss.addEventListener('mouseover',function…
ss.addEventListener('mouseout',function(…
}
else if(ss.attachEvent)
{
ss.attachEvent('onmouseover',function(){…
ss.attachEvent('onmouseout',function(){s…
}

slideshowFadeCount[id] = 0;
slideshowFadeImages[id] = imageArray;
slideshowFadeAnimate[id] = 'run';
slideshowFadeTimer[id] = setInterval('slideshowFadeAnimation(\''+…

}


//======================


function slideshowFadeAnimation(id,holdTime)
{
if(slideshowFadeAnimate[id]=='run')
{
var obj = document.getElementById(id+'img');
var opa = slideshowFadeCount[id]%200;

if(opa==0)
{
slideshowFadeAnimate[id] = 'load';
obj.src = slideshowFadeImages[id][Math.floor(slide…
}
else if(opa==100)
{
slideshowFadeAnimate[id] = 'hold';
setTimeout('slideshowFadeRun(\''+id+'\')…
}
else if(opa>100)
opa = 200-opa;

obj.style.opacity = (opa/100).toString();
obj.style.filter = "alpha(opacity="+opa.toString()+")";

slideshowFadeCount[id]++;

if(slideshowFadeCount[id]==(slideshowFad…
slideshowFadeCount[id]=0;
}
}
function slideshowFadeRun(id)
{
slideshowFadeAnimate[id] = 'run';
}


This works good however the image fades out totally and then new image fades in, can anyone tweak the code so one image fades into the next image.

Thanks in advance.

Old Pedant
11-21-2010, 10:26 PM
It's not a "tweak". It's rewrite. In order to fade one image into the next, you have to have *TWO* objects, one on top of the other, that are fading at the same time. That code isn't set up to do anything like that.

It's set up to have multiple faders on the same page, but not at the same spot on the page.

vwphillips
11-22-2010, 09:09 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;width:260px;height:200px;border:solid black 1px;
}
#tst IMG {
width:100%;height:100%;

}

#tst1 {
position:relative;width:260px;height:200px;border:solid black 1px;
}
#tst1 IMG {
width:100%;height:100%;

}

/*]]>*/
</style>

</head>

<body>
<div id="tst">
<img src="http://www.dynamicdrive.com/dynamicindex14/stadium.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex14/winter.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex14/duck.jpg" />
</div>
<input type="button" name="" value="Next" onclick="S1.Next(1);" />
<input type="button" name="" value="Prev" onclick="S1.Next(-1);" />
<input type="button" name="" value="Auto" onclick="S1.Auto();"/>
<input type="button" name="" value="Pause" onclick="S1.Pause();"/>
<input type="button" name="" value="GoTo 0" onclick="S1.GoTo(0);"/>
<input type="button" name="" value="GoTo 1" onclick="S1.GoTo(1);"/>
<input type="button" name="" value="GoTo 2" onclick="S1.GoTo(2);"/>
<div id="tst1">
<img src="http://www.dynamicdrive.com/dynamicindex14/stadium.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex14/winter.jpg" />
<img src="http://www.dynamicdrive.com/dynamicindex14/duck.jpg" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcSS(o){
var parent=document.getElementById(o.ID) // the parent node of the images
var imgs=parent.getElementsByTagName('IMG'); // the images in the parent node, the parent must be position 'relative' in the CSS
this.ary=[]; // create a script instance array to store fade animator instances
for (var z0=0;z0<imgs.length;z0++){ // rotate through the images
imgs[z0].style.position='absolute'; // to allow the images to be placed on top of each other
imgs[z0].style.zIndex=z0>0?'0':'1'; // the first image is on top
imgs[z0].style.left='0px'; // all images have a position left of 0px
imgs[z0].style.top='0px'; // all images have a position top of 0px
this.ary[z0]=new zxcFadeAnimator(imgs[z0],z0>0?0:100); // each field of this.ary contains a new instance for the fade animator with an image as its object
this.ary[z0].opacity(z0>0?0:100); // set the opacity of the top image to 100 and the balance to 0
}
this.cnt=0; // create a script instance counter this.cnt to 0
this.lst=this.ary[0]; // create a script instance object referencing the top image
this.ms=o.Duration||1000; // create a script instance recording the fade duration
this.hold=o.Hold||this.ms*2; // create a script instance recording the automatic image change duration
}

zxcSS.prototype={

// the instance 'GoTO' function
// pass a number of the instance ary field to fade in that image
GoTo:function(nu){
clearTimeout(this.to); // clear the timeout of the instance 'Auto' function
if (this.ary[nu]){ // make sure the instance ary field exists
this.cnt=nu; // set the instance count to the number
this.Next(0); // call the instance 'NEXT' function passing 0 which will not increment the count
}
},

// the instance 'Next' function
// pass 1 or -1 to increment or decrement the intance count
Next:function(ud){
clearTimeout(this.to); // clear the timeout of the instance 'Auto' function
this.lst.obj.style.zIndex='0'; // move the last image to the bottom
this.lst.fade(this.lst.data[0],0,this.ms); // fade out the last image
this.cnt+=ud; // increment or decrement the intance count
this.cnt=this.cnt<0?this.ary.length-1:this.cnt>=this.ary.length?0:this.cnt; // if the count is less than 0 set it to the maximum, if grater then the maximum set it to 0
this.lst=this.ary[this.cnt]; // change the instance lst to the new image
this.lst.obj.style.zIndex='1'; // move the last image to the top
this.lst.fade(this.lst.data[0],100,this.ms); // fade in the last image
},

// the instance 'Auto' function
// to automatically change the images
Auto:function(){
clearTimeout(this.to); // clear the timeout of the instance 'Auto' function
var oop=this; // assign the instance to a local vaiable to allow the setTimeout to function
this.Next(1); // call the instance 'Next' function passing 1 to increment the count
this.to=setTimeout(function(){ oop.Auto(); },this.hold+this.ms); // recall 'Auto' after the 'hold' plus 'fade' duration
},

Pause:function(){
clearTimeout(this.to);
}

}


// Opacity Fade Animator
function zxcFadeAnimator(obj,srt){
this.obj=obj; // the instance object
this.data=[srt]; // and array the current, start and finish value of opacity
this.to=null;
}

zxcFadeAnimator.prototype={

// instace function 'fade'
// to start a fade in or fade out
// parameter 0 = the fade start value. (digits)
// parameter 1 = the fade finish value. (digits)
// parameter 0 = the fade duration. (digits)
fade:function(srt,fin,ms){
clearTimeout(this.to); // stop the instance setTimeout
this.data=[srt,srt,fin]; // assign the current, start and finish value of opacity
this.ms=ms*1; // the duration of the effect
this.srt=new Date().getTime(); // the start time of the change
this.change(); // start the change
},

// instance function 'change'
// to control the change of fade in or fade out
change:function(){
var oop=this; // assign the instance to a local vaiable to allow the setTimeout to function
var ms=new Date().getTime()-this.srt; // the current time minus the start time
this.data[0]=(this.data[2]-this.data[1])/this.ms*ms+this.data[1]; // increment the current value dependent on the start and finish values and elapsed time
this.opacity(this.data[0]); // set the opacity to the current value
if (ms<this.ms){ // if the elapsed time is less than the 'fade duration' recall function opac
this.to=setTimeout(function(){oop.change()},10);
}
else {
this.data[0]=this.data[2]; // set the current value to the finish value
this.opacity(this.data[0]); // set the opacity to the current value(finish value)
}
},

// instance function 'opacacity'
// to control the change of fade in or fade out
opacity:function(opc){
opc=opc<0?0:opc>100?100:opc;
var obj=this.obj;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


}


/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/

// generatate a new instance of the script.
var S1=new zxcSS({
ID:'tst', // the unique ID name of the images parent node. (string)
Duration:1000, // (optional) the duration of the fade effect in milliseconds. (digits, default = 1000)
Hold:2000 // (optional) the hold duration of automatic changing of images. (digits, default = Duration*2)
});

var S2=new zxcSS({
ID:'tst1', // the unique ID name of the images parent node. (string)
Duration:500, // (optional) the duration of the fade effect in milliseconds. (digits, default = 1000)
Hold:2000 // (optional) the hold duration of automatic changing of images. (digits, default = Duration*2)
});

S2.Auto();

/*]]>*/
</script>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum