Need a script for image slide

**bootersbooters** · 01-21-2012, 06:19 AM

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.

**vwphillips** · 01-21-2012, 05:16 PM

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>

**bootersbooters** · 01-21-2012, 07:05 PM

That really worked..

Thanks a lot

**newbieCoder** · 02-05-2012, 09:12 AM

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

**bootersbooters** · 02-19-2012, 10:40 AM

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

:-(

Any solution?

**vwphillips** · 02-19-2012, 02:30 PM

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>

**bootersbooters** · 02-20-2012, 04:16 AM

Thanks for quick reply, that worked

Thread: Need a script for image slide

Thread Tools

Search Thread

Need a script for image slide

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

Bookmarks

Bookmarks

Posting Permissions