Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rotating images displayed in grid of divs

    Hi, I am quite the amatuer at JavaScript but am trying to bring back an array of say 15 items using C# (this works). Fetch this array using JavaScript (this works) and populate the src attribute of 9 hard coded images, in a grid layout. I then want to rotate these. So for example I want to display images 15,14,13,12,11,10,9,8,7 and then after a couple of seconds 6,5,4,3,2,1,15,14,13 etc etc. I had some help to get where I am, but have tried and tried to complete it with little luck, could anyone help indicate where I'm going wrong, thanks.

    Code:
    <script type="text/javascript">
            function GetImages() {
                PageMethods.GetImages(OnSucceeded, OnFailed);
            }
    
            var pics = null;
            var lastIndexUsed = 0;
            function OnSucceeded(data) {
                pics = data;
                setImages();
                //$
            }
    
            function setImages() {
                for (var i = 0; i < 9; i++) {
                    var x = i;
                    var y = 1; // The multiplyer, so we know how many times we have hit a number divisible by 10 (ie 10,20,30,40,50,60).
                    if (i / (9 * y) == 1) {
                        x = i - (9 * y);
                        y++;
                    }
                    $("#mainContent_imgPhoto" + x.toString()).attr("src", (pics[i].Image));
                    $('#imgTag' + x.toString()).html(pics[i].Tag);
                    lastIndexUsed = i;
    
                    if (lastIndexUsed == pics.Length-1) {
                        lastIndexUsed = 0;
                    }
                }
                //setTimeout("setImages()", 2000);
                //setTimeout("setImages(" + lastIndexUsed + ")", 2000);
            }
    
            function OnFailed(error) {
                alert(error.get_message());
            }
        </script>
    I have 9 divs like this numbered 0 to 8

    Code:
    <div id="tile_0" class="tile" style="height:200px;width:230px;">
                <asp:LinkButton ID="btnViewRec0" runat="server">
                    <asp:Image id="imgPhoto0" runat="server" ImageUrl="~/images/missing.png" style="height:200px;width:230px;" />
                </asp:LinkButton>
                <p id="imgTag0" style="width:210px;">tile_0</p>
            </div>
    This script does populate the first 9 (although images dont display even though the correct src is in there), so my problem is getting it to rotate through the array.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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 {
      position:relative;float:left;margin-Left:5px;margin-Top:5px;border-Width:0px;
    }
    
    /*]]>*/
    </style>
    </head>
    
    <body>
    
     <div id="panel1" class="panel" onmouseover="zxcFadeImagePanel.Pause('panel1');"  onmouseout="zxcFadeImagePanel.Auto('panel1');">
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Image Panel. (16-June-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    
    var zxcFadeImagePanel={
    
     init:function(o){
      var id=o.ID,p=document.getElementById(id),nu=o.Images,srcs=o.SRCArray,ms=o.FadeDuration,a,ms=typeof(ms)=='number'&&ms>100?ms:1000,hold=o.HoldDuration,srt=o.AutoStart,imgs=[],s=o.SequenceDuration,imgs=[],z0=0,z1=0;
      for (;z0<nu;z0++){
       a=document.createElement('A');
       imgs[z0]=document.createElement('IMG');
       a.appendChild(imgs[z0]);
       p.appendChild(a);
       this.links(imgs[z0],srcs,z0);
      }
      zxcFadeImagePanel['zxc'+id]={
       id:id,
       imgs:imgs,
       srcs:srcs,
       lgth:imgs.length-1,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2,
       sms:typeof(s)=='number'?s:ms/100
      }
      if (typeof(srt)=='number'){
       this.Auto(id,srt);
      }
     },
    
     Auto:function(id,ms){
      var oop=this,o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.to=setTimeout(function(){
        o.srcs=oop.shuffle(o.srcs);
        o.cnt=0;
        o.auto=true;
        oop.sequence(o);
       },ms||200);
      }
     },
    
     Pause:function(id){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     sequence:function(o){
      if (o.imgs[o.cnt]){
       var oop=this;
       clearTimeout(o['dly'+o.cnt]);
       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,a,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){
        oop.links(obj,o.srcs,cnt);
        oop.animate(o,obj,0,100,new Date(),o.ms,'dly'+cnt,cnt);
       }
       else if (o.auto&&cnt==o.lgth){
        oop.Auto(o.id,o.hold);
       }
      }
     },
    
     links:function(obj,srcs,cnt){
      obj.src=srcs[cnt][0];
      a=obj.parentNode;
      a.removeAttribute('href');
      if (srcs[cnt][1]){
       a.setAttribute('href',srcs[cnt][1]);
      }
      obj.removeAttribute('title');
      if (srcs[cnt][2]){
       obj.setAttribute('title',srcs[cnt][2]);
      }
     },
    
     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)
     Images:16,             // the number of images to display.                                         (number)
     SRCArray:[             // an array defining the image scrs, hrefs and titles                       (array)
      // field 0 = the file path and name of the image.   (string)
      // field 1 = (optional) the href of the image link. (string, default = no link href)
      // field 2 = (optional) the image title.            (string, default = no image title)
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo1.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo2.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo3.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo4.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo5.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo6.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo7.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo8.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo9.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo10.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo11.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo12.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo13.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo14.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo15.jpg'],
      ['http://dev49.orderstorm.com/wp-content/alem_slide_images/photo16.jpg']
     ],
     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:10,   //(optional) the 'sequence' duration in milli seconds.                      (number, default = FadeDuration/100)
     AutoStart:5000         //(optional) the time before initial squencing the images in milli seconds. (number, default = no initial sequencing)
    });
    
    /*]]>*/
    </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/


  •  

    Posting Permissions

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