Log in

View Full Version : Viewing two images using draggable slider


rsuleyman
02-14-2010, 02:57 PM
Hello,

I am trying to find some kind of code that is similar to Lightbox but allows you to view two images using a draggable bar. So for example, you have one image on top of the other and when you drag the bar across the image, it reveals the one underneath as far as you've dragged the bar. (See the attached image)

I need it to work in the same way as a Lightbox gallery as well, though.

Is there a way to do this using javascript or flash or something?

I hope this makes sense.
vwphillips
02-14-2010, 11:05 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:absolute;overflow:hidden;width:200px;height:150px;border:solid black 1px;
}

#tst IMG{
position:absolute;left:0px;top:0px;width:200px;height:150px;
}

.drag{
position:absolute;left:0px;top:0px;width:5px;height:150px;background-Color:red;
}
/*]]>*/
</style>


</head>

<body>
<div id="tst" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
</div>

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

function DragSlide(o){
var obj=document.getElementById(o.ID);
var clds=obj.childNodes;
for (var ary=[],z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push(clds[z0]);
}
}
this.slides=[];
for (var drag,z1=1;z1<ary.length;z1++){
this.slides[z1]=zxcES('DIV',{position:'absolute',zIndex:z1+'',left:'0px',top:'0px'},obj);
zxcES(ary[z1],{position:'absolute',zIndex:'0',left:'0px',top:'0px'},this.slides[z1]);
drag=zxcES('DIV',{position:'absolute',zIndex:'1',left:'0px',top:'0px'},this.slides[z1]);
drag.className=o.DragClass;
this.addevt(drag,'mousedown','MseDown',this.slides[z1]);
}
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
this.mm=[0,zxcLTZ(obj,'width')-zxcLTZ(drag,'width')];
this.dx=true;
this.drag=false;
}

DragSlide.prototype.MseDown=function(ev,obj){
this.dobj=obj;
this.down(ev);
}

DragSlide.prototype.down=function(ev){
if (!this.drag){
document.onselectstart=function(event){ window.event.returnValue=false; };
this.lastX=ev.clientX;
this.lastY=ev.clientY;
this.pos=[zxcLTZ(this.dobj,'left'),zxcLTZ(this.dobj,'top')];
this.drag=true;
}
if (ev.target) ev.preventDefault();
return false;
}

DragSlide.prototype.move=function(ev){
if (this.drag){
var mx=ev.clientX,my=ev.clientY,x=this.pos[0]+(mx-this.lastX),y=this.pos[1]+(my-this.lastY);
if (this.dx&&x>=this.mm[0]&&x<=this.mm[1]){
this.pos[0]=x;
this.dobj.style.left=this.pos[0]+'px';
this.lastX=mx;
}
if (this.dy&&y>=this.mm[2]&&y<=this.mm[3]){
this.pos[1]=y;
this.dobj.style.top=this.pos[1]+'px';
this.lastY=my;
}
}
if (ev.target) ev.preventDefault();
return false;
}

DragSlide.prototype.up=function(ev){
if (this.drag){
this.drag=false;
document.onselectstart=null;
}
}

DragSlide.prototype.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); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcLTZ(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')],10);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()),10);
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}


var oop=new DragSlide({
ID:'tst',
DragClass:'drag'
});

/*]]>*/
</script>
</body>

</html>
rsuleyman
02-15-2010, 08:26 PM
Thanks vwphillips, that's close to what I need. However, I need both of the images to stay where they are with the slider action simply 'wiping' the top image away instead of moving it.

Sorry, I can't find an example anywhere. I hope this makes sense.

Thanks for your help so far.
vwphillips
02-16-2010, 09:13 AM
<!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:absolute;overflow:hidden;width:200px;height:150px;border:solid black 1px;
}

#tst IMG{
position:absolute;left:0px;top:0px;width:200px;height:150px;
}

.drag{
position:absolute;left:0px;top:0px;width:5px;height:150px;background-Color:red;
}
/*]]>*/
</style>


</head>

<body>
<div id="tst" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
</div>

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

function DragSlide(o){
var obj=document.getElementById(o.ID);
var clds=obj.childNodes;
for (var ary=[],z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
ary.push(clds[z0]);
}
}
this.slides=[];
for (var drag,z1=1;z1<ary.length;z1++){
this.slides[z1]=zxcES('DIV',{position:'absolute',overflow:'hidden',zIndex:z1+'',left:'0px',top:'0px',width:'100%',height:zxcLTZ(obj,'height')+'px'},obj);
zxcES(ary[z1],{position:'absolute',zIndex:'0',left:'0px',top:'0px'},this.slides[z1]);
drag=zxcES('DIV',{position:'absolute',zIndex:'1',left:'0px',top:'0px'},this.slides[z1]);
drag.className=o.DragClass;
this.addevt(drag,'mousedown','MseDown',this.slides[z1]);
}
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
this.mm=[0,zxcLTZ(obj,'width')-zxcLTZ(drag,'width')];
this.dx=true;
this.drag=false;
}

DragSlide.prototype.MseDown=function(ev,obj){
this.dobj=obj;
this.down(ev);
}

DragSlide.prototype.down=function(ev){
if (!this.drag){
document.onselectstart=function(event){ window.event.returnValue=false; };
this.lastX=ev.clientX;
this.lastY=ev.clientY;
this.pos=[zxcLTZ(this.dobj,'left'),zxcLTZ(this.dobj,'top')];
this.img=this.dobj.getElementsByTagName('IMG')[0];
this.drag=true;
}
if (ev.target) ev.preventDefault();
return false;
}

DragSlide.prototype.move=function(ev){
if (this.drag){
var mx=ev.clientX,my=ev.clientY,x=this.pos[0]+(mx-this.lastX),y=this.pos[1]+(my-this.lastY);
if (this.dx&&x>=this.mm[0]&&x<=this.mm[1]){
this.pos[0]=x;
this.dobj.style.left=this.pos[0]+'px';
this.img.style.left=-this.pos[0]+'px';
this.lastX=mx;
}
if (this.dy&&y>=this.mm[2]&&y<=this.mm[3]){
this.pos[1]=y;
this.dobj.style.top=this.pos[1]+'px';
this.lastY=my;
}
}
if (ev.target) ev.preventDefault();
return false;
}

DragSlide.prototype.up=function(ev){
if (this.drag){
this.drag=false;
document.onselectstart=null;
}
}

DragSlide.prototype.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); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcLTZ(obj,p){
if (obj.currentStyle) return parseInt(obj.currentStyle[p.replace(/-/g,'')],10);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p.toLowerCase()),10);
}

function zxcES(ele,style,par,txt){
if (typeof(ele)=='string') ele=document.createElement(ele);
for (key in style) ele.style[key]=style[key];
if (par) par.appendChild(ele);
if (txt) ele.appendChild(document.createTextNode(txt));
return ele;
}


var oop=new DragSlide({
ID:'tst',
DragClass:'drag'
});

/*]]>*/
</script>
</body>

</html>