...

View Full Version : slider function



ground0
09-12-2011, 03:12 PM
I would like to change the variable of an object with a slider. For example, I have an object with variable zoom, how would I add a slider function to the script to change this variable? I am a little confused about event handling. Any help would be much appreciated.

I am posting the code (which actually was done by one of this forum's members) in case it may make understanding/explanation simpler.



<!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[*/

.tstparent {
position:relative;overflow:hidden;left:50px;top:50px;width:800px;height:500px;border:solid red 1px;
}

#tst {
position:relative;left:0px;top:0px;width:700px;height:500px;
}

.window {
width:200px;height:150px;border:solid white 2px;
}


/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (28-August-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


function zxcZoomImage(o){
var img = document.getElementById(o.ID);
var obj = img.parentNode;
var window = document.createElement('DIV');
var zimg = document.createElement('IMG');
var src = o.ZoomSRC;
var zoom = o.Zoom;
zoom = typeof(zoom)=='number'?zoom:2;
var os=o.ZoomWindowOffset;

window.style.position = 'absolute';
window.style.overflow = 'hidden';
window.style.visibility = 'hidden';
window.style.zIndex= '2' ;
window.className = o.WindowClassName;
zimg.style.position = 'absolute';
zimg.style.width = img.width*zoom+'px';
zimg.style.height = img.height*zoom+'px';
zimg.src = typeof(src)=='string'?src:img.src;
window.appendChild(zimg);
obj.appendChild(window);
this.window = window;
this.zimg = zimg;
this.wh = [obj.offsetWidth,obj.offsetHeight];
this.zoom = zoom;
this.os = typeof(os)=='object'&& os.constructor==Array && typeof(os[0])=='number'&& typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
this.wos = [-(zoom-1)*window.offsetWidth/2,-(zoom-1)*window.offsetHeight/2]; // to center the zoom on the pointer
this.addevt(document,'mousemove','imgzoom',obj);
}

zxcZoomImage.prototype={

imgzoom:function(e,obj){
var mse=this.mse(e);
var pos=this.pos(obj);
var x=mse[0]-pos[0];
var y=mse[1]-pos[1];
var wh=this.wh;
var os=this.os;
var wos=this.wos;
var window=this.window;
var zimg=this.zimg;
var zoom=this.zoom;
if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
x+=os[0];
y+=os[1];
window.style.left=x+'px';
window.style.top=y+'px';
zimg.style.left=-x*zoom+wos[0]+'px';
zimg.style.top=-y*zoom+wos[1]+'px';
window.style.visibility='visible';
}
else {
window.style.visibility='hidden';
}
},

mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener)
o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if
(o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}

} // end of prototype declarations


/*]]>*/
</script>


<script type="text/javascript">
/*<![CDATA[*/

function Init(){

new zxcZoomImage({
ID:'tst', // the unique ID name of the image to zoom. (string)
WindowClassName:'window', // the class name of the zoom window DIV element. (string)
Zoom:4, //(optional) the zoom factor. (number, default = 2)
ZoomSRC:'scia_no2_trop_2009.gif', //(optional) the file path and name of the zoom image.
//... (string, default = the src of the image to zoom)
ZoomWindowOffset:[-100,-75] //(optional) the zoom window x and y offsets from the mouse position.
//... (array, default = centered on the mouse position)
});
}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>

</head>

<body>

<noscript>
<!-- <meta http-equiv="refresh" content="0;url=index2.htm;" /> -->
<b>Your browser does not support JavaScript or it is disabled. <br>
Please enable JavaScript to be able to zoom the map. </b>
</noscript>


<div class="tstparent" >
<img id="tst" src="scia_no2_trop_2009.gif" alt="img" />
</div>


</body>


</html>

vwphillips
09-12-2011, 06:54 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[*/

.tstparent {
position:relative;left:100px;top:100px;width:400px;height:300px;border:solid red 1px;
}

#tst {
position:relative;left:0px;top:0px;width:400px;height:300px;
}

.window {
width:100px;height:75px;border:solid red 1px;
}

.slider {
position:relative;overflow:hidden;left:100px;top:110px;width:400px;height:30px;border:solid red 1px;background-Color:#FFFFCC;
}

#slide {
position:absolute;overflow:hidden;left:0px;top:0px;width:40px;height:30px;background-Color:#FFCC66;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (12-September-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


