...

View Full Version : Simple controls Noobslide -- HELP ME!!



lobinof
07-05-2011, 02:56 PM
Hi,
excuse I'm not a js coder..I need to control the end of a gallery made with mootools and noobslide (http://www.efectorelativo.net/laboratory/noobSlide/).

I need the autoplay gallery to end in another way:

Solution 1(difficult): After the last image, the gallery starts again from the first image without that "backward" effect. I'd like the first image to be placed after the last one, so the gallery loops without let the user know that it is starting again

Solution 2 (easy, I suppose) : gallery stops at the last image

Please HELP ME!!
TY

vwphillips
07-05-2011, 06:50 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[*/

#sample {
position:relative;width:720px;height:180px;border:solid red 1px;
}

.mask1 {
width:2240px;
}
.mask1 IMG {
width:240px;height:180px;float:left;
}

/*]]>*/
</style></head>

<body>
<div id="sample">
<div class="mask1">
<img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" />
<img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" />
<img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" />

<img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" />
<img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" />
<img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" />
<img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" />
<img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" />
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/
// Slider (05-July-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/


function zxcSlider(o){
var oop=this,obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('DIV')[0];
slide.style.width='100000px';
var clds=slide.getElementsByTagName('*'),lst=clds[clds.length-1],sz=lst.offsetLeft+lst.offsetWidth,nu=Math.ceil(obj.offsetWidth/sz)+1,slider=document.createElement('DIV'),z0=0,z1=0,ud=o.Direction,ms=o.AnimationDuration,events=o. AddEvents,auto=o.AutoStart;
obj.appendChild(slider);
obj.style.overflow='hidden';
slider.style.position='absolute';
slider.style.left='0px';
slider.style.top='0px';
slide.style.position='absolute';
slide.style.top='0px';
for (;z0<nu;z0++){
slide=z0>0?slide.cloneNode(true):slide;
slide.style.left=z0*sz+'px';
slider.appendChild(slide);
}
clds=slide.childNodes;
this.ary=[];
for (;z1<clds.length;z1++){
if (clds[z1].nodeType==1){
this.ary.push(-clds[z1].offsetLeft);
}
}
this.ary.push(this.ary[this.ary.length-1]+this.ary[1]);
if (typeof(events)!='boolean'||events){
obj.onmouseover=function(){ oop.Pause(); }
obj.onmouseout=function(){ oop.Auto(); }
}
this.slider=slider;
this.cnt=0;
this.fr=0;
this.to=0;
this.run=true;
this.ud=isFinite(ud)&&ud>0?1:-1;
this.mS=isFinite(ms)&&ms<0?ms:500;
this.hold=isFinite(o.Hold)?o.Hold:1000;
if (typeof(auto)!='boolean'||auto){
this.dly=setTimeout(function(){ oop.Auto(); },this.hold);
}

}

zxcSlider.prototype={

Next:function(ud,run){
var ud=isFinite(ud)?ud>0?1:-1:this.ud,cnt=this.cnt,lgth=this.ary.length-1,nxt;
if ((ud<0&&cnt==lgth)||(ud>0&&cnt==0)){
cnt=ud<0?0:lgth;
}
nxt=cnt+(ud<0?1:-1);
this.slide(cnt,nxt,run,ud);
},

GoTo:function(nxt){
var cnt=this.cnt;
if (cnt==this.ary.length-1){
cnt=0;
}
this.slide(cnt,nxt,false);
},

slide:function(cnt,nxt,run,ud){
if (this.fr==this.to&&nxt!=cnt&&isFinite(this.ary[nxt])){
clearTimeout(this.dly);
this.fr=this.ary[cnt];
this.to=this.ary[nxt];
this.cnt=nxt;
this.run=run;
this.ud=ud||this.ud;
this.srttime=new Date().getTime();
this.animate();
document.cookie=this.nme+nxt+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
}
},

Auto:function(){
if (this.fr==this.to){
var oop=this;
this.dly=setTimeout(function(){ oop.Next(oop.ud,true); },500);
}
},

Pause:function(){
clearTimeout(this.dly);
this.run=false;
},

animate:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.slider.style.left=(this.to-this.fr)/this.mS*ms+this.fr+'px';
if (ms<this.mS){
setTimeout(function(){oop.animate(); },10);
}
else {
this.fr=this.to;
this.slider.style.left=this.to+'px';
if (this.run){
this.dly=setTimeout(function(){ oop.Next(oop.ud,true); },this.hold);
}
}
}

}

new zxcSlider({
ID:'sample', // the unique ID name of the parent node. (string)
Direction:-1, //(optional) rotation direction, < 0 = anti-clockwise, > 0 = clockwise. (number, default = -1);
AnimationDuration:500, //(optional) the animation duration in milli seconds. (number, default = 500);
Hold:2000, //(optional) the 'hold' delay between rotation in milli seconds. (number, default = 1000);
AutoStart:true, //(optional) true = start auto rotation on initialization. (boolean, default = true);
AddEvents:true //(optional) true = mouseover to pause, mouseout to start auto rotation. (boolean, default = true);
});

/*]]>*/
</script>
</body>

</html>

lobinof
07-06-2011, 01:35 PM
Wow.. thank you indeed.. I'll try to inderstand this code.. mine is really easyer than yours.
I suppose to use the "handle" and "walk" functions of noobslider (I have to use noobslider because the clients wants the image to be larger then container). This is our test link http://www.3820.it/3820_carosello.html. I hope I'll find out how to apply your code to my corousel.

Thank you, indeed



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum