/    Sign up×
Community /Pin to ProfileBookmark

Javascript Gallery – Looking For Examples

Copy linkTweet thisAlerts:
Apr 21.2009

Looking for JavaScript to create a Gallery like this :[url]http://www.ted.com/[/url]
has anyone seen something like this done in JavaScript, that isn’t too heavy. Don’t really want to use flash to do this, and don’t think client will let us use Silver Light?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsApr 21.2009 — [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[*/
.parent {
position:relative;width:400px;height:400px;border:solid black 1px;

}

.d1 {
position:absolute;overflow:hidden;visibility:hidden;left:100px;top:250px;width:100px;height:100px;background-Color:#FFFFCC;border:solid black 1px;
}
.d1div {
position:absolute;overflow:hidden;visibility:hidden;width:200px;height:150px;background-Color:#FFCC66;border:solid black 1px;
}


.d2 {
position:absolute;overflow:hidden;visibility:hidden;left:10px;top:50px;width:100px;height:100px;background-Color:#FFFFCC;border:solid black 1px;
}

.d2div {
position:absolute;overflow:hidden;visibility:hidden;width:200px;height:150px;background-Color:#FFCC66;border:solid black 1px;
}

.mask {
position:absolute;z-Index:1;visibility:hidden;left:0px;top:0px;width:100%;height:100%;background-Color:#CCFFFF;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (13-April-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk



// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
if (!obj||(!srt&&!fin)||(srt==fin)) return;
var oop=obj[mde.replace(/W/g,'')+'oop'];
if (oop){
clearTimeout(oop.to);
if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
else oop.update([srt,fin],ms,scale,curve);
}
else oop=obj[mde.replace(/W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
this.srtfin=[srt,fin];
this.to=null;
this.obj=obj;
this.mde=mde.replace(/W/g,'');
this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
this.time=ms||this.time||2000;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.ms=this.mS;
this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
this.ms=new Date().getTime()-this.srttime;
this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
else {
this.data[0]=this.data[2];
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/
// Display (21-April-2009) DRAFT
// by Vic Phillips http://www.vicsjavascripts.org.uk

function zxcDisplay(ary,cls,srt,ms){
var obj=zxcByClassName(cls)[0];
this.obj=obj;
ary.push(this);
this.ary=ary;
this.msk=false;
if (typeof(ary[0])=='string'){
this.msk=zxcES('DIV',{},obj);
this.msk.className=ary[0];
}
this.ms=ms;
var w=zxcSVInt(obj,'width'),h=zxcSVInt(obj,'height');
this.div=zxcByClassName(cls+'div',obj)[0];
if (this.div){
zxcES(this.div,{left:zxcSVInt(obj,'left')-(zxcSVInt(this.div,'width')-w)/2+'px',top:zxcSVInt(obj,'top')-(zxcSVInt(this.div,'height')-w)/2+'px'},obj.parentNode);
this.addevt(obj,'mouseover','opendiv');
this.addevt(this.div,'mouseout','closediv');
}
var oop=this;
setTimeout(function(){ oop.open(w,h); },srt)
}

zxcDisplay.prototype.open=function(w,h){
zxcES(this.obj,{visibility:'visible'});
zxcBAnimator('width',this.obj,0,w,this.ms,null,'sin');
zxcBAnimator('height',this.obj,0,h,this.ms,null,'sin');
var oop=this;
setTimeout(function(){ oop.bounce(w,h,true); },this.ms)
setTimeout(function(){ oop.bounce(w,h,false); },this.ms+this.ms*.3)
}

zxcDisplay.prototype.bounce=function(w,h,ud){
zxcBAnimator('width',this.obj,w*(ud?1:.95),w*(ud?.9:1),this.ms*.3,null,'sin');
zxcBAnimator('height',this.obj,h*(ud?1:.95),h*(ud?.9:1),this.ms*.3,null,'sin');
}

zxcDisplay.prototype.opendiv=function(){
zxcES(this.div,{visibility:'visible'});
if (this.msk) this.mask(true);
}

zxcDisplay.prototype.closediv=function(e){
if (zxcCkEventObj(e,this.div)){
zxcES(this.div,{visibility:'hidden'});
if (this.msk) this.mask(false);
}
}

zxcDisplay.prototype.mask=function(ud){
for (var z0=1;z0<this.ary.length;z0++){
zxcES(this.ary[z0].msk,{visibility:ud?'visible':'hidden'});
}
}

zxcDisplay.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 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,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}

function zxcCkEventObj(e,p){
if (!e) var e=window.event;
e.cancelBubble=true;
if (e.stopPropagation) e.stopPropagation();
if (e.target) eobj=e.target;
else if (e.srcElement) eobj=e.srcElement;
if (eobj.nodeType==3) eobj=eobj.parentNode;
var eobj=(e.relatedTarget)?e.relatedTarget:(e.type=='mouseout')?e.toElement:e.fromElement;
if (!eobj||eobj==p) return false;
while (eobj.parentNode){
if (eobj==p) return false;
eobj=eobj.parentNode;
}
return true;
}



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;
}

/*]]>*/
</script>

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

function Init(){
var ary=['mask'];
var oop=new zxcDisplay(ary,'d1',1000,1000);
var oop=new zxcDisplay(ary,'d2',2000,1000);
}


/*]]>*/
</script>

</head>

<body onload="Init();" >

</body>
<div class="parent" id="tst" >

<div class="d1" >
Content
<div class="d1div" >
<br />
<a href="#">Link</a>
</div>
</div>

<div class="d2" >
<div class="d2div" >
<br />
<a href="#">Link</a>
</div>
</div>

</div>


</html>[/CODE]
Copy linkTweet thisAlerts:
@Nate1authorApr 21.2009 — Thanks man Will check it out,
Copy linkTweet thisAlerts:
@Nate1authorMay 04.2009 — Yeah, thats a nice little script, might make some changes so can use an unordered list, and more easily handle varying images sizes, will post back if remember
×

Success!

Help @Nate1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...