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

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

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

Thread: Viewing two images using draggable slider

Thread Tools

Search Thread

Viewing two images using draggable slider

Bookmarks

Bookmarks

Posting Permissions