Results 1 to 2 of 2

Thread: modify conveyor belt script

  1. #1
    Join Date
    May 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation modify conveyor belt script

    1)Modify Conveyor Belt slideshow script to allow zoom on mouse over

    2) Script URL (on DD) : http://www.dynamicdrive.com/dynamici...rightslide.htm

    3) Describe problem:

    Hello
    I would like to modify the conveyor belt script so that when I move my mouse on a specific image, it allows me to get a 'zoomed' version of that image (by loading a larger version of the same image). How can I proceed with this?

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 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;overflow:hidden;width:600px;height:140px;border:solid black 1px;
    }
    
    #tst IMG {
      border-Width:0px;
    }
    .slide {
      position:absolute;left:0px;top:0px;width:568px;height:140px;
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="tst" onmouseover="S.Speed=0;" onmouseout="S.Speed=-2;">
      <div class="slide" >
       <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" rel="200*150"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1></a>
       <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" rel="400*300"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook2.gif" border=1></a>
       <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" rel="200*150"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook3.gif" border=1></a>
       <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" rel="200*150"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook4.gif" border=1></a>
       <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" rel="200*150"><img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook5.gif" border=1></a>
      </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function zxcCarousel(o){
     var p=document.getElementById(o.ID),oop=this;
     this.slide=[p.getElementsByTagName('DIV')[0]];
     var w=this.slide[0].offsetWidth,lft=-w,slide;
     this.slide[0].style.left=lft+'px';
     while (lft<p.offsetWidth){
      lft+=w;
      slide=this.slide[0].cloneNode(true);
      slide.style.left=lft+'px';
      p.appendChild(slide);
      this.slide.push(slide);
     }
     this.w=w;
     this.max=lft;
     this.Speed=o.Speed||-1;
     this.Rotate();
    }
    
    zxcCarousel.prototype={
    
     Rotate:function(){
      for (var oop=this,lft,z0=0;z0<this.slide.length;z0++){
       lft=parseInt(this.slide[z0].style.left);
       if ((this.Speed<0&&lft+this.Speed<-this.w)||(this.Speed>0&&lft+this.Speed>this.max)){
        lft+=this.w*this.slide.length*(this.Speed<0?1:-1);
       }
       this.slide[z0].style.left=lft+this.Speed+'px';
    
      }
      this.to=setTimeout(function(){ oop.Rotate(); },50);
     }
    }
    
    
    var S=new zxcCarousel({
     ID:'tst',  // the unique ID name of the parent DIV.                              (string)
     Speed:2    // the speed 1 = slow, 10 = fast and direction >0 = right, <0 = left. (digits)
    });
    
    function zxcMagnify(o){
     var p=document.getElementById(o.ID),oop=this;
     var lks=p.getElementsByTagName('A');
     this.img=document.createElement('IMG');
     this.img.style.position='absolute';
     this.img.style.visibility='hidden';
     this.img.style.zIndex='101';
     this.img.onclick=function(){ this.style.visibility='hidden';  }
     document.body.appendChild(this.img);
     for (var z0=0;z0<lks.length;z0++){
      if (lks[z0].href&&lks[z0].rel){
       lks[z0].onclick=function(){ oop.magnify(this); return false; }
      }
     }
    }
    
    zxcMagnify.prototype={
     magnify:function(lk){
      var sz=lk.rel.split('*'),wwhs=zxcWWHS();
      this.img.src=lk.href;
      this.img.style.left=wwhs[2]+(wwhs[0]-sz[0])/2+'px';
      this.img.style.top=wwhs[3]+(wwhs[1]-sz[1])/2+'px';
      this.img.style.width=sz[0]+'px';
      this.img.style.height=sz[1]+'px';
      this.img.style.visibility='visible';
    
     }
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    
    
    new zxcMagnify({
     ID:'tst' // the unique ID name of the Carousel parent DIV. (string)
    });
    
    /*]]>*/
    </script></body>
    
    </html>
    Last edited by vwphillips; 08-17-2010 at 05:29 PM. Reason: oops
    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:

    lordrt (08-18-2010)

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
  •