Flexi Slideshow -- Need more than one slideshow per page (with different images)

**CookieMonster** · 02-05-2014, 12:57 AM

1) Script Title: Flexi Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...flexislide.htm

3) Describe problem: I'm sure this is really simple....How do I put more then one of these slideshows on a page? I need a few of them on the same webpage, but each one needs to flip different photos. Thanks.

**vwphillips** · 02-05-2014, 02:51 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>
<script type="text/javascript">
/*<![CDATA[*/

var zxcSS={

 init:function(o){
  var id=o.ID,ary=o.ImageArray,ms=o.Delay,p=document.getElementById(id),i,z0=0;
  if (p&&ary instanceof Array){
   o.ary=[]
   for (;z0<ary.length;z0++){
    if (ary[z0]&&ary[z0][0]&&typeof(ary[z0][0])=='string'){
     i=new Image();
     i.src=ary[z0][0]
     o.ary.push([i,ary[z0][1],ary[z0][2]]);
    }
   }
   o.a=document.createElement('A');
   o.i=document.createElement('IMG');
   o.i.style.borderWidth='0px';
   o.c=document.createElement('DIV');
   o.a.appendChild(o.i);
   p.appendChild(o.a);
   p.appendChild(o.c);
   o.n=0;
   o.ms=typeof(ms)=='number'&&ms>100?ms:4000;
   this.swap(o);
  }
 },

 swap:function(o){
  var oop=this;
  o.n=o.ary[o.n]?o.n:0;
  o.i.src=o.ary[o.n][0].src;
  o.a.removeAttribute('href');
  o.ary[o.n][1]?o.a.href=o.ary[o.n][1]:null;
  o.c.innerHTML=o.ary[o.n][2]||'';
  o.to=setTimeout(function(){ o.n=(o.n+1)%o.ary.length; oop.swap(o); },o.ms);
 }

}

/*]]>*/
</script></head>

<body>

<div id="tst" style="width:200px;height:220px;text-Align:center;border:solid red 1px;" ></div>

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


zxcSS.init({
 ID:'tst',
 ImageArray:[
  ['http://www.vicsjavascripts.org/StdImages/1.gif','myURL.htm','Image 1'],
  ['http://www.vicsjavascripts.org/StdImages/2.gif'],
  ['http://www.vicsjavascripts.org/StdImages/3.gif']
 ],
 Delay:2000
});
/*]]>*/
</script>
<br />

<div id="tst2" style="width:200px;height:220px;text-Align:center;border:solid red 1px;" ></div>

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


zxcSS.init({
 ID:'tst2',
 ImageArray:[
  ['http://www.vicsjavascripts.org/StdImages/4.gif','myURL.htm','Image 4'],
  ['http://www.vicsjavascripts.org/StdImages/5.gif'],
  ['http://www.vicsjavascripts.org/StdImages/6.gif'],
  ['http://www.vicsjavascripts.org/StdImages/7.gif']
 ],
 Delay:3000
});
/*]]>*/
</script>
</body>

</html>