Results 1 to 3 of 3

Thread: Horizontal Carousel with Tooltip and Fade Effect

  1. #1
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Horizontal Carousel with Tooltip and Fade Effect

    Hello,

    Can anyone find me exactly the same carousel with tooltip?

    I want extra feature which is fade effect on hover images

    atsocial.net/

    Thanks

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,773
    Thanks
    2
    Thanked 410 Times in 405 Posts

    Default

    in principle

    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">
    <!--
    
    .wrapper {
      position:absolute;left:100px;top:100px;width:500px;height:80px;;
    }
    
    
    .parent {
      position:relative;width:500px;height:80px;border:solid red 1px;
    }
    
    .slide {
      position:absolute;left:0px;top:0px;
    }
    
    .slide IMG {
      position:relative;width:80px;height:80px;
    }
    
    .tt {
      position:absolute;left:0;top:-3000px;width:100px;height:30px;background-Color:#FFFFCC;border:solid red 1px;text-Align:center;
    }
    
    #left {
      position:absolute;left:-20px;top:30px;
    }
    
    #right {
      position:absolute;left:500px;top:30px;
    }
    
    -->
    </style></head>
    
    <body>
     <div class="wrapper" >
      <img id="left" src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" alt="left">
      <img id="right" src="http://www.vicsjavascripts.org.uk/StdImages/Right.gif" alt="right">
      <div id="tst" class="parent" >
       <div class="slide" >
        <img src="http://photos-e.ak.fbcdn.net/photos-ak-snc7/v43/65/185206204952813/app_115_185206204952813_1447375120.png" alt="img" >
        <img src="http://photos-a.ak.fbcdn.net/photos-ak-snc7/v27562/110/188329771306514/app_115_188329771306514_1973733465.png" alt="img">
        <img src="http://photos-g.ak.fbcdn.net/photos-ak-snc7/v27562/152/187615851381908/app_115_187615851381908_2034027906.png" alt="img">
        <img src="http://photos-c.ak.fbcdn.net/photos-ak-snc7/v43/61/438254116229977/app_115_438254116229977_196010825.png" alt="img">
        <img src="http://photos-b.ak.fbcdn.net/photos-ak-snc7/v43/10/478243465561270/app_115_478243465561270_511788033.png" alt="img">
        <img src="http://photos-f.ak.fbcdn.net/photos-ak-snc7/v27562/187/499619520082807/app_115_499619520082807_1810348537.png" alt="img">
        <img src="http://photos-a.ak.fbcdn.net/photos-ak-snc7/v27562/131/224744094326939/app_115_224744094326939_1880375142.png" alt="img">
        <img src="http://photos-h.ak.fbcdn.net/photos-ak-snc7/v43/10/310414632391846/app_115_310414632391846_323797055.png" alt="img">
        <img src="http://photos-g.ak.fbcdn.net/photos-ak-snc7/v43/113/148930255257449/app_115_148930255257449_1079919384.png" alt="img">
        <img src="http://photos-d.ak.fbcdn.net/photos-ak-snc7/v43/168/354510377980332/app_115_354510377980332_1819773013.png" alt="img">
        <img src="http://photos-a.ak.fbcdn.net/photos-ak-snc7/v27562/153/514754711897733/app_115_514754711897733_1825341254.png" alt="img">
       </div>
       <div class="tt" >Tool Tip 1</div>
       <div class="tt" >Tool Tip 2</div>
       <div class="tt" >Tool Tip 3</div>
       <div class="tt" >Tool Tip 4</div>
       <div class="tt" >Tool Tip 5</div>
       <div class="tt" >Tool Tip 6</div>
       <div class="tt" >Tool Tip 7</div>
       <div class="tt" >Tool Tip 8</div>
       <div class="tt" >Tool Tip 9</div>
       <div class="tt" >Tool Tip 10</div>
       <div class="tt" >Tool Tip 11</div>
      </div>
     </div>
    
    <input type="button" name="" value="Forward" onmouseup="zxcSSC.Step('tst',1);">
    <input type="button" name="" value="Back" onmouseup="zxcSSC.Step('tst',-1);">
    
    <script type="text/javascript">
    <!--
    // Simple Step Carousel. (8-January-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcSSC={
    
     init:function(o){
      var id=o.ID,ms=o.StepDuration,op=o.Opacity,op=typeof(op)=='number'&&op>10&&op<=100?op:false,lb=document.getElementById(o.LeftButton),rb=document.getElementById(o.RightButton),mde=['left','offsetLeft','width','offsetWidth','offsetHeight'],p=document.getElementById(id),obj=p.getElementsByTagName('DIV')[0],imgs=obj.getElementsByTagName('IMG'),tts=p.getElementsByTagName('DIV'),c=document.createElement('IMG'),ary=[],z0=0,z1=0;
      obj.style[mde[2]]='3000px';
      p.style.overflow='hidden';
      if (rb){
       rb.style.visibility='hidden';
       this.addevt(rb,'mouseup','Step',id,-1);
      }
      if (lb){
       this.addevt(lb,'mouseup','Step',id,1);
      }
      o=zxcSSC['zxc'+id]={
       id:id,
       mde:mde[0],
       obj:obj,
       ary:ary,
       ms:typeof(ms)=='number'&&ms>20?ms:20,
       op:op,
       now:0,
       lb:lb,
       rb:rb,
       cnt:0
      }
      obj.appendChild(c);
      o.max=-c[mde[1]]+p[mde[3]];
      obj.removeChild(c);
      for (;z0<imgs.length;z0++){
       ary[z0]=[imgs[z0],-imgs[z0][mde[1]],imgs[z0][mde[3]]];
       if (op){
        this.opc(imgs[z0],op);
        this.addevt(imgs[z0],'mouseover','mse',o,imgs[z0],false);
        this.addevt(imgs[z0],'mouseout','mse',o,imgs[z0],true);
        if (tts[z0+1]){
         ary[z0][3]=[tts[z0+1],tts[z0+1][mde[3]],tts[z0+1][mde[4]]];
         this.addevt(imgs[z0],'mouseover','tooltip',o,ary[z0],false);
         this.addevt(imgs[z0],'mouseout','tooltip',o,ary[z0],true);
        }
       }
      }
      for (;z1<ary.length;z1++){
       if (ary[z1][3]){
        document.body.appendChild(ary[z1][3][0]);
       }
      }
     },
    
     Step:function(id,ud){
      var o=zxcSSC['zxc'+id],ud=typeof(ud)=='number'?ud<0?-1:1:1,nu,t;
      if (o){
       nu=o.cnt+ud,t=o.ary[nu];
       if (t&&(ud>0&&t[1]>o.max)||(ud<0&&nu>=0)){
        this.animate(o,o.now,t[1],new Date(),o.ms);
        o.cnt=nu;
       }
       if (o.lb){
        o.lb.style.visibility=(o.ary[nu+1]&&o.ary[nu+1][1]>o.max)?'visible':'hidden';
       }
       if (o.rb){
        o.rb.style.visibility=o.cnt>0?'visible':'hidden';
       }
      }
     },
    
     animate:function(o,f,t,srt,mS,sc,inc){
      clearTimeout(o.dly);
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
    
      if (isFinite(now)){
       o.now=now;
       o.obj.style[o.mde]=now+'px';
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS); },10);
      }
      else {
       o.now=t;
       o.obj.style[o.mde]=t+'px';
      }
     },
    
     opc:function(obj,opc){
      obj.style.filter='alpha(opacity='+opc+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     },
    
     mse:function(o,img,ud){
      this.opc(img,ud?o.op:100);
     },
    
     tooltip:function(o,ary,ud){
      var p=this.pos(ary[0]),w=ary[2],a=ary[3];
      a[0].style.left=p[0]+(w-a[1])/2+'px';
      a[0].style.top=(ud?-3000:p[1]-a[2]-5)+'px';
    
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
      }
     }
    
    
    }
    
    zxcSSC.init({
     ID:'tst',           // the unique ID name of the parent DIV.                 (string)
     StepDuration:500,   //(optional) the animation speed in milli seconds.       (number, default = < 20 = no animation)
     Opacity:50,         //(optional) animate mask opacity(0 to 100).             (number, default = CSS opacity)
     LeftButton:'left',  //(optional) the unique ID name of left control element. (string, default = no  left control element)
     RightButton:'right' //(optional) the unique ID name of right control element.(string, default = no  right control element)
    });
    //-->
    </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/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    bbilal (01-10-2013)

  4. #3
    Join Date
    Sep 2007
    Posts
    162
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much

Similar Threads

  1. carousel effect using javascript
    By Harleyy in forum JavaScript
    Replies: 9
    Last Post: 01-27-2012, 10:42 AM
  2. Step Carousel: Rollover next & previous button effect possible?
    By MrBond in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-05-2011, 06:48 AM
  3. Crossbrowser Horizontal Marquee Effect 2
    By diltony in forum Submit a DHTML or CSS code
    Replies: 2
    Last Post: 01-26-2009, 10:11 PM
  4. Using Carousel script with Textual tooltip II (fade into view)
    By manis.jain in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-17-2006, 06:50 AM
  5. Replies: 0
    Last Post: 04-24-2006, 08:31 PM

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
  •