PDA

View Full Version : modify conveyor belt script



lordrt
08-17-2010, 06:53 AM
1)Modify Conveyor Belt slideshow script to allow zoom on mouse over

2) Script URL (on DD) : http://www.dynamicdrive.com/dynamicindex14/leftrightslide.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?

vwphillips
08-17-2010, 04:15 PM
<!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>