Results 1 to 2 of 2

Thread: Horizontal Image/Text Link viewer

  1. #1
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal Image/Text Link viewer

    I've searched here on DD, but not finding quite what I'm looking for. I don't want an animated scroller or marquee. I have a product detail page that shows everything about a particular product. I also have logic that pulls limited detail from the database of approximately 12 other products that are similar to the one being shown in detail.

    I only want to display a small image and product title for each of the similar products. A user could click on any one of these images or titles and the details page would load for that item (I have this code logic in place). I just need to display these items gracefully and only about 4 or 5 will fit on the width of the screen. I want the user to be able to click left or right to display these items.

    << Img1/Link1 Img2/Link2 Img3/Link3 Img4/Link4 >>

    Clicking left would give:

    << Img2/Link2 Img3/Link3 Img4/Link4 Img5/Link5 >>

    Etc...

    Each of the Img/Link columns would be approximately 200px wide and 250px in height, give or take.

    If the user clicks left, an entire column comes into view from the left and one disappears on the right. If the user clicks all the way to the last item, the next item to display would be the first one in the list. Likewise, if the user clicks right all the way to the first item in the list the next item would be the last one. In other words, the scroll would wrap.

    Maybe I missed something here - is anyone aware of such a script?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    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;left:450px;top:50px;width:400px;height:85px;border:solid red 1px;
    }
    
    #tst IMG {
      width:100px;height:75px;float:left;margin-Left:5px;
    }
    
    .frame {
      position:relative;left:0px;top:0px;width:100px;height:75px;background-Color:#FFCC66;border:solid red 1px;float:left;margin-Left:5px;
    }
    
    
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <input type="button" name="" value="Fwd" onmouseup="S.Step(1);" />
    <input type="button" name="" value="Back" onmouseup="S.Step(-1);" />
     <div id="tst" >
      <div >
       <div class="frame" >0</div>
       <div class="frame" >1</div>
       <div class="frame" >2</div>
       <div class="frame" >3</div>
      </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Step Carousel
    // by Vic Phillips
    
    
    function StepCarousel(o){
     var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','left','height','offsetTop','offsetHeight']:['left','top','width','offsetLeft','offsetWidth'],obj=document.getElementById(o.ID),ary=o.ImageArray,ms=o.StepDuration,hold=o.AutoHold,days=o.DaysPersistence,sf=o.StartFrame,srt=o.AutoStart,pms=o.PreloadDuration,ud=o.Direction,pag=o.Paginate,add=o.AddEvents,slide=obj.getElementsByTagName('DIV')[0];
     oop.mde=mde;
     oop.obj=obj;
     oop.slide=slide;
     oop.ms=typeof(ms)=='number'?ms:1000;
     oop.hold=typeof(hold)=='number'?hold:oop.ms*2;
     oop.srt=typeof(srt)=='number'?srt:false;
     oop.pms=typeof(pms)=='number'?pms:5000;
     oop.nme=o.ID+'=';
     oop.days=typeof(days)=='number'&&oop.cookie?days:false;
     oop.ctr=o.Center;
     oop.cnt=typeof(sf)=='number'?sf:0;
     oop.ud=typeof(ud)=='string'&&ud.charAt(0).toUpperCase()=='C'?-1:1;
     oop.auto=false;
     oop.pag=typeof(pag)=='object'&&oop.page?pag:false;
     oop.preload(o.CommonClass);
    }
    
    StepCarousel.prototype={
    
     GoTo:function(nu,cng){
      var oop=this;
      oop.Pause();
      if (oop.ary[nu]&&nu!=oop.cnt){
       oop.ud=cng===true?nu>oop.cnt?1:-1:oop.ud;
       oop.Step(0,nu);
      }
     },
    
     Auto:function(ms,hold){
      var oop=this;
      oop.hold=typeof(hold)=='number'?hold:oop.hold;
      oop.Pause();
      oop.to=setTimeout(function(){ oop.Step(oop.ud,null,true); },ms||200);
     },
    
     Pause:function(ms){
      this.auto=false;
      clearTimeout(this.to);
     },
    
     Step:function(ud,cnt,auto){
      var oop=this,ary=oop.ary,ud=typeof(ud)=='number'?ud>0?1:-1:oop.ud,cnt=typeof(cnt)=='number'?cnt:oop.cnt+ud;
      if (typeof(ary[cnt])!='number'){
       cnt=ud>0?0:ary.length-1;
       oop.now+=oop.sz*(ud>0?1:-1);
      }
      oop.cnt=cnt;
      oop.auto=auto===true;
      clearTimeout(oop.dly);
      this.animate(oop.mde[0],oop.now,ary[cnt],new Date(),oop.ms);
     },
    
     animate:function(mde,f,t,srt,mS){
      var oop=this,cnt=oop.cnt,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       oop.now=Math.max(now,f<0||t<0?now:0);
       oop.slide.style[mde]=oop.now+'px';
      }
      if (ms<mS){
       oop.dly=setTimeout(function(){ oop.animate(mde,f,t,srt,mS); },10);
      }
      else {
       oop.now=t;
       oop.slide.style[mde]=t+'px';
       if (oop.auto){
        oop.Auto(oop.hold);
       }
      }
     },
    
     preload:function(cls){
      var oop=this,s=oop.slide,clds=s.childNodes,img,ary=[],clone,z0=0;
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        img=[clds[z0],clds[z0].nodeName.toUpperCase()=='IMG'?clds[z0]:clds[z0].getElementsByTagName('IMG')[0],new Image()];
        if (img[1]){
         img[2].src=img[1].src;
        }
        ary.push(img);
       }
      }
      oop.clds=[];
      oop.preloadck(ary,new Date(),oop.pms);
     },
    
     preloadck:function(ary,date,ms){
      var oop=this,z0=0,z1=0;
      for (;z0<ary.length;z0++){
       if (ary[z0][2].src&&ary[z0][2].width<40&&new Date()-date<ms){
        return setTimeout(function(){ oop.preloadck(ary,date,ms); },100);
       }
      }
      for (;z1<ary.length;z1++){
       if (ary[z1][2].src&&ary[z1][2].width<40){
        ary[z1][0].parentNode.removeChild(ary[z1][0]);
       }
       else {
        oop.clds.push(ary[z1][0].nodeName.toUpperCase()=='A'?ary[z1][0].getElementsByTagName('IMG')[0]:ary[z1][0]);
       }
      }
      oop.init();
     },
    
     init:function(){
      var oop=this,mde=oop.mde,obj=oop.obj,slide=oop.slide,clds=oop.clds,sz,ary=[],clone,nu=oop.days&&oop.cookie(oop.nme)?oop.cookie(oop.nme)*1:oop.cnt,z0=0;
      obj.style.overflow='hidden';
      slide.style.position='absolute';
      slide.style[mde[2]]='3000px';
      for (;z0<clds.length;z0++){
       ary.push(-clds[z0][mde[3]]+(oop.ctr!==false?(obj[mde[4]]-clds[z0][mde[4]])/2:0));
       sz=clds[z0][mde[3]]+clds[z0][mde[4]];
      }
      slide.style[mde[2]]=sz+5+'px';
      clone=slide.cloneNode(true);
      clone.style[mde[1]]='0px';
      clone.style[mde[0]]=-sz+'px';
      slide.appendChild(clone);
      clone=clone.cloneNode(true);
      clone.style[mde[0]]=sz+'px';
      slide.appendChild(clone);
      oop.ary=ary;
      oop.sz=sz;
      oop.cnt=ary[nu]?nu:0;
      oop.now=ary[oop.cnt];
      slide.style[mde[0]]=oop.now+'px';
      if (oop.srt){
       oop.Auto(oop.srt);
      }
     }
    
    }
    
    
    var S=new StepCarousel({
     ID:'tst',
     StepDuration:500,
     Center:false,
     PreloadDuration:5000
    });
    
    
    /*]]>*/
    </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/

Bookmarks

Posting Permissions

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