PDA

View Full Version : Resolved Gallery kind of thing.



salman500
08-05-2009, 04:59 PM
hey everyone

i want to make this content box on my website that changes dynamically between 4 images automatically after every 10 seconds, and the user can also switch between the 4 by pressing thumbnail like images..
Its working should be exactly as how it is on this website: http://www.barackobama.com/index.php

im planning on using a total of 8 images.
4 to serve the purpose of thumbnails, basically buttons with text, that darken or switch with another image when active. and 4 main images that display the main content.

the website i linked to will explain it all.
I want the exact same thing along with the small arrow that slides along.

Either link me to a scrip, or post the script here.
Will really appreciate it.

Thanks in advance!

vwphillips
08-06-2009, 12: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:relative;width:370px;height:310px;border:solid black 1px;
}

.frames {
position:relative;width:370px;height:250px;border:solid black 1px;
}

.frame {
position:absolute;left:0px;top:0px;width:370px;height:250px;background-Color:#FFCC66;;
}
.tabs {
position:relative;width:370px;height:50px;border:solid red 1px;
}

.tab {
position:relative;width:80px;height:50px;background-Color:#FFCC66;float:left;margin-Right:1px;
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Two.gif);
}
.tabon {
background-Color:#339900;
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}
.pointer {
position:absolute;left:20px;top:0px;width:20px;height:20px;
}

/*]]>*/
</style>

<script language="JavaScript" src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript">
// see http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.htm
</script>

<script type="text/javascript">
/*<![CDATA[*/
//' by Vic Phillips 06-August-2009
function zxcTabSS(id,fcls,tcls,pcls,ms){
var obj=document.getElementById(id);
var frames=zxcByClassName(fcls,obj);
this.frames=[];
for (var z0=0;z0<frames.length;z0++){
this.frames[z0]=zxcBAnimator('opacity',frames[z0],50,z0!=frames.length-1?0:100,10);
}
this.frames=this.frames.reverse();
var tabs=zxcByClassName(tcls,obj);
this.min=zxcSVInt(tabs[0],'width');
this.max=this.min;
while (tabs[tabs.length-1].offsetTop<5){
tabs[0].style.width=(++this.max)+'px';
}
this.max--;
var pointer=zxcByClassName(pcls,obj)[0];
if (pointer){
this.ppos=[zxcSVInt(pointer,'left')];
for (var z0=1;z0<tabs.length;z0++){
tabs[z0-1].style.width=this.min+'px';
tabs[z0].style.width=this.max+'px';
this.ppos[z0]=tabs[z0].offsetLeft+this.ppos[0];
}
this.pointer=zxcBAnimator('left',pointer,this.ppos[0]-1,this.ppos[0],10);
}
this.tabs=[];
for (var z0=0;z0<tabs.length;z0++){
this.addevt(tabs[z0],'mouseup','GoTo',z0);
this.tabs[z0]=zxcBAnimator('width',tabs[z0],this.min-1,z0!=0?this.min:this.max,10);
}
this.off=tcls;
this.on=tcls+' '+tcls+'on';
this.ms=ms||1000;
this.to=null;
this.lst=0;
}

zxcTabSS.prototype.GoTo=function(nu){
clearTimeout(this.to);
this.next(nu);
}

zxcTabSS.prototype.Auto=function(auto){
clearTimeout(this.to);
if (auto){
var oop=this,nu=this.lst+1;
if (nu==this.tabs.length) nu=0;
this.next(nu==this.tabs.length?0:nu);
this.to=setTimeout(function(){ oop.Auto(auto); },auto);
}
}

zxcTabSS.prototype.next=function(nu){
this.frames[this.lst].obj.style.zIndex=0;
this.frames[this.lst].update([this.frames[this.lst].data[0],0],this.ms);
this.tabs[this.lst].update([this.tabs[this.lst].data[0],this.min],this.ms*.95);
this.tabs[this.lst].obj.className=this.off;
this.lst=nu
this.frames[this.lst].obj.style.zIndex=1;
this.frames[this.lst].update([this.frames[this.lst].data[0],100],this.ms);
this.tabs[this.lst].update([this.tabs[this.lst].data[0],this.max],this.ms);
this.tabs[this.lst].obj.className=this.on;
if (this.pointer) this.pointer.update([this.pointer.data[0],this.ppos[this.lst]],this.ms);
}

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

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

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




/*]]>*/
</script>

</head>

<body onload="S=new zxcTabSS('tst','frame','tab','pointer',1000,2000);">
<input type="button" name="" value="Goto 0" onclick="S.GoTo(0);"/>
<input type="button" name="" value="Goto 1" onclick="S.GoTo(1);"/>
<input type="button" name="" value="Goto 2" onclick="S.GoTo(2);"/>
<input type="button" name="" value="Goto 3" onclick="S.GoTo(3);"/>
<input type="button" name="" value="Auto" onclick="S.Auto(4000);"/>

<div id="tst" >
<div class="frames" >
<div class="frame" >3</div>
<div class="frame" >2</div>
<div class="frame" >1</div>
<div class="frame" >0</div>
</div>
<div class="tabs" >
<div class="tab tabon" ></div>
<div class="tab" ></div>
<div class="tab" ></div>
<div class="tab" ></div>
<img class="pointer" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" />
</div>
</div>
</body>

</html>

salman500
08-06-2009, 07:18 PM
OH!

Thank you sooo much !!! :D
Awesome :D

but one mroe thing, how can i make it so that its auto changing by default?


thanks thanks thanks thanks thanks thanks

salman500
08-06-2009, 07:50 PM
also, how can i increase the speed of animation?
i wanna make the switch process twice as fast.

vwphillips
08-07-2009, 06:27 AM
auto changing by default?



<body onload="S=new zxcTabSS('tst','frame','tab','pointer',1000);S.Auto(4000);">




how can i increase the speed of animation?

change the green number(milliseconds)



i wanna make the switch process twice as fast.


change the red number(milliseconds)

salman500
08-07-2009, 12:11 PM
Perfect!
=d =d =d