Web Analytics Made Easy -
StatCounter JCarousel problem - advice very much welcomed - CodingForum

Announcement

Collapse
No announcement yet.

JCarousel problem - advice very much welcomed

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • JCarousel problem - advice very much welcomed

    Hi all,

    I have been looking at the JCarousel at http://sorgalla.com/projects/jcarous...ic_simple.html

    basically I want to use this carousel but in a way that navigation lists are presented instead of the images so instead of each image being displayed ther would maybe be a list of 5 links, I have a total of 20 links which i want to be able to slide when the left or right arrows are selected.

    Can anyone help me achieve this or give me some advice on how to do this?

    Thanks in advance!!

    Kyle
    www.kylehouston.com

  • #2
    in principle

    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[*/
    
    #tst{
     position:relative;overflow:hidden;left:0px;width:200px;height:50px;border:solid red 1px;
    
    }
    
     .slide {
       position:relative;left:0px;width:1150px;height:50px;
     }
    
     .frame {
       width:50px;height:50px;border-Left:solid black 0px;float:left;
     }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (13-April-2009)
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    // With the ability to scale the effect time on secified minimum/maximum values
    // and with three types of progression 'sin' and 'cos' and liner.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'.
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('width#',document.getElementById('tst'),10,800,5000,[10,800],'sin');'
    // where:
    // parameter 0 = the mode(see Note 2).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    // parameter 5 = (optional) to scale the effect time on a secified minimum/maximum.                        (array, see Note 5)
    //                 field 0 the minimum. (digits)
    //                 field 1 the maximum. (digits)
    // parameter 6 = (optional) the type of progression, 'sin', 'cos' or 'liner'.                              (string, default = 'liner')
    //                'sin' progression starts fast and ends slow.
    //                'cos' progression starts slow and ends fast.
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //  Note 5: parameter 5 is of particular use when re-calling the effect
    //          in mid travel to retain an constant rate of progression.
    //  Note 6: parameters 2 and 3 must be different values to initilise or execute the script.
    //
    
    // **** Advanced Applications
    //
    //  Calling function 'zxcBAnimator' returns the instance of the script,
    //  this may be assigned to a variable and used to access the current value of the effect.
    //  alternativly the sript instance by elementobject[mode.replace(/\W/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2.12K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
     if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
     if (!obj||(!srt&&!fin)||(srt==fin)) return;
     var oop=obj[mde.replace(/\W/g,'')+'oop'];
     if (oop){
      clearTimeout(oop.to);
      if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
      else oop.update([srt,fin],ms,scale,curve);
     }
     else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
     return oop;
    }
    
    function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
     this.srtfin=[srt,fin];
     this.to=null;
     this.obj=obj;
     this.mde=mde.replace(/\W/g,'');
     this.update([srt,fin],ms,scale,curve);
    }
    
    zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
     this.time=ms||this.time||2000;
     this.data=[srtfin[0],srtfin[0],srtfin[1]];
     this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
     this.ms=this.mS;
     this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
     this.inc=Math.PI/(2*this.mS);
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     this.ms=new Date().getTime()-this.srttime;
     this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(obj,opc){
     if (opc<0||opc>100) return;
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSlide(id,fcls,spd,nu){
     this.obj=document.getElementById(id);
     this.frames=zxcByClassName(fcls,this.obj)
     this.slide=this.frames[0].parentNode;
     this.spd=spd||1000;
     this.nu=nu||0;
     var lst=this.frames[this.frames.length-1];
     this.max=lst.offsetLeft+lst.offsetWidth-this.obj.offsetWidth
     for (var z0=0;z0<this.frames.length;z0++){
      if (this.frames[z0].offsetLeft>this.max){ this.maxnu=z0; break; }
     }
     this.Slide(0,5);
    }
    
    zxcSlide.prototype.Slide=function(nu,spd){
     this.nu+=nu;
     this.nu=this.nu<0?0:this.nu>this.maxnu?this.maxnu:this.nu;
     zxcBAnimator('left',this.slide,this.slide.offsetLeft,-Math.min(this.frames[this.nu].offsetLeft,this.max),spd||this.spd,[0,this.max]);
    }
    
    
    function zxcByClassName(nme,el,tag){
     if (typeof(el)=='string') el=document.getElementById(el);
     el=el||document;
     for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
      if(reg.test(els[z0].className)) ary.push(els[z0]);
     }
     return ary;
    }
    
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    var S1;
    function Init(){
     S1=new zxcSlide('tst','frame',1000,2)
    }
    /*]]>*/
    </script>
    </head>
    
    <body onload="Init();" >
    <input type="button" name="b" value="Fwd" onclick="S1.Slide(2);"/>
    <input type="button" name="b" value="Back" onclick="S1.Slide(-2);"/>
     <div id="tst" >
      <div class="slide" >
       <div class="frame" >1</div>
       <div class="frame" >2</div>
       <div class="frame" >3</div>
       <div class="frame" >4</div>
       <div class="frame" >5</div>
       <div class="frame" >6</div>
       <div class="frame" >7</div>
       <div class="frame" >8</div>
       <div class="frame" >9</div>
       <div class="frame" >10</div>
       <div class="frame" >11</div>
       <div class="frame" >12</div>
       </div>
     </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/

    Comment


    • #3
      Hi vwphillips,

      This is great thanks, but I wish to have lists of links about 7 in each list, how do i achieve this?

      Thanks again!

      Kyle
      www.kylehouston.com

      Comment


      • #4
        Hard code them into each frame.

        Or they can be auto generated. If this is required provide a hard coded example of a frame.
        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/

        Comment

        Working...
        X