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 5 of 5
  1. #1
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Horizontal Scrolling Thumbnail Gallery

    Hello,
    Currently I'm looking at smooth scrolling Js scripts for thumb images which can be altered to accomodate needs. I found one here that has some desirable effects but has no navi buttons.

    Would it be sensible to alter and point the hovering mouse scroll function to buttons, or would it be a better idea to keep looking for exactly the right script?

    The 2 identical scrollers on this page are the look I want but these are flash;

    http://area.autodesk.com/

    ps: I've no experience of Js but can pick things up pretty quickly.

  • #2
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Updated site while trying to implement a js carousel/slider gallery...

    After experimenting with a few coding examples I'm not sure whether to use an array or not and if not how to hide images. Also, the actual functionality of prev and next buttons is elusive as the examples I saw were so varied that they didn't follow any recognisable pattern.

    Please can anyone advise me?

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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[*/
    
    .parent {
      position:relative;left:100px;width:400px;height:75px;border:solid black 1px;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;
    }
    
    .slide IMG{
      width:100px;
    }
    
    .parentV {
      position:relative;left:100px;width:100px;height:400px;border:solid black 1px;
    }
    
    /*]]>*/
    </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]=(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]=Math.floor(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>
     <div id="tst" class="parent">
      <div class="slide">
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" />
      </div>
     </div>
    <input type="button" name="" value="Right" onclick="S.Slide(1);"/>
    <input type="button" name="" value="Left" onclick="S.Slide(-1);"/>
     <div id="tst1" class="parentV">
      <div class="slide">
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" />
      </div>
     </div>
    <input type="button" name="" value="Down" onclick="S1.Slide(1);"/>
    <input type="button" name="" value="Up" onclick="S1.Slide(-1);"/>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcSlider(o){
     mde=typeof(o.Mode)=='string'&&o.Mode.toUpperCase().charAt(0)=='V'?['top','height','Height','Top']:['left','width','Width','Left'];
     var p=document.getElementById(o.ID);
     var slides=[p.getElementsByTagName('DIV')[0]];
     slides[0].style[mde[1]]='10000px';
     p.style.overflow='hidden';
     var clds=slides[0].childNodes;
     for (var ary=[],z0=0;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       ary.push(clds[z0]);
      }
     }
     slides[0].style[mde[1]]=o.Size+'px';
     this.slides=[];
     var nu=Math.max(Math.ceil(p['offset'+mde[2]]/o.Size),3);
     for (var lft=-o.Size,obj,z1=0;z1<nu;z1++){
      obj=slides[z1]||slides[0].cloneNode(true);
      p.appendChild(obj);
      obj.style[mde[0]]=lft+'px';
      this.slides[z1]=new zxcAnimate(mde[0],obj,lft);
      lft+=o.Size;
     }
     this.sz=o.Size;
     this.max=this.sz*(nu-1);
     this.ms=o.Duration||1000;
     this.cng=this.sz*nu;
     this.moveby=o.MoveBy||ary[1]['offset'+mde[3]];
    }
    
    zxcSlider.prototype.Slide=function(ud){
     ud=typeof(ud)=='number'&&ud>0?1:-1;
     for (var oop,z0=0;z0<this.slides.length;z0++){
      oop=this.slides[z0];
      if ((ud>0&&oop.data[0]+this.moveby*ud>this.max)||(ud<0&&oop.data[0]+this.moveby*ud<-this.max)){
       oop.data[0]+=this.cng*(ud*-1);
      }
      oop.animate(oop.data[0],oop.data[0]+this.moveby*ud,this.ms,[0,this.moveby]);
     }
    }
    
    S=new zxcSlider({
     ID:'tst',
     Size:416,
     Duration:500  //(optional) the speed of the effect im milliseconds. (digits, default = 1000)
    });
    
    S1=new zxcSlider({
     Mode:'Vertical', //(optional) the mode, 'Vertical' or 'Horizontal'. (string, default = 'Horizontal')
     ID:'tst1',
     Size:474,
     Duration:500  //(optional) the speed of the effect im milliseconds. (digits, default = 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/

  • Users who have thanked vwphillips for this post:

    gcmax (10-06-2010)

  • #5
    Regular Coder gcmax's Avatar
    Join Date
    Sep 2010
    Location
    Leeds
    Posts
    108
    Thanks
    8
    Thanked 5 Times in 5 Posts
    Thanks guys, I got something working here...

    As you can see the styling has been affected (<h1> and <p> are pushed further down the page) but the main thing is seeing no rollover on the buttons.
    Removing <img src="thumbscroll/up.jpg" alt="See next images" /> from the following code restores css rollover but at the expense of breaking the slideshow!
    Code:
    <div class="btn1"><a href="javascript:imageScroller_97259489.scrollForward();"><img src="thumbscroll/up.jpg" alt="See next images" /></a></div>
    It's strange that #frame for the slideshow does follow css rules as it's listed in the js code but #thumbs does not.

    *Had a look around for how to include css on javascript functions but it seems like a very hazy area.

    Code:
    // ThumbScroller
    
    var imageScroller_97259489;
    addAnEvent(window, "load", loadScroller_97259489);
    
    function loadScroller_97259489() {
    
    imageScroller_97259489 = new ImageScroller("frame","thumbs");
    
    imageScroller_97259489.setThumbnailWidth(150);
    imageScroller_97259489.setThumbnailHeight(150);
    imageScroller_97259489.setScrollSpeed(21);
    imageScroller_97259489.setScrollAmount(2);
    imageScroller_97259489.setThumbsShown(4);
    imageScroller_97259489.setAutoLoop("True");
    imageScroller_97259489.setScrollType(1);
    imageScroller_97259489.setThumbnailPadding(5);
    
    imageScroller_97259489.addThumbnail("images/01.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/02.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/03.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/04.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/05.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/06.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/07.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/08.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/09.jpg", "", "", "");
    imageScroller_97259489.addThumbnail("images/10.jpg", "", "", "");
    
    imageScroller_97259489.enableThumbBorder(false);
    imageScroller_97259489.setClickOpenType(1);
    imageScroller_97259489.setNumOfImageToScroll(1);
    imageScroller_97259489.renderScroller();
    };
    I have a js function file to go with the above but it's compressed so I don't know if it will do any good posting that.


  •  

    Tags for this Thread

    Posting Permissions

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