Results 1 to 8 of 8

Thread: Help with a Slideshow

  1. #1
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Help with a Slideshow

    Hi.

    I want to make the kind of slideshow that is used on the front page of www.dealextreme.com at the top.

    I see theirs s flash ... is it possible to make something like this with Javascript and DHTML and allow it to work with an Unordered List?

    Regards

    Itai

  2. #2
    Join Date
    May 2008
    Posts
    144
    Thanks
    6
    Thanked 11 Times in 11 Posts

    Default

    absolutely... check this out http://www.piksite.com/carousel.us/

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

    eitai2001 (08-27-2009)

  4. #3
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by thenajsays View Post
    absolutely... check this out http://www.piksite.com/carousel.us/
    Thats just what I was looking for thanks
    How could I modify it so that it stops spinning with the mouse over and doesn't follow the mouse and also that it opens up a new link, not a div of a picture?

    I am not a java developer, so would need some advice

    Regards

    Itai

  5. #4
    Join Date
    May 2008
    Posts
    144
    Thanks
    6
    Thanked 11 Times in 11 Posts

    Default

    that, my friend, is a whole other ball of yarn... since i havent worked with it before, i wouldnt even know where to begin. anything is possible though, you just have to have the right now how

  6. #5
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yeah. Is there anyone reading this with any idea

  7. #6
    Join Date
    May 2008
    Posts
    144
    Thanks
    6
    Thanked 11 Times in 11 Posts

    Default

    when you DL it, there may be documentation with it that might spell out how to customize it...

  8. #7
    Join Date
    Aug 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yeah, will take a look at it tonight.

    Regards

    Itai

  9. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Element Ellipse II (28 August 2009)
    
    
    
    // ***** Functional Code(1.95K) - NO NEED to Change.
    
    
    function zxcEllipse(id,ms,zoom,hld,col){
     var elpse=document.getElementById(id);
     zoom=zoom||.01;
     this.rad=[elpse.offsetWidth,elpse.offsetHeight];
     this.items=[];
     var clds=elpse.childNodes;
     for (var z0=0;z0<clds.length;z0++){
      if (clds[z0].nodeType==1){
       this.items.push(clds[z0]);
      }
     }
     this.to=null;
     this.to2=null;
     this.zoom=zoom/100;
     this.sz=[];
     for (var z1=0;z1<this.items.length;z1++){
      this.sz.push([this.items[z1].offsetWidth,this.items[z1].offsetHeight]);
      zxcES(this.items[z1],{position:'absolute',overflow:'hidden'});
     }
     this.os=Math.floor(360/this.items.length);
     this.ud=0;
     this.spd=1;
     this.deg=0;
     this.rotate();
    
    }
    
    zxcEllipse.prototype.Rotate=function(ud,spd){
     clearTimeout(this.to);
     clearTimeout(this.to2);
     if (typeof(spd)=='number'){
      this.spd=spd;
     }
     if (typeof(ud)=='number'){
      this.ud=ud<0?-1:ud>0?1:0;
      this.rotate();
     }
    }
    
    zxcEllipse.prototype.ChangeSpeed=function(inc,max){
     this.spd=Math.min(this.spd+(inc||1),max||10);
     var oop=this;
     this.to2=setTimeout(function(){ oop.ChangeSpeed(inc,max); },200);
    }
    
    zxcEllipse.prototype.rotate=function(){
     for (var oop=this,rad=Math.PI/180,top,w,h,z0=0;z0<this.items.length;z0++){
      top=Math.floor(this.rad[1]/2+this.rad[1]/2*Math.sin((this.deg+this.os*z0)*rad));
      w=(this.sz[z0][0]+(this.sz[z0][0]*top/this.rad[1])*this.zoom);
      h=(this.sz[z0][1]+(this.sz[z0][1]*top/this.rad[1])*this.zoom);
      zxcES(this.items[z0],{zIndex:top,left:Math.floor(this.rad[0]/2+this.rad[0]/2*Math.cos((this.deg+this.os*z0)*rad))-w/2+'px',top:top-h/2+'px',width:w+'px',height:h+'px'});
     }
     this.deg+=this.spd*this.ud;
     this.deg=this.deg%360;
     if (this.ud!=0){
      this.to=setTimeout(function(){ oop.rotate(); },10);
     }
    }
    
    function zxcES(ele,style,par,txt){
     if (typeof(ele)=='string') ele=document.createElement(ele);
     for (key in style) ele.style[key]=style[key];
     if (par) par.appendChild(ele);
     if (txt) ele.appendChild(document.createTextNode(txt));
     return ele;
    }
    
    
    //-->
    </script>
    </head>
    
    <body onload="E=new zxcEllipse('Ellipse2',10,150,0);" > E.Rotate(1);
    <div id="Ellipse2" style="position:relative;visibility:visible;z-index:1;left:200px;top:50px;width:500px;height:180px;border:solid black 0px;text-align:center;" >
    <img class="zxc"  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="20" style="border:solid black 1px;" >
    <div class="zxc" style="width:100px;height:20px;background-color:red;font-size:16px;text-align:center;border:solid black 1px;" >Some Text 1</div>
    <img class="zxc"  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="20" style="border:solid black 1px;" >
    <div class="zxc" style="width:100px;height:20px;background-color:red;font-size:16px;text-align:center;border:solid black 1px;" >Some Text 2</div>
    <img class="zxc"  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="100" height="20" style="border:solid black 1px;" >
    <div class="zxc" style="width:100px;height:20px;background-color:red;font-size:16px;text-align:center;border:solid black 1px;" >Some Text 3</div>
    <img class="zxc"  src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="20" style="border:solid black 1px;" >
    </div>
    <input type="button" name="" value="Rotate " onmousedown="E.Rotate(1,0);E.ChangeSpeed(.1,10);"  onmouseup="E.Rotate(0);">
    <input type="button" name="" value="Rotate " onmousedown="E.Rotate(-1,0);E.ChangeSpeed(.1,10);"  onmouseup="E.Rotate(0);">
    
    
    </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
  •