I'm looking for a basic image slideshow, similar to: this.
However my photos have different width and height and I want the slider to enable it.
Thanks in advanced!
Printable View
I'm looking for a basic image slideshow, similar to: this.
However my photos have different width and height and I want the slider to enable it.
Thanks in advanced!
The best i can suggest is this: http://www.dynamicdrive.com/dynamici...box2/index.htm.
Check Demo 2
thank you but it doesn't match with what I'm looking for
Continuous Reel Slideshow maybe?
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[*/
.ss {
position:relative;width:300px;height:300px;border:solid red 1px;
}
/*]]>*/
</style></head>
<body>
<div id="ss1" class="ss" >
<img src="http://pinuy-binuy.co.il/images/project1.jpg" width="200" />
<img src="http://pinuy-binuy.co.il/images/project2.jpg" />
<img src="http://pinuy-binuy.co.il/images/project3.jpg" />
</div>
<input type="button" name="" value="NEXT" onclick="zxcSSS.Next('ss1',1);" />
<input type="button" name="" value="BACK" onclick="zxcSSS.Next('ss1',-1);" />
<input type="button" name="" value="Pause" onclick="zxcSSS.Pause('ss1');" />
<input type="button" name="" value="Auto" onclick="zxcSSS.Auto('ss1');" />
<input type="button" name="" value="GoTo 0" onclick="zxcSSS.GoTo('ss1',0);" />
<input type="button" name="" value="GoTo 1" onclick="zxcSSS.GoTo('ss1',1);" />
<input type="button" name="" value="GoTo 2" onclick="zxcSSS.GoTo('ss1',2);" />
<div id="ss2" class="ss" onmouseover="zxcSSS.Pause('ss2');" onmouseout="zxcSSS.Auto('ss2');" >
<img src="http://pinuy-binuy.co.il/images/project1.jpg" width="200" />
<img src="http://pinuy-binuy.co.il/images/project2.jpg" />
<img src="http://pinuy-binuy.co.il/images/project3.jpg" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Slide Show (31-July-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/
var zxcSSS={
GoTo:function(id,n){
var o=this['zxc'+id];
if (o){
this.Pause(id);;
if (o.a[n]&&o.n!=n){
o.ud=n>o.n?1:-1;
this.rotate(o,n);
}
}
},
Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},
Auto:function(id,ms){
var o=this['zxc'+id];
if (o){
o.to=setTimeout(function(){ zxcSSS.rotate(o,true); },ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
init:function(o){
var p=document.getElementById(o.ID),m=o.Mode,ms=o.Animate,h=o.AutoHold,s=o.AutoStart,i=p?p.getElementsByTagName('IMG'):null;
if (i[1]){
var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['top','offsetHeight','offsetTop','left','offsetWidth']:['left','offsetWidth','offsetLeft','top','offsetHeight'],z0=0;
o.a=[];
for (;z0<i.length;z0++){
i[z0].style.position='absolute';
i[z0].style[m[0]]=(z0!=0?p[m[1]]:(p[m[1]]-i[z0][m[1]])/2)+'px';
i[z0].style[m[3]]=(p[m[4]]-i[z0][m[4]])/2+'px';
o.a[z0]=[i[z0],m[0]];
}
o.id=o.ID;
o.lgth=o.a.length-1;
o.p=p;
o.m=m;
o.n=0;
o.ud=1;
o.ms=typeof(ms)=='number'&&ms>100?ms:1000;
o.h=typeof(h)=='number'&&h>100?h:o.ms*4;
p.style.overflow='hidden';
this['zxc'+o.ID]=o;
typeof(s)=='number'&&s>0?this.Auto(o.id,s):null;
}
},
rotate:function(o,n){
this.Pause(o.id);
o.auto=n===true;
var n=o.auto?o.n+o.ud:n,a=o.a[o.n],f=a[0][o.m[2]],t=o.ud>0?-a[0][o.m[1]]:o.p[o.m[1]];
n=n<0?o.lgth:n>o.lgth?0:n;
this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/o.p[o.m[1]]));
a=o.a[n];
f=o.ud>0?o.p[o.m[1]]:-a[0][o.m[1]],t=(o.p[o.m[1]]-a[0][o.m[1]])/2;
this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/o.p[o.m[1]]),true);
o.n=n;
},
animate:function(o,a,f,t,srt,mS,nxt){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[0].style[a[1]]=n+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
}
else {
a[0].style[a[1]]=t+'px';
nxt&&o.auto?oop.Auto(o.id,o.h):null;
}
}
}
zxcSSS.init({
ID:'ss1', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the display mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Animate:1000, //(optional) the animation duration in milliseconds. (number, default = 1000)
AutoHold :2000, //(optional) the auto rotate 'hold' delay in milliseconds. (number, default = Animate*4)
AutoStart:3000 //(optional) the auto rotate auto start delay in milliseconds. (number, default = no auto start)
});
zxcSSS.init({
ID:'ss2',
Mode:'Vertical',
Animate:1000,
AutoHold :2000,
AutoStart:3000
});
/*]]>*/
</script>
</body>
</html>