/    Sign up×
Community /Pin to ProfileBookmark

Need help in glider (urgent)

Copy linkTweet thisAlerts:
Mar 16.2010

HI.. has any one used glider.js?

[url]http://www.jirehdesigners.com/hiddenplaces/[/url]

if you go through the above mentioned website, you will see a small slideshow of books at the bottom right.
I need to modify it but don’t know how to do it..
When i slide to the last slide and again click the next all divs scroll to the first showing all the slides. When i click the next button it must be a loop and continuously slide like an infinite slidehow…

Please respond immediately

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsMar 16.2010 — [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[*/
.section {
width:190px;float:left;
}

.section IMG{
margin-Left:10px;border-Width:0px;
}

#content {
position:absolute;left:0px;top:0px;width:2000px;
}

#scroller {
position:relative;overflow:hidden;left:300px;width:193px;height:110px;border:solid black 1px;
}

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

<body>

<div id="my-glider3">
<div id="scroller">
<div id="content">
<div class="section">
<a href="books.html#book_adrift"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/1.jpg" /></a><a href="books.html#book_boat"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/2.jpg" /></a>
</div>
<div class="section">
<a href="books.html#book_kayak"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/3.jpg" /></a><a href="books.html#book_explorer"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/4.jpg" /></a>
</div>
<div class="section">
<a href="books.html#book_fragile"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/5.jpg" /></a><a href="books.html#book_jungle"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/6.jpg" /></a>
</div>
<div class="section">
<a href="books.html#book_lambing"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/7.jpg" /></a><a href="books.html#book_sailing"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/8.jpg" /></a>
</div>
<div class="section">
<a href="books.html#book_seal"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/9.jpg" /></a><a href="books.html#book_moons"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/10.jpg" /></a>
</div>
<div class="section">
<a href="books.html#book_vision"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/11.jpg" /></a><a href="books.html#book_where"><img src="http://www.jirehdesigners.com/hiddenplaces/dags_books/12.jpg" /></a>
</div>
</div>
</div>
</div>

<input type="button" name="" value="Left" onclick="S.Slide(-190);" />
<input type="button" name="" value="Right" onclick="S.Slide(190);" />

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

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** 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[*/
function Scroller(o){
var s1=document.getElementById(o.ID);
var clds=s1.childNodes;
var lst=clds[clds.length-1];
while (lst.nodeType==3){
lst=lst.previousSibling;
}
var w=lst.offsetLeft+lst.offsetWidth;
s1.style.width=w+'px';
s1.style.left='0px';
var s2=s1.cloneNode(true);
s1.parentNode.appendChild(s2);
var s3=s1.cloneNode(true);
s1.parentNode.appendChild(s3);
this.slides=[s1,s2,s3];
this.slides[0]=new zxcAnimate('left',s1,0);
this.slides[0].run=true;
this.slides[0].Complete=function(){
this.run=true;
if (this.data[0]<-w){
this.data[0]+=w*3;
}
if (this.data[0]>w){
this.data[0]-=w*3;
}
}
this.slides[1]=new zxcAnimate('left',s2,w);
this.slides[1].Complete=function(){
if (this.data[0]<-w){
this.data[0]+=w*3;
}
if (this.data[0]>w){
this.data[0]-=w*3;
}
}
this.slides[2]=new zxcAnimate('left',s3,-w);
this.slides[2].Complete=function(){
if (this.data[0]<-w){
this.data[0]+=w*3;
}
if (this.data[0]>w){
this.data[0]-=w*3;
}
}
this.ms=o.Duration||1000;
}

Scroller.prototype.Slide=function(ud){
if (this.slides[0].run){
this.slides[0].run=false;
for (var z0=0;z0<this.slides.length;z0++){
this.slides[z0].animate(this.slides[z0].data[0],this.slides[z0].data[0]+ud,this.ms);
}
}
}

var S=new Scroller({
ID:'content',
Duration:1000
});
/*]]>*/
</script>

</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@naveen_briteauthorMar 16.2010 — I am so grateful to you. I was s crating my head and google ing for hours.

But u made my life better... Thank you once again...

One more help please. In the same page on the top there is a huge slide show.. It is supposed to be cross-fade slideshow taken from dynamic drive called as "featured content slider" The images are supposed to fade into next image. . But you can notice that the first two images fade from background. It create a bright fade effect. And also when the navigations on the slides are clicked that same bright fade effect follows. The images has to fade smoothly in the next image and to avoid the bright fade. Is there any way to achieve that smoothness.... Thank you very much in advance.
×

Success!

Help @naveen_brite 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.28,
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,
)...