Image rotation not working ?

[jeddi]

Hi,

I have my image rotation working fine in my main website
here: http://mobi6.net/

You see the iPhone image changes every 2 seconds


But in my "agent" website which is in a directory, the script does not work.

The image displayed just stays on the first image.
http://mobi6.net/chrisgaynor/


The script in both cases is the same:

<script type="text/javascript">
var picPaths = [
'http://mobi6.net/images/screen1.png',
'http://mobi6.net/images/screen2.png',
'http://mobi6.net/images/screen3.png',
'http://mobi6.net/images/screen4.png',
'http://mobi6.net/images/screen5.png'
];

var step = 5;  //pixels
var speed = 6; //milliseconds
var slidePause = 4000; //milliseconds
var curPos = 0;
var timer;
function slideImages(){
    curPos -= step;
    if(curPos < -picWidth){ //finished moving up 1 image
        clearTimeout(timer);
        reOrderImgs();
        imgContainerO.style.left = curPos +'px';
		} 
	else { //continue sliding up
       imgContainerO.style.left = curPos +'px';
       timer = setTimeout(slideImages,speed);
     }
 }
function reOrderImgs(){
  var childElems = imgContainerO.childNodes; //first child is a text node
  for(i=0; i < childElems.length; i++){
	if(childElems[i].nodeName.toLowerCase() == 'img'){
        var firstImgO = childElems[i];
        i = childElems.length;
        }
	}
imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
curPos = 0;
setTimeout(slideImages,slidePause);
}
 window.onload=function(){
 preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
     //preload the images
  picsO = new Array();
  for(i=0; i < preloadedImgs.length; i++){
      picsO[i] = new Image();
      picsO[i].src = preloadedImgs[i].src;
      }
picWidth = picsO[0].width;
picHeight = picsO[0].height;
bannerO = document.getElementById('banner');
imgContainerO = document.getElementById('imgContainer');
imgContainerO.style.width = picWidth*picsO.length+'px';
for(i=0; i < picsO.length; i++){
   var newImg = document.createElement('img');
   newImg.id = 'img_'+(i+1);
   newImg.setAttribute('src',picsO[i].src);
   imgContainerO.appendChild(newImg);
    }
bannerO.style.height = picHeight+'px';
bannerO.style.width = picsO[0].width+'px';
bannerO.style.display = 'block';
document.body.removeChild(document.getElementById('preloadedPics'));
setTimeout(slideImages,500);
 }
</script>

And this is the "body" script:

<div id="preloadedPics" style="display: none"></div>
<script type="text/javascript">
  for(i=0; i < picPaths.length; i++){
     var newImg = document.createElement('img');
     newImg.src = picPaths[i];
     document.getElementById('preloadedPics').appendChild(newImg);
  }
</script>

As you can see the images references are absolute not relative
so I expected it to work fine.

Can anyone see why the script does not run in the directory ?


Thanks.



.

[vwphillips]

see change in red

var picPaths = [
'http://mobi6.net/images/screen1.png',
'http://mobi6.net/images/screen2.png',
'http://mobi6.net/images/screen3.png',
'http://mobi6.net/images/screen4.png',
'http://mobi6.net/images/screen5.png'
];

var step = 5;  //pixels
var speed = 6; //milliseconds
var slidePause = 4000; //milliseconds
var curPos = 0;
var timer;
function slideImages(){
    curPos -= step;
    if(curPos < -picWidth){ //finished moving up 1 image
        clearTimeout(timer);
        reOrderImgs();
        imgContainerO.style.left = curPos +'px';
		}
	else { //continue sliding up
       imgContainerO.style.left = curPos +'px';
       timer = setTimeout(slideImages,speed);
     }
 }