function zxcZoomImage(o){
var img=document.getElementById(o.ID),obj=img.parentNode,window=document.createElement('DIV'),zimg=docum ent.createElement('IMG'),src=o.ZoomSRC,zoom=o.Zoom,zoom=typeof(zoom)=='number'?zoom:2,os=o.ZoomWindo wOffset,opac=o.Opacity,ms=o.OpacityDuration,slide=document.getElementById(o.SlideID),p,mz=o.MaxZoom;
window.style.position='absolute';
window.style.overflow='hidden';
window.style.visibility='hidden';
window.style.zIndex='2';
window.className=o.WindowClassName;
zimg.style.position='absolute';
zimg.style.width=img.width*zoom+'px';
zimg.style.height=img.height*zoom+'px';
zimg.src=typeof(src)=='string'?src:img.src;
window.appendChild(zimg);
obj.appendChild(window);
this.window=window;
this.zimg=zimg;
this.img=img;
this.wh=[obj.offsetWidth,obj.offsetHeight];
this.zoom=zoom;
this.opac=typeof(opac)=='number'?opac:100;
this.now=100;
this.ms=typeof(ms)=='number'?ms:1000;
this.wos=[-window.offsetWidth/2,-window.offsetHeight/2];
this.os=typeof(os)=='object'&&os.constructor==Array&&typeof(os[0])=='number'&&typeof(os[1])=='number'?os:this.wos;
this.addevt(document,'mousemove','imgzoom',img);
var slide=document.getElementById(o.SlideID),p;
if (slide&&typeof(mz)=='number'&&mz>zoom){
p=slide.parentNode;
this.slide=slide;
this.slidemax=p.offsetWidth-slide.offsetWidth;
this.slide.style.left=this.slidemax/(mz/zoom)+'px';
this.maxzoom=mz-1;
this.drag=false;
this.addevt(slide,'mousedown','msedown');
this.addevt(p,'mousemove','msedrag');
this.addevt(document,'mouseup','mseup');
}
}

zxcZoomImage.prototype={

imgzoom:function(e,img){
var mse=this.mse(e),pos=this.pos(img),x=mse[0]-pos[0],y=mse[1]-pos[1],wh=this.wh,os=this.os,wos=this.wos,window=this.window,zimg=this.zimg,zoom=this.zoom,ud=x>0&&x<wh[0]&&y>0&&y<wh[1];
if (ud){
window.style.left=(x+=os[0])+'px';
window.style.top=(y+=os[1])+'px';
zimg.style.left=-(x-wos[0])*zoom-wos[0]+'px';
zimg.style.top=-(y-wos[1])*zoom-wos[1]+'px';
}
window.style.visibility=ud?'visible':'hidden';
this.opacity(img,ud?this.opac:100);
},

mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},

pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},

opacity:function(img,to){
clearTimeout(this.dly);
this.animate(img,this.now,to,new Date(),this.ms*Math.abs((to-this.now)/(100-this.opac)));
},

animate:function(img,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
img.style.filter='alpha(opacity='+now+')';
img.style.opacity=img.style.MozOpacity=img.style.WebkitOpacity=img.style.KhtmlOpacity=now/100-.001;
this.now=Math.floor(now);
}
if (ms<mS){
this.dly=setTimeout(function(){ oop.animate(img,f,t,srt,mS); },10);
}
else {
this.now=t;
}
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
},

msedown:function(e){
this.msex=this.mse(e)[0];
this.slidex=this.slide.offsetLeft
this.drag=true;
},

msedrag:function(e){
if (this.drag){
var msex=this.mse(e)[0],slidex=this.slidex+=msex-this.msex,max=this.slidemax,img=this.img,zimg=this.zimg;
slidex=Math.min(Math.max(slidex,0),max);
this.slide.style.left=slidex+'px';
this.zoom=(slidex/max)*this.maxzoom+1;
zimg.style.width=img.width*this.zoom+'px';
zimg.style.height=img.height*this.zoom+'px';
this.slidex=slidex;
this.msex=msex;
}
},

mseup:function(e){
this.drag=false;
}

}

/*]]>*/
</script>


<script type="text/javascript">
/*<![CDATA[*/

function Init(){

new zxcZoomImage({
ID:'tst', // the unique ID name of the image to zoom. (string)
WindowClassName:'window', // the class name of the zoom window DIV element. (string)
Zoom:1.5, //(optional) the zoom factor. (number, default = 2)
ZoomSRC:'http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg', //(optional) the file path and name of the zoom image. (string, defaule = the src of the image to zoom)
ZoomWindowOffset:[0,-75], //(optional) the zoom window x and y offsets from the mouse position. (array, default = centered on the mouse position)
Opacity:70, //(optional) the mouseover opacity of the image to zoom. (number, default = 100)
OpacityDuration:550, //(optional) the fade transition in milli seconds. (number, default = 1)
SlideID:'slide', //(optional) the unique ID name of the slide element. (string, default = no slide zoom)
MaxZoom:4 //(optional) the maximum slide zoom factor. (number, default = no slide zoom)
});
}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>


</head>

<body>

<div class="tstparent" >
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
</div>
<div class="slider" >
<div id="slide" ></div>
</div>

</body>

</html>

ground0
09-12-2011, 07:52 PM
Thank you very much for everything again! Works like a charm!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum