Results 1 to 7 of 7

Thread: Need a script for image slide

  1. #1
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Need a script for image slide



    Need a script which has the following action

    Images move from right to left and starting and the end images fade to blur, and the middle ones on mouse over zoom out


    Also wanted to know what should be the size of the page to fit completely for a 15inch screen laptop without need to be scrolled.
    Last edited by bootersbooters; 01-21-2012 at 06:28 AM.

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

    Default

    mouseup is more practical

    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[*/
    
    .slider {
      position:absolute;left:10px;top:200px;width:700px;height:150px;border:solid red 1px;
    }
    
    .slider IMG{
      position:relative;float:left;cursor:pointer;
    }
    
    .sliderV {
      position:absolute;left:800px;top:10px;width:200px;height:500px;border:solid red 1px;
    }
    
    .sliderV IMG{
      position:relative;float:left;cursor:pointer;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Zoom Slider. (21-January-2012) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    // Functional Code(4.67K)
    
    function zxcFadeZoomSlider(o){
     var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetHeight','offsetTop','height','left']:['left','offsetWidth','offsetLeft','width','top'],obj=document.getElementById(o.ID),ud=o.ScrollDirection,ms=o.ScrollDuration,mag=o.ZoomBy,z=o.ZoomZIndex,fms=o.ZoomFadeDuration,auto=o.AutoStart,sz=obj[mde[1]],slide=obj.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),lst=imgs[imgs.length-1],max,ary=[],clone,img,imgary=[],z0=0,z1=1,z2=0;
     obj.style.overflow='hidden';
     slide.style.position='absolute';
     slide.style[mde[3]]='3000px';
     max=lst[mde[2]]+lst[mde[3]];
     if (typeof(mag)=='number'){
      for (;z0<imgs.length;z0++){
       img=document.createElement('IMG');
       img.src=imgs[z0].src;
       img.style.position='absolute';
       img.style.zIndex=isFinite(z*1)?z:'101';
       img.style.left='-3000px';
       img.style.width=imgs[z0].width*mag/100+'px';
       img.style.height=imgs[z0].height*mag/100+'px';
       document.body.appendChild(img);
       imgary[z0]=img;
       oop.opacity(imgs[z0],0);
       oop.addevt(img,'mouseout','hide',img);
      }
     }
     clone=slide.cloneNode(true);
     ary[0]=[0,imgs];
     for (;z1<Math.ceil(sz/max)+1;z1++){
      clone=clone.cloneNode(true);
      clone.style[mde[0]]=max*z1+'px';
      clone.style[mde[4]]='0px';
      slide.appendChild(clone);
      ary[z1]=[max*z1,clone.getElementsByTagName('IMG')];
     }
     if (typeof(mag)=='number'){
      oop.imgs=imgs;
      imgs=slide.getElementsByTagName('IMG');
      for (;z2<imgs.length;z2++){
       oop.addevt(imgs[z2],'mouseup','zoom',imgs[z2],z2%imgary.length);
      }
     }
     slide.style[mde[0]]=-max+'px';
     oop.mde=mde;
     oop.obj=slide;
     oop.sz=sz;
     oop.ary=ary;
     oop.imgary=imgary;
     oop.max=max;
     oop.ud=typeof(ud)=='string'&&ud.charAt(0).toUpperCase()=='C';
     oop.scroll=false;
     oop.now=oop.ud?-max:0;
     oop.ms=typeof(ms)=='number'?ms*1000:sz*20;
     oop.fms=typeof(fms)=='number'?fms:1000;
     oop.addevt(obj,'mouseover','Pause');
     oop.addevt(obj,'mouseout','Auto');
     oop.animate(mde[0],oop.obj,oop.now+10,oop.now,new Date(),100,this.dly);
     if (auto!=false){
      oop.Auto(typeof(auto)=='number'?auto:500);
     }
    }
    
    zxcFadeZoomSlider.prototype={
    
    
     Scroll:function(){
      var oop=this,to=oop.ud?0:-oop.max,mS=oop.ms*Math.abs((to-oop.now)/(oop.max));
      clearTimeout(oop.dly);
      oop.scroll=true;
      oop.animate(oop.mde[0],oop.obj,oop.now,to,new Date(),mS,this.dly);
     },
    
     Pause:function(){
      clearTimeout(this.dly);
      this.scroll=false;
     },
    
     Auto:function(ms){
      var oop=this;
      clearTimeout(oop.dly);
      oop.dly=setTimeout(function(){  oop.Scroll(); },ms||500);
     },
    
     animate:function(mde,obj,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (mde!='opacity'){
        oop.now=now;
        obj.style[mde]=now+'px';
        oop.fade();
       }
       else {
        oop.opacity(obj,now);
       }
      }
      if (oop.scroll||mde=='opacity'){
       if (ms<mS){
        to=setTimeout(function(){ oop.animate(mde,obj,f,t,srt,mS,to); },10);
       }
       else {
        if (mde!='opacity'){
         oop.now=oop.ud?-oop.max:0;
         oop.Scroll();
        }
        else if (t==0){
         obj.style.left='-3000px';
         oop.scroll=true;
         oop.Auto();
        }
       }
      }
     },
    
     fade:function(){
      var oop=this,mde=oop.mde,ary=oop.ary,c=oop.sz/2,imgs,z0=0,z0a,img,lft,w;
      for (;z0<ary.length;z0++){
       for (var z0a=0;z0a<ary[z0][1].length;z0a++){
        img=ary[z0][1][z0a];
        w=img[mde[3]];
        lft=oop.now+ary[z0][0]+img[mde[2]];
        if (lft>-w&&lft<c-w){
         oop.opacity(img,(lft+w)/c*100);
        }
        else if (lft>c&&lft<oop.sz){
         oop.opacity(img,100-((lft-c)/c*100));
        }
        else if (lft>0&&lft<oop.sz){
         oop.opacity(img,100);
        }
       }
      }
     },
    
     zoom:function(img,nu){
      var oop=this,p=oop.pos(img),mimg=oop.imgary[nu];
      clearTimeout(oop.dly);
      setTimeout(function(){ clearTimeout(oop.dly) },110);
      mimg.style.left=p[0]-(mimg.width-img.width)/2+'px';
      mimg.style.top=p[1]-(mimg.height-img.height)/2+'px';
      oop.scroll=false;
      oop.animate('opacity',mimg,5,100,new Date(),oop.fms,oop.to);
     },
    
     hide:function(mimg){
      this.animate('opacity',mimg,100,0,new Date(),this.fms,this.to);
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     opacity:function(obj,o){
      obj.style.filter='alpha(opacity='+o+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=o/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
     }
    
    }
    
    
    /*]]>*/
    </script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new zxcFadeZoomSlider({
     ID:'tst',                    // the unique ID name of the slider parent node.                  (string)
     Mode:'horizontal',           //(optional) the mode of execution, 'horizontal' or 'verticla'.   (string, default = 'horizontal')
     ScrollDuration:16,           //(optional) the scroll duration in seconds.                      (number, default = (parent width*20)/1000)
     ScrollDirection:'clockwise', //(optional) the scroll dirction, 'anticlockwise' or 'clockwise'. (string, default = 'anticlockwise')
     AutoStart:2000,              //(optional) the delay before scrolling or false  = no auto start (number, default = 500)
     ZoomBy:150,                  //(optional) the percentage zoom of the image.                    (number, default = no zoom)
     ZoomFadeDuration:1000,       //(optional) the zoom fade duration in milli seconds.             (number, default = 1000)
     ZoomZIndex:101               //(optional) the z-Index of the zoom image.                       (number, default = 101)
    });
    
    new zxcFadeZoomSlider({
     ID:'tstV',
     Mode:'vertical',
     ScrollDirection:'anticlockwise',
     ZoomBy:150
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
     <div id="tst" class="slider" >
      <div>
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
      </div>
     </div>
    
    
     <div id="tstV" class="sliderV" >
      <div>
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
      </div>
     </div>
    
    
    
    
    </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. #3
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    That really worked..

    Thanks a lot

  4. #4
    Join Date
    Feb 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hello, elite coders. I would like to ask is it possible
    to drag/ copy image from the dynamic image array?

  5. #5
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    When using the script, it leaves a lot of blank space at the bottom of the page...

    :-(

    Any solution?

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

    Default

    see changes in red

    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[*/
    
    .slider {
      position:absolute;left:10px;top:200px;width:700px;height:150px;border:solid red 1px;
    }
    
    .slider IMG{
      position:relative;float:left;cursor:pointer;
    }
    
    .sliderV {
      position:absolute;left:800px;top:10px;width:200px;height:500px;border:solid red 1px;
    }
    
    .sliderV IMG{
      position:relative;float:left;cursor:pointer;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Fade Zoom Slider. (21-January-2012) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    // Functional Code(4.67K)
    
    function zxcFadeZoomSlider(o){
     var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetHeight','offsetTop','height','left']:['left','offsetWidth','offsetLeft','width','top'],obj=document.getElementById(o.ID),ud=o.ScrollDirection,ms=o.ScrollDuration,mag=o.ZoomBy,z=o.ZoomZIndex,fms=o.ZoomFadeDuration,auto=o.AutoStart,sz=obj[mde[1]],slide=obj.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),lst=imgs[imgs.length-1],max,ary=[],clone,img,imgary=[],z0=0,z1=1,z2=0;
     obj.style.overflow='hidden';
     slide.style.position='absolute';
     slide.style[mde[3]]='3000px';
     max=lst[mde[2]]+lst[mde[3]];
     if (typeof(mag)=='number'){
      for (;z0<imgs.length;z0++){
       img=document.createElement('IMG');
       img.src=imgs[z0].src;
       img.style.position='absolute';
       img.style.zIndex=isFinite(z*1)?z:'101';
       img.style.left='-3000px';
       img.style.top='-3000px';
       img.style.width=imgs[z0].width*mag/100+'px';
       img.style.height=imgs[z0].height*mag/100+'px';
       document.body.appendChild(img);
       imgary[z0]=img;
       oop.opacity(imgs[z0],0);
       oop.addevt(img,'mouseout','hide',img);
      }
     }
     clone=slide.cloneNode(true);
     ary[0]=[0,imgs];
     for (;z1<Math.ceil(sz/max)+1;z1++){
      clone=clone.cloneNode(true);
      clone.style[mde[0]]=max*z1+'px';
      clone.style[mde[4]]='0px';
      slide.appendChild(clone);
      ary[z1]=[max*z1,clone.getElementsByTagName('IMG')];
     }
     if (typeof(mag)=='number'){
      oop.imgs=imgs;
      imgs=slide.getElementsByTagName('IMG');
      for (;z2<imgs.length;z2++){
       oop.addevt(imgs[z2],'mouseup','zoom',imgs[z2],z2%imgary.length);
      }
     }
     slide.style[mde[0]]=-max+'px';
     oop.mde=mde;
     oop.obj=slide;
     oop.sz=sz;
     oop.ary=ary;
     oop.imgary=imgary;
     oop.max=max;
     oop.ud=typeof(ud)=='string'&&ud.charAt(0).toUpperCase()=='C';
     oop.scroll=false;
     oop.now=oop.ud?-max:0;
     oop.ms=typeof(ms)=='number'?ms*1000:sz*20;
     oop.fms=typeof(fms)=='number'?fms:1000;
     oop.addevt(obj,'mouseover','Pause');
     oop.addevt(obj,'mouseout','Auto');
     oop.animate(mde[0],oop.obj,oop.now+10,oop.now,new Date(),100,this.dly);
     if (auto!=false){
      oop.Auto(typeof(auto)=='number'?auto:500);
     }
    }
    
    zxcFadeZoomSlider.prototype={
    
    
     Scroll:function(){
      var oop=this,to=oop.ud?0:-oop.max,mS=oop.ms*Math.abs((to-oop.now)/(oop.max));
      clearTimeout(oop.dly);
      oop.scroll=true;
      oop.animate(oop.mde[0],oop.obj,oop.now,to,new Date(),mS,this.dly);
     },
    
     Pause:function(){
      clearTimeout(this.dly);
      this.scroll=false;
     },
    
     Auto:function(ms){
      var oop=this;
      clearTimeout(oop.dly);
      oop.dly=setTimeout(function(){  oop.Scroll(); },ms||500);
     },
    
     animate:function(mde,obj,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (mde!='opacity'){
        oop.now=now;
        obj.style[mde]=now+'px';
        oop.fade();
       }
       else {
        oop.opacity(obj,now);
       }
      }
      if (oop.scroll||mde=='opacity'){
       if (ms<mS){
        to=setTimeout(function(){ oop.animate(mde,obj,f,t,srt,mS,to); },10);
       }
       else {
        if (mde!='opacity'){
         oop.now=oop.ud?-oop.max:0;
         oop.Scroll();
        }
        else if (t==0){
         obj.style.left='-3000px';
         obj.style.top='-3000px';
         oop.scroll=true;
         oop.Auto();
        }
       }
      }
     },
    
     fade:function(){
      var oop=this,mde=oop.mde,ary=oop.ary,c=oop.sz/2,imgs,z0=0,z0a,img,lft,w;
      for (;z0<ary.length;z0++){
       for (var z0a=0;z0a<ary[z0][1].length;z0a++){
        img=ary[z0][1][z0a];
        w=img[mde[3]];
        lft=oop.now+ary[z0][0]+img[mde[2]];
        if (lft>-w&&lft<c-w){
         oop.opacity(img,(lft+w)/c*100);
        }
        else if (lft>c&&lft<oop.sz){
         oop.opacity(img,100-((lft-c)/c*100));
        }
        else if (lft>0&&lft<oop.sz){
         oop.opacity(img,100);
        }
       }
      }
     },
    
     zoom:function(img,nu){
      var oop=this,p=oop.pos(img),mimg=oop.imgary[nu];
      clearTimeout(oop.dly);
      setTimeout(function(){ clearTimeout(oop.dly) },110);
      mimg.style.left=p[0]-(mimg.width-img.width)/2+'px';
      mimg.style.top=p[1]-(mimg.height-img.height)/2+'px';
      oop.scroll=false;
      oop.animate('opacity',mimg,5,100,new Date(),oop.fms,oop.to);
     },
    
     hide:function(mimg){
      this.animate('opacity',mimg,100,0,new Date(),this.fms,this.to);
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
     opacity:function(obj,o){
      obj.style.filter='alpha(opacity='+o+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=o/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
     }
    
    }
    
    
    /*]]>*/
    </script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new zxcFadeZoomSlider({
     ID:'tst',                    // the unique ID name of the slider parent node.                  (string)
     Mode:'horizontal',           //(optional) the mode of execution, 'horizontal' or 'verticla'.   (string, default = 'horizontal')
     ScrollDuration:16,           //(optional) the scroll duration in seconds.                      (number, default = (parent width*20)/1000)
     ScrollDirection:'clockwise', //(optional) the scroll dirction, 'anticlockwise' or 'clockwise'. (string, default = 'anticlockwise')
     AutoStart:2000,              //(optional) the delay before scrolling or false  = no auto start (number, default = 500)
     ZoomBy:150,                  //(optional) the percentage zoom of the image.                    (number, default = no zoom)
     ZoomFadeDuration:1000,       //(optional) the zoom fade duration in milli seconds.             (number, default = 1000)
     ZoomZIndex:101               //(optional) the z-Index of the zoom image.                       (number, default = 101)
    });
    
    new zxcFadeZoomSlider({
     ID:'tstV',
     Mode:'vertical',
     ScrollDirection:'anticlockwise',
     ZoomBy:150
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    
     <div id="tst" class="slider" >
      <div>
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
      </div>
     </div>
    
    
     <div id="tstV" class="sliderV" >
      <div>
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
      </div>
     </div>
    
    
    
    
    </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/

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

    bootersbooters (02-20-2012)

  8. #7
    Join Date
    Dec 2011
    Posts
    19
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks for quick reply, that worked

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
  •