function reOrderImgs(){
  var childElems = imgContainerO.childNodes; //first child is a text node
  for(i=0; i < childElems.length; i++){
	if(childElems[i].nodeName.toLowerCase() == 'img'){
        var firstImgO = childElems[i];
        i = childElems.length;
        }
	}
imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
curPos = 0;
setTimeout(slideImages,slidePause);
}
 window.onload=function(){
 preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
     //preload the images
  picsO = new Array();
  for(i=0; i < preloadedImgs.length; i++){
      picsO[i] = new Image();
      picsO[i].src = preloadedImgs[i].src;
      }
picWidth = picsO[0].width;
picHeight = picsO[0].height;
bannerO = document.getElementById('banner');
imgContainerO = document.getElementById('imgContainer');
imgContainerO.style.width = picWidth*picsO.length+'px';
for(i=0; i < picsO.length; i++){
   var newImg = document.createElement('img');
   newImg.id = 'img_'+(i+1);
   newImg.setAttribute('src',picsO[i].src);
   imgContainerO.appendChild(newImg);
    }
bannerO.style.height = picHeight+'px';
bannerO.style.width = picsO[0].width+'px';
bannerO.style.display = 'block';
if (document.getElementById('preloadedPics')){
 document.getElementById('preloadedPics').parentNode.removeChild(document.getElementById('preloadedPics'));
}
setTimeout(slideImages,500);
 }

[jeddi]

WOW

Thanks - it works

Thank you for going to the trouble of looking at the code for me.

And a big THANK YOU to everyone who has helped me and
others on this forum.



.

[vwphillips]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<style type="text/css">
<!--
.banner {
  position:relative;left:400px;width:200px;height:300px;border:solid red 1px;
}

-->
</style>

<script  type="text/javascript">
<!--
// Image Slider (15-June-2012)
// by vic Phillips - http://www.vicsjavascripts.org.uk/


var zxcImageSlider={

 GoTo:function(id,nu){
  var o=this['zxc'+id];
  if (o&&o.ary[nu]&&nu!=o.cnt&&o.lgth){
   this.rotate(o,nu);
  }
 },

 Next:function(id,ud){
  var o=this['zxc'+id];
  if (o&&o.lgth){
   o.ud=typeof(ud)=='number'&&ud<0?-1:1;
   this.rotate(o,o.cnt+o.ud);
  }
 },

 Auto:function(id,ms){
  var oop=this,o=this['zxc'+id];
  if (o&&o.lgth){
   o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
  }
 },

 Pause:function(id){
  var o=this['zxc'+id];
  if (o&&o.lgth){
   clearTimeout(o.to);
   o.auto=false;
  }
 },

 init:function(o){
  var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?'top':'left',id=o.ID,p=document.getElementById(id),src=o.SRCArray;
  if (p&&typeof(src)=='object'&&src.constructor==Array){
   var slide=p.getElementsByTagName('DIV')[0]||document.createElement('DIV'),a=document.createElement('A'),w=this.int(p,'width'),h=this.int(p,'height'),img=slide.getElementsByTagName('IMG')[0]||document.createElement('IMG'),ms=o.SlideDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.Hold,ld=o.PreloadDuration,srt=o.AutoStart,ud=o.Direction,ary=[],z0=0;
   p.style.overflow='hidden';
   slide.style.position='absolute',
   slide.style.left='0px';
   slide.style.top='0px';
   slide.appendChild(a);
   img.src=src[0][0];
   img.style.position='absolute',
   img.style.left='0px';
   img.style.top='0px';
   img.style.width=w+'px';
   img.style.height=h+'px';
   a.appendChild(img);
   img=img.cloneNode(true);
   img.style[mde]=(mde=='left'?w:h)+'px';
   a.appendChild(img);
   for (;z0<src.length;z0++){
    img=new Image();
    img.src=src[z0][0];
    ary[z0]=[src[z0],img];
   }
   this['zxc'+o.ID]={
    p:p,
    id:id,
    mde:mde,
    slide:slide,
    a:a,
    ary:ary,
    preload:typeof(ld)=='number'?ld:5000,
    ms:ms,
    srt:typeof(srt)=='number'?srt:false,
    sz:mde=='left'?-w:-h,
    hold:typeof(hold)=='number'?hold:ms*2,
    ud:typeof(ud)=='number'&&ud<0?-1:1,
    cnt:0
   }
   this.load(this['zxc'+o.ID],new Date());
  }
 },

 load:function(o,d){
  for (var oop=this,z0=0;z0<o.ary.length;z0++){
   if (o.ary[z0][1].width<40){
    if (new Date()-d>o.preload){
     o.ary.splice(z0,1);
    }
    return setTimeout(function(){ oop.load(o,d); },100);
   }
  }
  oop.ready(o);
 },

 ready:function(o){
  o.lgth=o.ary.length-1;
  o.p.appendChild(o.slide);
  o.imgs=o.slide.getElementsByTagName('IMG'),
  o.imgs[0].src=o.ary[0][1].src;
  o.imgs[1].src=o.ary[0][1].src;
  this.links(o,0);
  if (o.srt!==false){
   this.Auto(o.id,o.srt);
  }
 },

 rotate:function(o,nu){
  this.Pause(o.id);
  var cnt=typeof(nu)=='number'?nu:o.cnt+o.ud;
  cnt=cnt<0?o.lgth:cnt>o.lgth?0:cnt;
  o.cnt=cnt
  o.auto=nu===true;
  o.imgs[o.ud>0?1:0].src=o.ary[cnt][1].src;
  o.slide.style[o.mde]=(o.ud>0?0:o.sz)+'px';
  this.links(o,cnt);
  this.animate(o,o.mde,o.slide,(o.ud>0?0:o.sz),(o.ud>0?o.sz:0),new Date(),o.ms,'dly');
 },

 links:function(o,nu){
  o.a.removeAttribute('href');
  o.slide.removeAttribute('title');
  if (o.ary[nu][0][1]){
   o.a.href=o.ary[nu][0][1];
  }
  if (o.ary[nu][0][2]){
   o.slide.title=o.ary[nu][0][2];
  }
 },

 animate:function(o,mde,obj,f,t,srt,mS,to){
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style[mde]=now+'px';
  }
  if (ms<mS){
   o[to]=setTimeout(function(){ oop.animate(o,mde,obj,f,t,srt,mS,to); },10);
  }
  else {
   obj.style[mde]=t+'px';
   o.imgs[o.ud>0?0:1].src=o.imgs[o.ud>0?1:0].src;
   if (o.auto){
    this.Auto(o.id,o.hold);
   }
  }
 },

 int:function(o,p){
  return parseInt(this.style(o,p));
 },

 style:function(o,p){
  if (o.currentStyle){
   return o.currentStyle[p.replace(/-/g,'')];
  }
  return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
 }


}


//-->
</script>

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

function Init(){

zxcImageSlider.init({
 ID:'banner',          // the unique ID name of the parent  DIV.                          (string)
 SRCArray:[            // an array defining the file path and name of the images          (array)
  // field 0 =  the file path and name of the image. (string)
  // field 1 =  the image href.                      (string)
  // field 2 =  the image title.                     (string)
  ['http://mobi6.net/images/screen1.png','http://www.vicsjavascripts.org.uk/','Image 1'],
  ['http://mobi6.net/images/screen2.png'],
  ['http://mobi6.net/images/screen3.png'],
  ['http://mobi6.net/images/screen4.png'],
  ['http://mobi6.net/images/screen5.png']
 ],
 Mode:'Horizontal',    //(optional) the mode of execution, 'Horizontal' or 'Vertical'.    (number, default = 'Horizontal')
 PreloadDuration:5000, //(optional) the time allower to load images in milliseconds.      (number, default = 5000)
 Direction:1,          //(optional) the slide direction, >0 = anti-clock, <0 = clockwise. (number, default = 1)
 SlideDuration:1000,   //(optional) the slide duration in milliseconds.                   (number, default = 1000)
 AutoStart:1000,      //(optional) start auto rotation after milliseconds.                (number, default = no auto start)
 Hold:2000             //(optional) the slide hold duration in milliseconds.              (number, default = SlideDuration*2)
});

zxcImageSlider.init({
 ID:'banner2',
 SRCArray:[
  ['http://mobi6.net/images/screen1.png'],
  ['http://mobi6.net/images/screen2.png'],
  ['http://mobi6.net/badimage.png'],
  ['http://mobi6.net/images/screen5.png']
 ],
 Mode:'Vertical',
 AutoStart:1000
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}

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

<body>

  <input type="button" name="" value="GoTo 0" onmouseup="zxcImageSlider.GoTo('banner',0);">
  <input type="button" name="" value="GoTo 1" onmouseup="zxcImageSlider.GoTo('banner',1);">
  <input type="button" name="" value="GoTo 2" onmouseup="zxcImageSlider.GoTo('banner',2);">
  <input type="button" name="" value="GoTo 3" onmouseup="zxcImageSlider.GoTo('banner',3);">
  <input type="button" name="" value="GoTo 4" onmouseup="zxcImageSlider.GoTo('banner',4);">
  <input type="button" name="" value="Next" onmouseup="zxcImageSlider.Next('banner',1);">
  <input type="button" name="" value="Back" onmouseup="zxcImageSlider.Next('banner',-1);">

  <div id="banner" class="banner" onmouseover="zxcImageSlider.Pause('banner');" onmouseout="zxcImageSlider.Auto('banner');" >
   <div><img src="http://mobi6.net/images/screen1.png"></div>
  </div>

  <div id="banner2" class="banner" onmouseover="zxcImageSlider.Pause('banner2');" onmouseout="zxcImageSlider.Auto('banner2');" >
  </div>


</body>

</html>

[jeddi]

Hi again,

Is it possible to add a link to the images in the code above ?
That would be a different link for each of the images.

I have tried to add it in a couple of places without success.

Thanks.


.

[vwphillips]

zxcImageSlider.init({
 ID:'banner',          // the unique ID name of the parent  DIV.                          (string)
 SRCArray:[            // an array defining the file path and name of the images          (array)
  // field 0 =  the file path and name of the image. (string)
  // field 1 =  the image href.                      (string)
  // field 2 =  the image title.                     (string)
  ['http://mobi6.net/images/screen1.png','http://www.vicsjavascripts.org.uk/','Image 1'],
  ['http://mobi6.net/images/screen2.png'],
  ['http://mobi6.net/images/screen3.png'],
  ['http://mobi6.net/images/screen4.png'],
  ['http://mobi6.net/images/screen5.png']
 ],
 Mode:'Horizontal',    //(optional) the mode of execution, 'Horizontal' or 'Vertical'.    (number, default = 'Horizontal')
 PreloadDuration:5000, //(optional) the time allower to load images in milliseconds.      (number, default = 5000)
 Direction:1,          //(optional) the slide direction, >0 = anti-clock, <0 = clockwise. (number, default = 1)
 SlideDuration:1000,   //(optional) the slide duration in milliseconds.                   (number, default = 1000)
 AutoStart:1000,      //(optional) start auto rotation after milliseconds.                (number, default = no auto start)
 Hold:2000             //(optional) the slide hold duration in milliseconds.              (number, default = SlideDuration*2)
});

[jeddi]

Hey Vic,

Nice piece of code,
why is your link not working ?

What happened to your website ?

http://www.vicsjavascripts.org.uk/

I get :
Oops! Google Chrome could not find www.vicsjavascripts.org.uk



.

[jeddi]

Hi Vic,

Where in your script does the height and width come from ?

If I want to change the dimensions of those blocks where do I
change the script ?

Thanks

.

[vwphillips]

.banner {
  position:relative;left:400px;width:200px;height:300px;border:solid red 1px;
}