combining two dhtml scripts

**joewpie** · 07-14-2009, 04:45 PM

Hi,

i have a website where i want to show images with a slideshow javascript i got from this website, and when people click on the images, another javascript should start, the lightbox javascript/css script which shows the enlarged picture.

I am trying to implement the code on this page: http://www.pilotlight.be/referenties.php

I already added rel="lightbox" to the <a href... attribute in the javascript code, and this works but not completely.

The problem i am experiencing: The first time you click on an image of the slideshow, everything works well, but the second time you click, it just opens the image src but not in the lightbox! (Check the website page to see it yourself).

I know quite some about php and stuff but javascript is quite new to me so think of me as a newbie!

Here's the code i'm using:

Code:

<?php include("header.php");
$currentdate=date("Y-n-j");
connect();
$sql="SELECT * FROM PL_affiches WHERE expdate<'".$currentdate."' ORDER BY expdate ASC";
$numberofaff=mysql_num_rows(mysql_query($sql));
$query=mysql_query($sql);
?><html>
<head>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript">
      
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//NEW SET IMAGE PATHS
<?
$currentnum=0;
while($row=mysql_fetch_assoc($query)){
$src=$row["src"]; 
$src="affiches/$src";
print'fadeimages['.$currentnum.']=["'.$src.'", "http://www.pilotlight.be/'.$src.'", ""]';
print'
';
$currentnum++;
}
?>

var fadebgcolor="white"

////NO need to edit beyond here/////////////
//SET IMAGE PATHS. Extend or contract array as needed
//fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
//fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
//fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax

 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" rel="lightbox" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>
</head><?setlocale(LC_ALL, array('Dutch_Netherlands', 'Dutch', 'nl_NL', 'nl', 'nl_NL.ISO8859-1'));
           	 $maanden = array(
                        101 => "Januari",
                        102 => "Februari",
                        103 => "Maart",
                        104 => "April",
                        105 => "Mei",
			106 => "Juni",
                        107 => "Juli",
                        108 => "Augustus",
                        109 => "September",
			110 => "Oktober",
                        111 => "November",
                        112 => "December"
                );

function getm($date){

 $m = substr ("$date", 5, 2);
$newm="1$m";
 return $newm;
}

function getd($date){

 $d = substr ("$date", 8, 2); 
 return $d;
}
function gety($date){

 $y = substr ("$date", 0, 4); 
 return $y;
}

$currentdate=date("Y-n-j");
$sql="SELECT * FROM PL_agenda WHERE date<'".$currentdate."' ORDER BY date ASC";
$query=mysql_query($sql);
$rows=mysql_num_rows($query);
?>
<p align="left">
<table><tr><td width="70%">
(some text here)

<?
echo'<font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="white">';
$contradate=2007;
while($row=mysql_fetch_assoc($query)){
$month=getm($row["date"]);
$monthf=$maanden[$month];
$day=getd($row["date"]);
$year=gety($row["date"]);
$name=$row["name"];
$place=$row["place"];
if($year>$contradate){
$contradate++;
echo"<br><b>$year</b><br>";
}

echo"$day $monthf : $name @ $place<br>";
}
echo'</font><br><br><a href="agenda.php">Binnenkort</a>';
?>





</td><td width="30%"><p align="right">
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 165, 233, 0, 3000, 1, "R")
 
</script>









(and so on...)
<?php include("footer.php");?>

**joewpie** · 07-20-2009, 05:50 PM

*bump* anyone?

**vwphillips** · 07-21-2009, 02:48 PM

Code:

<!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>
<link rel="stylesheet" href="http://www.pilotlight.be/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:relative;width:168px;height:232px;border:solid black 1px;
}

#tst IMG {
  position:absolute;left:0px;top:0px;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
