www.webdeveloper.com
Results 1 to 7 of 7

Thread: Image slide question

  1. #1
    Join Date
    Apr 2009
    Posts
    23

    Image slide question

    Hello All,

    I have a question i hope you can help me with.
    I'm trying to build a image slider (gallery) but i'm suck.

    This is what i try to achieve.

    I have (for example) 10 images. Image 1 is shown in the center. then image 2 i only want to show the left part of 30px. This way the user can see that there is another graphic. when they click on it it slides to the center and image one slides to the left.

    So then you only see image 1 for 30px image 2 100% en image 3 for 30px.

    Can anybody please help me out?

    Thanks.
    Attached Images Attached Images

  2. #2
    Join Date
    Mar 2009
    Posts
    501
    I suggest you read up on the CSS "clip" property, which you can of course manipulate through javascript.

  3. #3
    Join Date
    Apr 2009
    Posts
    23

    code

    hello

    thanks for the reply.
    is there a way you can mockup a piece of code because i don't have a clue how to.

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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:300px;top:0px;width:250px;height:150px;border:solid black 1px;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;width:612px;height:150px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (11-January-2010)
    // 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 specified 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.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (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:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.52K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.neg=srt<0||fin<0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
      this.apply();
      if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.data[0]<0&&!this.neg) this.data[0]=0;
       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.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    
    </head>
    
    <body>
    <input type="button" name="" value="Next" onmouseup="S.Next(1);"/><br />
    <input type="button" name="" value="Back" onmouseup="S.Next(-1);"/><br />
    
     <div id="tst" >
      <div class="slide" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
      </div>
     </div>
    http://www.webdeveloper.com/forum/showthread.php?t=239099
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Slide(o){
     var obj=document.getElementById(o.ID);
     var slide=obj.getElementsByTagName('DIV')[0];
     var w=slide.offsetWidth;
     var imgs=slide.getElementsByTagName('IMG');
     this.pos=[];
     for (var z0=0;z0<imgs.length;z0++){
      this.pos[z0]=imgs[z0].offsetLeft+(obj.offsetWidth-imgs[0].width)/2;
     }
     this.moveby=this.pos[1]-this.pos[0];
     this.lstpos=[-w+this.pos[0]];
     slide.style.left=this.lstpos[0]+'px';
     this.slides=[new zxcAnimate('left',slide,-w)];
     this.slides[0].oop=this;
     this.slides[0].Complete=function(){
      this.oop.done();
     }
     for (var z1=0;z1<2;z1++){
      slide=slide.cloneNode(true);
      this.lstpos[z1+1]=w*z1+this.pos[0];
      slide.style.left=this.lstpos[z1+1]+'px';
      obj.appendChild(slide);
      this.slides[z1+1]=new zxcAnimate('left',slide,this.lstpos[z1+1]);
     }
     imgs=obj.getElementsByTagName('IMG');
     for (var z2=0;z2<imgs.length;z2++){
      this.addevt(imgs[z2],'mouseup','next',imgs[z2]);
     }
     this.w=w;
     this.cnt=0;
     this.ms=o.Duration||1000;
    }
    
    Slide.prototype={
    
     Next:function(ud){
      this.cnt+=ud;
      this.cnt=this.cnt<0?this.pos.length-1?this.cnt==this.pos.length:0:this.cnt;
      this.ud=ud>0?1:-1;
      this.slide();
     },
    
     next:function(img){
      var lft=img.offsetLeft+img.parentNode.offsetLeft;
      if (lft<0||lft>img.width){
       this.Next(lft<0?-1:1);
      }
     },
    
     slide:function(){
      for (var z0=0;z0<3;z0++){
       this.slides[z0].animate(this.lstpos[z0],this.lstpos[z0]+this.moveby*this.ud,this.ms);
       this.lstpos[z0]+=this.moveby*this.ud;
      }
     },
    
     done:function(){
      for (var z0=0;z0<3;z0++){
       if ((this.ud>0&&this.lstpos[z0]>this.w)||(this.ud<0&&this.lstpos[z0]<-this.w)){
        this.lstpos[z0]-=(this.w*3*this.ud);
       }
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
     }
    
    
    }
    
    S=new Slide({
     ID:'tst',
     Duration:1000
    });
    /*]]>*/
    </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/

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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:300px;top:0px;width:250px;height:150px;border:solid black 1px;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;width:612px;height:150px;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Animate (11-January-2010)
    // 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 specified 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.
    //
    
    // **** Initialising the Script.
    //
    // The script is initialised by assigning an instance of the script to a variable.
    // e.g A = new zxcAnimate('left','id1')
    // where:
    //  A           = a global variable                                                               (variable)
    //  parameter 0 = the mode(see Note 1).                                                           (string)
    //  parameter 1 = the unique ID name or element object.                                           (string or element object)
    //  parameter 1 = the initial value.                                                              (digits, default = 0)
    
    // **** Executing the Effect
    //
    // The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
    // where:
    //  A           = the global referencing the script instance.                                 (variable)
    //  parameter 0 = the start value.                                                            (digits, for opacity minimum 0, maximum 100)
    //  parameter 1 = the finish value.                                                           (digits, for opacity minimum 0, maximum 100)
    //  parameter 2 =  period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
    //  parameter 3 = (optional) to scale the effect time on a specified minimum/maximum.         (array, see Note 3)
    //                 field 0 the minimum value. (digits)
    //                 field 1 the maximum value. (digits)
    //  parameter 3 = (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:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //  Note 2:  The default units(excepting opacity) are 'px'.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  The scale is of particular use when re-calling the effect
    //           in mid progression to retain an constant rate of progression.
    //  Note 4:  The current effect value is recorded in A.data[0].
    //  Note 5:  A function may be called on completion of the effect by assigning the function
    //           to the animator intance property .Complete.
    //           e.g. [instance].Complete=function(){ alert(this.data[0]); };
    //
    
    
    
    // **** Functional Code(1.52K) - NO NEED to Change
    
    function zxcAnimate(mde,obj,srt){
     this.to=null;
     this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
     this.mde=mde.replace(/\W/g,'');
     this.data=[srt||0];
     return this;
    }
    
    zxcAnimate.prototype={
    
     animate:function(srt,fin,ms,scale,c){
      clearTimeout(this.to);
      this.time=ms||this.time||0;
      this.neg=srt<0||fin<0;
      this.data=[srt,srt,fin];
      this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
      this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
      this.inc=Math.PI/(2*this.mS);
      this.srttime=new Date().getTime();
      this.cng();
     },
    
     cng:function(){
      var oop=this,ms=new Date().getTime()-this.srttime;
      this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
      this.apply();
      if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
      else {
       this.data[0]=this.data[2];
       this.apply();
       if (this.Complete) this.Complete(this);
      }
     },
    
     apply:function(){
      if (isFinite(this.data[0])){
       if (this.data[0]<0&&!this.neg) this.data[0]=0;
       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.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    
    </script>
    
    
    
    </head>
    
    <body>
    <input type="button" name="" value="Next" onmouseup="S.Next(1);"/><br />
    <input type="button" name="" value="Back" onmouseup="S.Next(-1);"/><br />
    
     <div id="tst" >
      <div class="slide" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
      </div>
     </div>
    http://www.webdeveloper.com/forum/showthread.php?t=239099
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Slide(o){
     var obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0],w=slide.offsetWidth,imgs=slide.getElementsByTagName('IMG'),z0,z1,z2;
     this.pos=[];
     for (z0=0;z0<imgs.length;z0++){
      this.pos[z0]=imgs[z0].offsetLeft+(obj.offsetWidth-imgs[0].width)/2;
     }
     this.moveby=this.pos[1]-this.pos[0];
     this.lstpos=[-w+this.pos[0]];
     slide.style.left=this.lstpos[0]+'px';
     this.slides=[new zxcAnimate('left',slide,-w)];
     this.slides[0].oop=this;
     this.slides[0].Complete=function(){
      this.oop.done();
     }
     for (z1=0;z1<3;z1++){
      slide=slide.cloneNode(true);
      this.lstpos[z1+1]=w*z1+this.pos[0];
      slide.style.left=this.lstpos[z1+1]+'px';
      obj.appendChild(slide);
      this.slides[z1+1]=new zxcAnimate('left',slide,this.lstpos[z1+1]);
     }
     imgs=obj.getElementsByTagName('IMG');
     for (z2=0;z2<imgs.length;z2++){
      this.addevt(imgs[z2],'mouseup','next',imgs[z2]);
     }
     this.w=w;
     this.cnt=0;
     this.ms=o.Duration||1000;
    }
    
    Slide.prototype={
    
     Next:function(ud){
      this.cnt+=ud;
      this.cnt=this.cnt<0?this.pos.length-1?this.cnt==this.pos.length:0:this.cnt;
      this.ud=ud>0?1:-1;
      this.slide();
     },
    
     next:function(img){
      var lft=img.offsetLeft+img.parentNode.offsetLeft;
      if (lft<0||lft>img.width){
       this.Next(lft<0?1:-1);
      }
     },
    
     slide:function(){
      for (var z0=0;z0<4;z0++){
       this.slides[z0].animate(this.lstpos[z0],this.lstpos[z0]+this.moveby*this.ud,this.ms);
       this.lstpos[z0]+=this.moveby*this.ud;
      }
     },
    
     done:function(){
      for (var z0=0;z0<4;z0++){
       if ((this.ud>0&&this.lstpos[z0]>this.w*2)||(this.ud<0&&this.lstpos[z0]<-this.w*2)){
        this.lstpos[z0]-=(this.w*4*this.ud);
       }
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
     }
    
    
    }
    
    S=new Slide({
     ID:'tst',
     Duration:1000
    });
    /*]]>*/
    </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/

  6. #6
    Join Date
    Apr 2009
    Posts
    23

    close but...

    Thanks for the great start.

    I see the potentials of the script but what i really would like to see improved is the fact that we are using 2 buttons now and i would like to have a "invisible layer" on the left and right side of the div which are the prev and next buttons.

    Also on click it only scrolls a bit but it should scroll to the next image and show 30px of the next image and previous image
    Attached Images Attached Images

  7. #7
    Join Date
    Dec 2009
    Location
    Shropshire UK
    Posts
    153
    code
    hello

    thanks for the reply.
    is there a way you can mockup a piece of code because i don't have a clue how to.
    close but...
    Thanks for the great start.

    I see the potentials of the script but what i really would like to see improved is the fact that we are using 2 buttons now and i would like to have a "invisible layer" on the left and right side of the div which are the prev and next buttons.

    Also on click it only scrolls a bit but it should scroll to the next image and show 30px of the next image and previous image
    I maybe in a minority, but I think you're trying it on personally! (maybe vwphillips is a little more charitable) It's evident from vwphillips' script that it isn't just a case of 'mocking up' or hitting a magic button.

    However if you're looking for free scripts they are out there. For instance. http://blarnee.com/wp/jquery-image-c...-for-slidehow/ might be of interest.

    If you're looking to do this yourself in javascript (sans-framework), then overflow: hidden and the scrollLeft property are pretty useful.

    RLM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles