have you ever see a script like this?

**davelf** · 03-17-2010, 03:37 AM

http://www.capitaland.com/10/

after you see that site, here is my problem:

i want to make a slide menu gallery like that one, but in javascript:

we have some slide gallery in dynamicDrive, like this one:

http://www.dynamicdrive.com/dynamici...tentslider.htm

but, how to make sorting like in that site (view by category or view by year)

thx so much, for your attention..

**djr33** · 03-17-2010, 06:16 AM

The short answer is that anything that complex is best left for flash. You can try to imitate it using Javascript, but it will get complex and probably not function exactly as you want-- with flash you can do anything you want (almost) and it will be entirely standardized on all systems, assuming the user has flash installed (or will install it).

**vwphillips** · 03-17-2010, 09:04 AM

intertesting type of pagination.

Will be unable to look at this today but will try to tomorrow

**davelf** · 03-17-2010, 09:58 AM

hmm, thx for trying....

And yup it's really complex to convert it into JS, but i just want to share, this new slide gallery, may be someday dynamicdrive can make it like vwphillips said... hehe

**vwphillips** · 03-18-2010, 11:55 AM

in principle the drag slide navigation

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[*/
#Main {
  position:relative;overflow:hidden;width:300px;height:205px;border:solid black 1px;
}

.MainSlide {
  position:absolute;left:0px;top:0px;width:575px;height:50px;border:solid red px;
}

.MainSlide IMG {
 position:absolute;width:280px;
}

#Nav {
  position:relative;overflow:hidden;width:240px;height:50px;border:solid black 1px;
}

.NavSlide {
  position:absolute;left:0px;top:0px;width:575px;height:50px;border:solid red px;
}

.NavSlide IMG {
 position:absolute;width:67px;
}

/*]]>*/
</style>


</head>

<body>
 <div id="Main" >
  <div class="MainSlide" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt" />
  </div>
 </div>
 <div id="Nav" >
  <div class="NavSlide" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt" />
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt" />
  </div>
 </div>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// **** Functional Code(1.58K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype.animate=function(srt,fin,ms,scale,c){
 clearTimeout(this.to);
 this.time=ms||this.time||0;
 this.neg=srt<0||fin<0;
 this.data=[srt,srt,fin];
 this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
 this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
 this.inc=Math.PI/(2*this.mS);
 this.srttime=new Date().getTime();
 this.cng();
}

zxcAnimate.prototype.cng=function(){
 var oop=this,ms=new Date().getTime()-this.srttime;
 this.data[0]=(this.c=='s')?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:(this.c=='c')?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1];
 this.apply();
 if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
 else {
  this.data[0]=this.data[2];
  this.apply();
  if (this.Complete) this.Complete(this);
 }
}

zxcAnimate.prototype.apply=function(){
 if (isFinite(this.data[0])){
  if (this.data[0]<0&&!this.neg) this.data[0]=0;
  if (this.mde!='opacity') this.obj.style[this.mde]=Math.floor(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[*/
// DragSlide (18-March-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


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

function zxcDragSlide(o){
// Main Slide
 this.mainmde=o.MainMode.charAt(0).toUpperCase()=='X'?['width','left',true]:['height','top',false];
 var main=document.getElementById(o.MainID);
 var slide=main.getElementsByTagName('DIV')[0];
 var clds=slide.childNodes,s=o.MainSeparation||0;
 this.main=[];
 for (var cnt=0,lft=s,z0=0;z0<clds.length;z0++){
  if (clds[z0].nodeType==1){
   this.main.push(lft-s);
   clds[z0].style.position='absolute';
   clds[z0].style[this.mainmde[1]]=lft+'px';
   lft+=zxcLTZ(clds[z0],this.mainmde[0])+s;
  }
 }
 this.mainslide=new zxcAnimate(this.mainmde[1],slide,0);
 this.mainms=o.MainMilliSec||500;
// Navigation Slide
 this.navmde=o.NavMode.charAt(0).toUpperCase()=='X'?['width','left',true]:['height','top',false];
 var nav=document.getElementById(o.NavID);
 this.dobj=nav.getElementsByTagName('DIV')[0];
 var clds=this.dobj.childNodes,s=o.NavSeparation||0;
 this.nav=[];
 for (var cnt=0,lft=s,z0=0;z0<clds.length;z0++){
  if (clds[z0].nodeType==1){
   this.nav.push(lft-s);
   clds[z0].style.position='absolute';
   clds[z0].style[this.navmde[1]]=lft+'px';
   this.addevt(clds[z0],'mouseup','GoTo',cnt++);
   this.os=zxcLTZ(clds[z0],this.navmde[0])+s;
   lft+=this.os;
  }
 }
 this.navmin=-lft+zxcLTZ(nav,this.navmde[0]);
 this.addevt(this.dobj,'mousedown','down');
 this.addevt(document,'mousemove','move');
 this.addevt(document,'mouseup','up');
 this.navslide=new zxcAnimate(this.navmde[1],this.dobj);
 this.navms=o.NavMilliSec||500;
 this.srtXY=0;
}

zxcDragSlide.prototype.GoTo=function(ev,nu){
 if (this.srtXY==(this.navmde[2]?ev.clientX:ev.clientY)){
  this.mainslide.animate(this.mainslide.data[0],-this.main[nu],this.mainms);
 }
}

zxcDragSlide.prototype.down=function(ev){
 if (!this.drag){
  clearTimeout(this.navslide.to);
  document.onselectstart=function(event){ window.event.returnValue=false; };
  this.lastXY=this.navmde[2]?ev.clientX:ev.clientY;
  this.srtXY=this.lastXY;
  this.pos=zxcLTZ(this.dobj,this.navmde[1]);
  this.drag=true;
  if (this.df) this.df(this,ev);
 }
 return false;
}


zxcDragSlide.prototype.move=function(ev){
 if (this.drag){
  var mxy=this.navmde[2]?ev.clientX:ev.clientY,xy=this.pos+(mxy-this.lastXY);
  if (xy>=this.navmin&&xy<=0){
   this.pos=xy;
   this.dobj.style[this.navmde[1]]=this.pos+'px';
   this.lastXY=mxy;
  }
 }
 if (ev.target) ev.preventDefault();
 return false;
}

zxcDragSlide.prototype.up=function(ev){
 if (this.drag){
  this.drag=false;
  var os=-this.pos%this.os;
  this.navslide.animate(this.pos,Math.min(Math.max(this.pos-(os<this.os/2?-os:this.os-os),this.navmin),0),this.navms);
  document.onselectstart=null;
 }
}

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


//new zxcPage(zxcByClassName('slide')[0],'x');


new zxcDragSlide({
 MainMode:'X',
 MainID:'Main',
 MainSeparation:10,
 MainMilliSec:500,
 NavMode:'X',
 NavID:'Nav',
 NavSeparation:10,
 NavMilliSec:500
});

/*]]>*/
</script>

</body>

</html>

**davelf** · 03-24-2010, 09:36 AM

nice try, vwphillips...

The difficult one is how to sort by some category or album, like in my example...
feature that does not exist, is choose category or album to display in the gallery, if we have that feature we can add a lot image to display, and i think it's more tidy....

**davelf** · 03-24-2010, 09:38 AM

Just want to share, this is another example of image gallery, but once again it's in flash. The good news is it's free, LOL.

http://www.dezinerfolio.com/dfgaller...-flash-gallery

Thread: have you ever see a script like this?

Thread Tools

Search Thread

have you ever see a script like this?

Bookmarks

Bookmarks

Posting Permissions