//  parameter 0 = the mode(see Note 2).                                                                     (string)
//  parameter 1 = the unique ID name or element object.                                                     (string or element object)
//  parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
//  parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
//  parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
//  parameter 5 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
//                 field 0 the minimum. (digits)
//                 field 1 the maximum. (digits)
//  parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  The default units(excepting opacity) are 'px'.
//  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  To 'toggle' the effect include '#' in parameter 0.
//           The first call will set the toggle parameters.
//           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
//  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
//           whenever required, say from an onclick/mouseover/out event.
//           The period parameter will be retained unless re-specified.
//  Note 5: parameter 5 is of particular use when re-calling the effect
//          in mid travel to retain an constant rate of progression.
//  Note 6: parameters 2 and 3 must be different values to execute the script.
//

// **** General
//
// Function names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code, about 2.41K with 'bounce' and 'opacity' or 1.97K without is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//

// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
 return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 clearTimeout(this.to);
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.ms=this.mS;
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 this.ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
 this.apply();
 if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Bounce&&this.Bounce[2]>0) this.bounce();
 }
}

zxcBAnimatorOOP.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

zxcBAnimatorOOP.prototype.bounce=function(){
 if (this.Bounce[2]%2==0)
 this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
 this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
 this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function Fade(id,ms,hold){
 this.imgs=[];
 var obj=document.getElementById(id);
 this.a=obj.parentNode;
 var imgs=obj.getElementsByTagName('IMG');
 for (var z0=0;z0<imgs.length;z0++){
  this.imgs.push(imgs[z0]);
  imgs[z0].style.zIndex=0;
  zxcOpacity(imgs[z0],0);
 }
 this.imgs=this.imgs.reverse();
 this.cnt=0;
 zxcOpacity(imgs[this.cnt],100);
 this.ms=ms||1000;
 this.hold=hold||this.ms*2;
}

Fade.prototype.rotate=function(){
 zxcBAnimator('opacity',this.imgs[this.cnt],100,0,this.ms);
 this.imgs[this.cnt].style.zIndex=0;
 this.cnt=++this.cnt%this.imgs.length;
 zxcBAnimator('opacity',this.imgs[this.cnt],0,100,this.ms);
 this.a.href=this.imgs[this.cnt].src;;
 this.imgs[this.cnt].style.zIndex=1;
 var oop=this;
 setTimeout(function(){ oop.rotate(); },this.hold);
}
/*]]>*/
</script>
<script type="text/javascript" src="http://www.pilotlight.be/lightbox.js"></script>
</head>

<body >
<A href="http://www.pilotlight.be/affiches/affiche1.jpg" target=http://www.pilotlight.be/ rel=lightbox>
<div id="tst" >
<IMG src="http://www.pilotlight.be/affiches/affiche1.jpg" border=0>
<IMG src="http://www.pilotlight.be/affiches/affiche2.jpg" border=0>
<IMG src="http://www.pilotlight.be/affiches/affiche3.jpg" border=0>
</div>
</A>
<script  type="text/javascript">
/*<![CDATA[*/
F=new Fade('tst',1000,2000);F.rotate();
/*]]>*/
</script>
</body>
</html>

**joewpie** · 07-22-2009, 10:23 AM

Thanks a lot, it does exactly what i want!

Except for one little thing: How can i specify another link than the image src to an image?
For example, the first image is: http://www.pilotlight.be/affiches/affiche1.jpg but i want it to link to http://www.pilotlight.be/affiches/affiche1B.jpg because the 'B' picture has a higher resolution and it's also bigger.

Can you tell me how to do that with your script?

Thanks in advance,
Arne

**vwphillips** · 07-22-2009, 11:21 AM

Code:

<!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>
<link rel="stylesheet" href="http://www.pilotlight.be/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
/*<![CDATA[*/
#tst {
  position:relative;width:168px;height:232px;border:solid black 1px;
}

#tst IMG {
  position:absolute;left:0px;top:0px;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'.
//
// The element would normally be assigned a unique ID name.
//

