www.webdeveloper.com
Results 1 to 2 of 2

Thread: Slideshow Animation help

  1. #1
    Join Date
    Jun 2012
    Posts
    1

    Slideshow Animation help

    I am building a slideshow you can see <a href="http://dev49.orderstorm.com/slideshow/">here</a>[/HTML] in the content section of the Wordpress dev site. My super novice Javascript doesn't want to cooperate with Wordpress, resulting in me not being able to give my client exactly what they want.

    My question is:

    Is there a simple way to make the 16 images on the 4X4 grid trade places? I seem to make everything more complicated that it needs to be. I had each image on the grid set to a separate imgArray with all 16 images inside, and spent about 4 hours trying to get the sequence and timing right so no image would show up twice.

    I have realized I don't really need a solution but a nudge in the right direction.
    Any input or suggestions would be greatly appreciated.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    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>
    <style type="text/css">
    /*<![CDATA[*/
    
    .panel {
      position:relative;width:900px;height:610px;border:solid red 1px;
    }
    
    .panel IMG {
      float:left;margin-Left:5px;margin-Top:5px;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    
     <div id="panel1" class="panel" >
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo1.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo2.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo3.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo4.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo5.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo6.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo7.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo8.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo9.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo10.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo11.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo12.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo13.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo14.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo15.jpg" />
      <img src="http://dev49.orderstorm.com/wp-content/alem_slide_images/photo16.jpg" />
    </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Image Panel. (126-June-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeImagePanel={
    
     init:function(o){
      var p=document.getElementById(o.ID),clds=p.getElementsByTagName('IMG'),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.HoldDurationimgs=[],s=o.SequenceDuration,imgs=[],srcs=[],obj,z0=0;
      for (;z0<clds.length;z0++){
       imgs[z0]=clds[z0];
       srcs[z0]=clds[z0].src;
      }
      obj={
       imgs:imgs,
       srcs:srcs,
       lgth:imgs.length-1,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2,
       sms:typeof(s)=='number'?s:ms/2
      }
      this.rotate(obj,o.hold);
     },
    
     rotate:function(o,ms){
      var oop=this;
      o.to=setTimeout(function(){
       o.imgs=oop.shuffle(o.imgs);
       o.cnt=0;
       oop.sequence(o);
      },ms||o.hold);
     },
    
     sequence:function(o){
      if (o.imgs[o.cnt]){
       var oop=this;
       oop.animate(o,o.imgs[o.cnt],100,0,new Date(),o.ms,'dly'+o.cnt,o.cnt);
       o.cnt++
       setTimeout(function(){  oop.sequence(o); },o.sms);
      }
     },
    
     animate:function(o,obj,f,t,srt,mS,to,cnt){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f,p;
      if (isFinite(now)){
       obj.style.filter='alpha(opacity='+now+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
      }
      if (ms<mS){
       o[to]=setTimeout(function(){ oop.animate(o,obj,f,t,srt,mS,to,cnt); },10);
      }
      else {
       if (t==0){
        obj.src=o.srcs[cnt];
        oop.animate(o,obj,0,100,new Date(),o.ms,'dly'+cnt,cnt);
       }
       else if (cnt==o.lgth){
        oop.rotate(o,o.hold);
       }
      }
     },
    
     shuffle:function(ary){
      for (var r,t,z0=0;z0<ary.length;z0++){
       r=Math.floor(Math.random()*ary.length);
       t=ary[z0];
       ary[z0]=ary[r];
       ary[r]=t;
      }
      return ary;
     }
    
    }
    
    zxcFadeImagePanel.init({
     ID:'panel1',           // the unique ID name of the parent DIV.               (string)
     FadeDuration:1000,     //(optional) the fade duration in milli seconds.       (number, default = 1000)
     HoldDutation:4000,     //(optional) the 'hold' duration in milli seconds.     (number, default = FadeDuration*2)
     SequenceDuration:500   //(optional) the 'sequence' duration in milli seconds. (number, default = FadeDuration/2)
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles