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 9 of 9
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts

    Image rotation not working ?

    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:


    Code:
    <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:

    Code:
    <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.



    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    see change in red

    Code:
    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);
     }
    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/

  • Users who have thanked vwphillips for this post:

    jeddi (06-15-2012)

  • #3
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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.



    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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>
    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/

  • #5
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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.


    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    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)
    });
    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/

  • #7
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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



    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #8
    Senior Coder
    Join Date
    May 2006
    Posts
    1,673
    Thanks
    28
    Thanked 4 Times in 4 Posts
    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

    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    .banner {
      position:relative;left:400px;width:200px;height:300px;border:solid red 1px;
    }
    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
    •