// **** Executing the Effect(Script)
//
// The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
// where:
//  parameter 0 = the mode(see Note 2).                                                                     (string)
//  parameter 1 = the unique ID name or element object.                                                     (string or element object)
//  parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
//  parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
//  parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
//  parameter 5 = (optional) to scale the effect time on a specified minimum/maximum.                        (array, see Note 5)
//                 field 0 the minimum. (digits)
//                 field 1 the maximum. (digits)
//  parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
//                 'sin' progression starts fast and ends slow.
//                 'cos' progression starts slow and ends fast.
//
//  Note 1:  The default units(excepting opacity) are 'px'.
//  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
//           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
//  Note 3:  To 'toggle' the effect include '#' in parameter 0.
//           The first call will set the toggle parameters.
//           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
//  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
//           whenever required, say from an onclick/mouseover/out event.
//           The period parameter will be retained unless re-specified.
//  Note 5: parameter 5 is of particular use when re-calling the effect
//          in mid travel to retain an constant rate of progression.
//  Note 6: parameters 2 and 3 must be different values to execute the script.
//

// **** General
//
// Function names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.
//
// The Functional Code, about 2.41K with 'bounce' and 'opacity' or 1.97K without is best as an External JavaScript.
//
// Tested with IE7 and Mozilla FireFox on a PC.
//

// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
 if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
 if (!obj) return;
 var oop=obj[mde.replace(/\W/g,'')+'oop'];
 if (oop){
  if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
  else oop.update([srt,fin],ms,scale,curve);
 }
 else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
 return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
 this.srtfin=[srt,fin];
 this.to=null;
 this.obj=obj;
 this.mde=mde.replace(/\W/g,'');
 this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
 clearTimeout(this.to);
 this.time=ms||this.time||2000;
 this.data=[srtfin[0],srtfin[0],srtfin[1]];
 this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
 this.ms=this.mS;
 this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
 this.ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
 this.apply();
 if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Bounce&&this.Bounce[2]>0) this.bounce();
 }
}

zxcBAnimatorOOP.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
  else zxcOpacity(this.obj,this.data[0]);
 }
}

zxcBAnimatorOOP.prototype.bounce=function(){
 if (this.Bounce[2]%2==0)
 this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
 this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
 this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Ary=['http://www.pilotlight.be/affiches/affiche3.jpg','http://www.pilotlight.be/affiches/affiche1.jpg','http://www.pilotlight.be/affiches/affiche2.jpg'];

function Fade(id,ary,ms,hold){
 this.imgs=[];
 this.ary=ary;
 var obj=document.getElementById(id);
 this.a=obj.parentNode;
 var imgs=obj.getElementsByTagName('IMG');
 for (var z0=0;z0<imgs.length;z0++){
  this.imgs.push(imgs[z0]);
  imgs[z0].style.zIndex=0;
  zxcOpacity(imgs[z0],0);
 }
 this.imgs=this.imgs.reverse();
 this.cnt=0;
 zxcOpacity(imgs[this.cnt],100);
 this.ms=ms||1000;
 this.hold=hold||this.ms*2;
}

Fade.prototype.rotate=function(){
 zxcBAnimator('opacity',this.imgs[this.cnt],100,0,this.ms);
 this.imgs[this.cnt].style.zIndex=0;
 this.cnt=++this.cnt%this.imgs.length;
 zxcBAnimator('opacity',this.imgs[this.cnt],0,100,this.ms);
 this.a.href=this.ary[this.cnt];
 this.imgs[this.cnt].style.zIndex=1;
 var oop=this;
 setTimeout(function(){ oop.rotate(); },this.hold);
}
/*]]>*/
</script>
<script type="text/javascript" src="http://www.pilotlight.be/lightbox.js"></script>
</head>

<body >
<A href="http://www.pilotlight.be/affiches/affiche1.jpg" target=http://www.pilotlight.be/ rel=lightbox>
<div id="tst" >
<IMG src="http://www.pilotlight.be/affiches/affiche1.jpg" border=0>
<IMG src="http://www.pilotlight.be/affiches/affiche2.jpg" border=0>
<IMG src="http://www.pilotlight.be/affiches/affiche3.jpg" border=0>
</div>
</A>
<script  type="text/javascript">
/*<![CDATA[*/
F=new Fade('tst',Ary,1000,2000);F.rotate();
/*]]>*/
</script>
<img src="http://www.pilotlight.be/affiches/affiche1.jpg" /></body>
</html>

Thread: combining two dhtml scripts

Thread Tools

Search Thread

combining two dhtml scripts

Bookmarks

Bookmarks

Posting Permissions