Rotating images displayed in grid of divs

jaredalexander · 06-19-2012, 10:35 AM

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.

vwphillips · 06-19-2012, 05:00 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>
<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>