Compacting contents using Glider script

Feb 21, 2009 \ CSS, Design, Tutorials \ 40 Responses

Using Glider.js

Thanks to Iva for requesting for this tutorial! Finally I have something to add to my long-dormant list of resources. Iva asked me over Twitter whether could I write a tutorial on how I’ve incorporated the famous Coda glider effect on my blog header. The basic function of the glider script is to replicate the effects of the Coda glider. Gliders, like accordions, are very useful in compressing/compacting contents in an area of a fixed size, and animate the process when a visitor switches between the different ‘panels’ (which involves gliding, hence the name).

My previous themes were plagued with the problem of overcrowding, where I attempt to squeeze too much information into too little screen real estate space – resulting in a rather nasty, visitor-unfriendly clutter and confusion. When I redesigned my blog, I kept that problem in mind and I was very impressed when I saw The Wojo Group‘s glider in action. It then led me to discovering the original synthesis of this idea at Coda, and to the Google Code page of Glider.js.

What is glider.js?

Glider.js is a rather lightweight javascript effect that weighs around 4kb uncompressed. So far I’ve not seen much development of the script after it’s previous update in May 2007, but for the moment being, it doesn’t have much issues with most major browsers (including IE6, surprise!). I’ve tested it in Firefox 2 and 3, Safari, Opera, Safari and Chrome, and it excelled in all these browsers. It is downloadable over here.

So are you ready to continue with the tutorial? Goodies after the jump, I promise!

Using the glider

So now let’s move on to the part that lets you implement your own glider. There is a demo link at the end of the tutorial, but it’s always better to read through the details because that’s where the majority of the explaning goes to.

What you will need

Download the Glider.js and if you don’t have, Prototype.js and Scriptaculous.js. Of course, if you’re using WordPress, you don’t have to worry about the latter because they’ve been taken care of by your WordPress installation. It’s safer to check your blog header and see if they’re loaded. If they’re not, you don’t need to actualy download them – you can simply load Google AJAX Libraries to make things easier:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<script type="text/javascript" src="glider.js"></script>

*Note: It’s absolutely important that you load the glider.js file after loading prototype and scriptaculous.

Alternatively, if you prefer to use the google.load function:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<script type="text/javascript" src="glider.js"></script>

For WordPress users who prefer to place their glider.js file in their theme’s JS directory (recommended, and you can use any other names, just be sure to change the ‘/js/’ into something else – ‘/name-of-directory/’), replace the last line above with:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/glider.js"></script>

For more information on the Google AJAX Libraries, you can read Jeff’s writeup.

Prior to setting up the glider

Glider.js relies on using classes to identify the individual gliders, so you will have to make sure that the following classes are unused in your layout (except for elements meant for the glider):

scroller
section
controls

*Note to advanced coders: these classes are identified in the javascript file, so if you’re planning to use other classes, do keep track of the changes and replace the class names in the file with relevant ones.

Basically, you will have a <div class="scroller"> to serve as a window around the content, and then <div class="section"> to wrap around each individual panels (which will be glided over when the event is initiated by a user mouseclick on a link – we’ll come to that later) and then a <div class="controls"> to house the control tabs. For some designers, you might want a forward and backward button to be present – if that’s the case, you can make do without the <div class="controls"> part. Here’s a summary of what the individual classes serve as:

scroller – serves as a window in which sections will appear, one at a time
section – wraps around contents in individual panels in the glider
controls – wraps around the tabs to allow navigation to any panel in the glider

A very basic layout, as evient in the blog header in the current design, can be seen below:

Basic layout of a glider.

The basic idea is that we will have the scroller to be of the same width of the panels – it will be the ‘window’ in which the each section, or panel, is displayed. For this reason, all sections have to be of the same width. When the animation is not running, you will only see one section/panel in the window, and when you click on the navigation menu, the glider effects kicks in, fetches for the other section located outside of the window (see screenshot above) and repositions the new section in the window. That’s a mouthful! Now take a deep breath and try to digest it *burp*

And this brings us to the next section. Read on!

Step 1 – Adding an overall and a content wrapper

I have a habit of wrapping huge, chunky sections with a wrapper, so for this case, we will be using <div id="glider">.

<div id="glider">
...
</div>

Now we add in the scroller, and then the content wrapper that wraps around all the individual panels. We will also need to append the script that specifies the glider, after the entire glider element.

<div id="glider">
<div class="scroller">
<div class="content">
...
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

*Note: If you have a different id for your glider container, you will have to make changes to the script – change the ‘glider’ to ‘your-own-id‘. The same applies if you want to vary the duration of transition/animation.

For the CSS, we want each section to be 500px wide and 200px tall. So we need to make the window of the same size too. In addition, we will make it such that the <div class="content"> is of a very huge width (to contain all the scrollers):

.scroller {
overflow: hidden;
width: 500px;
height: 200px;
}
.content {
width: 10000px;
}

Everything cool so far? Now we move on to the second step.

Step 2 – Adding in the sections

Now we’re done with the wrappers (div-itis alert, yes, but that’s unavoidable). We shall add in the individual sections. Let’s say we want to have 5 sections, each 500px wide and 200px tall:

<div id="glider">
<div class="scroller">
<div class="content">
<div id="section1" class="section">...</div>
<div id="section2" class="section">...</div>
<div id="section3" class="section">...</div>
<div id="section4" class="section">...</div>
<div id="section5" class="section">...</div>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

*Note to those who are unfamiliar with CSS – ‘id’ and ‘class’ are two different things. A particular id can only appear in the entire document once – although modern browsers render multiple elements of the same id correctly, this should not be seen as valid XHTML. A class can appear multiple times in a document. We will apply a general style for all sections, so we target the class instead of the id.

To fix the dimensions of each section, we will have to turn to CSS for help:

.section {
float: left;
overflow: hidden;
padding: 10px;
width: 480px;
height: 180px;
}

Some really, really important notes:

Float the containers to the left so that they will be arranged horizontally.
Hide potential overflows so that it doesn’t screw up anything, just in case.
The CSS box model: the total, intended height of an element is the sum of all the margins, paddings AND dimensions specificed. So if you want to have a 10px padding for contents in all sections, the width has to be reduced by 2*10px = 20px (because we have left and right paddings) and the same applies for height (because we have top and bottom paddings). For more information, read the Box Model article.

Step 3 – Adding and styling the controls

For the controls, I have used a tabbed structure to arrange the individual links to each section. We will add it outside the scroller but within the entire glider wrapper:

<div id="glider">
<div class="scroller">
<div class="content">
<div id="section1" class="section">...</div>
<div id="section2" class="section">...</div>
<div id="section3" class="section">...</div>
<div id="section4" class="section">...</div>
<div id="section5" class="section">...</div>
</div>
</div>
<div class="controls">
<ul>
<li><a title="Go to Section 1" href="#section1">Section 1</a></li>
<li><a title="Go to Section 2" href="#section2">Section 2</a></li>
<li><a title="Go to Section 3" href="#section3">Section 3</a></li>
<li><a title="Go to Section 4" href="#section4">Section 4</a></li>
<li><a title="Go to Section 5" href="#section5">Section 5</a></li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

That’s a whole bunch of code! Basically what we are doing is that we’re adding an unordered list (which is to be styled, later) underneath the ‘window’ (as seen in my blog header) to be the navigation menu. There are five sections, so normally you will need to place five tabs, in five <li> tags.

Now the styling!

.controls {
overflow: hidden;
width: 500px;
height: 30px;
}
.controls ul {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.controls ul li {
float: left;
width: 20%;
}
.controls ul li a {
display: block;
height: 20px;
line-height: 20px;
padding: 5px 0;
text-align: center;
}

This is what we’ve done for the CSS part:

Disable styles for the unordered list, set margin and padding to zero (just in case you haven’t done so in with a reset stylesheet, and defined its dimensions.
For the list items, we float them to the left to arrange them horizontally. There are 5 list items in total, so each of them take up 20% of the total width.
For the link in each list items, we set its display to block (by default, it’s in inline element) and by applying the box model, set height to 20px such that adding up the vertical paddings will be 30px. We also center the text.

We’re done with the basic structure of the glider! If you’re satisfied, you’re done for good!

Step 4 – Backward and forward buttons

The buttons can be implemented without the tabs, with the tabs or be thrown out of the window. It all boils down to personal preferences. For me, I’ve used a combination of both. So far, we’ve been doing the basic structure without taking the buttons into mind. If we want to, modifications to the structure above have to be made.

In this example, we will be adding buttons to two-sides of the scroller:

<div id="glider">
<div id="nav-previous" class="side-nav">
<a title="Previous" href="#" onclick="my_glider.previous();return false;">Previous</a>
</div>
<div class="scroller">
<div class="content">
<div id="section1" class="section">...</div>
<div id="section2" class="section">...</div>
<div id="section3" class="section">...</div>
<div id="section4" class="section">...</div>
<div id="section5" class="section">...</div>
</div>
</div>
<div id="nav-next" class="side-nav">
<a title="Next" href="#" onclick="my_glider.next();return false;">Next</a>
</div>
<div class="controls">
<ul>
<li><a title="Go to Section 1" href="#section1">Section 1</a></li>
<li><a title="Go to Section 2" href="#section2">Section 2</a></li>
<li><a title="Go to Section 3" href="#section3">Section 3</a></li>
<li><a title="Go to Section 4" href="#section4">Section 4</a></li>
<li><a title="Go to Section 5" href="#section5">Section 5</a></li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

So, we’ve added the previous and next links to the side of the scroller, and attached the javascript funciton to them to move the sections. We need to refine their appearance using CSS:

.side-nav {
float: left;
width: 20px;
height: 200px;
}
.side-nav a {
display: block;
text-indent: -9999px;
width: 20px;
height: 200px;
}
#nav-previous a {
background: url(images/previous-arrow.png) no-repeat center center;
}
#nav-next a {
background: url(images/next-arrow.png) no-repeat center center;
}

Basically, what we did to the buttons is:

To give them a definite width and height (preferably spanning the height of scroller).
Display links as a block element, indent the text by -9999px so that it’s off the screen but still readable by search engine bots.
Customize background images for each button.

Then replace the styles for certain elements with the new ones below:

.scroller {
float: left;
overflow: hidden;
width: 500px;
height: 200px;
}
.controls {
clear: both;
overflow: hidden;
width: 540px;
height: 30px;
}
.controls ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 500px;
}

The modifications are necessary because:

We have added two 20px wide buttons on the side, so the overall width has increased to 540px.
The controls are widened to 540px as well, but if you want to keep the menu the same width as the scroller (at 500px), fix width to 500px as well and use automatic left and right margin to center the menu.
Clear the floats above the controls.

We also need to use the clearfix method to making sure that all the list items are cleared properly. Change <ul> to <ul class="clearfix">. To the CSS, add the lines:

.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

Issues

There are several things that might not work well with this glider script:

If you’re using an older version of Lightbox, you might encounter a javascript error and the glider will not work – neither will the Lightbox. If that’s the case, I recommend you to upgrade to Lightbox 2. If you’re a WordPress user, I highly recommend Lightbox 2.8.0 plugin for WordPress – not only does it work perfectly for me, it allows you to customize your lightbox as well.
If you’re using an <iframe> in the section that has a scrollbar, there might be a minor graphical glitch in Firefox. I am unable to reproduce the glitch in Safari, Chrome, IE (surprise!) and Opera. It seems to be an issue with Firefox?
Flash movie will show even when the section it is contained in is not in the ‘window’. So the conventional YouTube snippets will cause your Flash Movie to appear towards the left/right of the ‘window’. You will have to add the following lines to the code: within the <object> element, add <param name="wmode" value="transparent"></param>; and to the <embed>, add wmode="transparent".

Finally, the demo!

Yes, there is a demo file that comes with this tutorial – just follow the link to the demo page. Do not right click and download, as the download manager I’m currently using masks the original URL, so you’ll be downloading a blank file instead. If you want to get the code, just follow the link and save the page that is loaded thereafter.

Download: Glider DemoVersion 1.0 File size: 4 KB 1317 downloads

I hope the tutorial and demo is of good use to you. Have fun! If you have any queries, feel free to leave a comment. Thanks!

Burn after reading » Now you're done reading. What's next?

Terry Mun (Teddy)

I'm relatively new to the design world - only to start learning HTML in secondary school and then moving on to (X)HTML and CSS in college. Since then I have been hand-coding my designs using notepad, alongside with the amazing help from Firebug. I embrace photography as a personal persuit during my free time, and I prefer spending the rest of it doing meaningless quizzes on Facebook and destroying the world (in Rampage World Tour, that is).

Metadata

Posted in CSS, Design, Tutorials, on February 21, 2009 at 7:25 am \ Tagged AJAX, Coda, CSS, Design, Glider, Javascript, Library, XHTML \ Leave a trackback

40 responses to “Compacting contents using Glider script” » Leave a response

Response

Dinesh K
March 7, 2009 at 8:50 pm \ Permalink \ Reply

Awesome Tutorial. It real made me feel happy. :)

Thanks a tonne Terry :)
Response

Dinesh K
March 7, 2009 at 8:51 pm \ Permalink \ Reply

And another thing, I loved your site too!
Response

Dinesh K
March 10, 2009 at 1:54 pm \ Permalink \ Reply

hey Terry,

I think your CSS …

#nav-previous a {
background-image: url(images/previous-arrow.png) no-repeat center center;
}

is incorrect!

The Correct one would be:
#nav-previous a {
background: url(images/previous-arrow.png) no-repeat center center;
}
1. Response
  
  Terry @teddyrised
  March 11, 2009 at 12:02 am \ Permalink \ Reply
  
  @Dinesh K: Thanks for telling me – I’ve corrected the error. Should be working fine now.
Stephen
March 18, 2009 at 2:31 am \ Permalink \ Reply

Awsome!!!

Thank you, you are inspiration!!

I.m thinking on making PS related blog on my
mather language,
would you mind if I feature some of your tuts
translated in my language.
Of course I would post from where is original tut and link it to original post.

you are doing a great stuff.
dont stop.
1. Response
  
  Terry @teddyrised
  March 18, 2009 at 2:15 pm \ Permalink \ Reply
  
  Hey Stephen, thanks for your compliments! Sorry for not making it clear for the moment being, but my blog (posts, tutorials, pages, photos and etc) are licensed under the
  Creative Commons Attribution-Noncommercial-Share Alike 3.0 License – which means that you’re free to use it as long as you release the adapted content under a similar license without making profit from it.
  
  I’m just curious – what language are you intending to translate into? Thanks!
Stephen
March 18, 2009 at 4:30 pm \ Permalink \ Reply

thanks teddY for such quick reply,
I read cc licence, great, me happy

sorry for not introducing mysefl little bit
my native language is croatian, Im from little country in center
of europe, called croatia, on adriatic sea.

Im currently quite busy on my own projects,
but that idea that I shared with you
is something that I want to give back to
online comunnity in my country, where is jet a lot of people
who doesn not speek english.
I dont have my online portfolio jet, its under construction,

your site is awsome,
as I said you are inspiration,
I am looking forward to read you on a daily basis.

best wishes
s.
1. Response
  
  Terry @teddyrised
  March 18, 2009 at 7:58 pm \ Permalink \ Reply
  
  You’re welcome! I see, so you’re going to translate it to Croatian. If you need any resources from me (the tutorial part, not the language, since I don’t understand hah).
  
  Thanks for the self-introduction! I’ve never been to Croatia before but I think it’s a lovely country (based on what I’m reading off Wikipedia). Adriatic Sea is one of the place I’ve always been dreaming to visit because of its connection with Venice, by the way.
  
  You’re communicating well in English! Keep up the great work :)
shy
March 28, 2009 at 5:21 am \ Permalink \ Reply

hi your tut. is very inofrmative
i tried this script for a week now and i cant get it to work rtl.
i save your example code directly and worked online
and i only change this <html dir=”rtl” xmln
and the script stops responding.
any idea????

i tried asking at with no response
http://code.google.com/p/missingmethod-projects/wiki/Glider
1. Response
  
  Terry @teddyrised
  March 29, 2009 at 9:06 am \ Permalink \ Reply
  
  Hi there, regarding the right to left text direction, I’m not sure why it breaks the layout. Does it work all the time normally, and definitely breaks when you switch to rtl?
shy
March 30, 2009 at 3:29 am \ Permalink \ Reply

hi, yes
thanks for the response
but yes
even the most basic html it wont work on rtl
i even saved your example page and changed direction
and it stopped working
even if its the only thing in the page

and definitely breaks when you switch to rtl?
yep yes works fine till you use it in an rtl based page
i think its in the script and css something about it coming from left to right programmed to do so or something i’m not sure got my eyes to bouggle bouggle……
Stavros
April 11, 2009 at 12:02 am \ Permalink \ Reply

Hi,

I have had a really strange problem – when I download prototype and scriptaculous and use them locally the script doesn’t work – but when I call it from google it does work, why is this?
1. Response
  
  Terry @teddyrised
  April 11, 2009 at 12:07 am \ Permalink \ Reply
  
  Are you sure the .js files are loaded properly into your page? You can try loading the full URL of the .js files and see if it works or not. Make sure that you’re using the latest version of prototype (v1.6.0.3) and scriptaculous (v1.8.2)too.
Response

tetley
April 23, 2009 at 9:18 pm \ Permalink \ Reply

Awesome tutorial. I dont think the next and previouse buttons are working though
1. Response
  
  Terry @teddyrised
  April 23, 2009 at 10:41 pm \ Permalink \ Reply
  
  This is interesting – I checked the demo page in Firefox 3, Safari 4, Internet Explorer 7 and Chrome, they’re all working good. May I know which browser you’re using to view the demo page?
Ben Dobos
April 29, 2009 at 9:02 pm \ Permalink \ Reply

Hi teddY,
awesome tutorial, but I experience one big problem. I’ve attached a screenshot:
[img]http://img412.imageshack.us/img412/9468/border.gif[/img]
I followed your tutorial thoroughly and doublechecked everything, but I don’t happen to get that ugly border removed. Browser is Firefox 3.
I tried adding “border: none;” to the corresponding CSS-Classes.

Any ideas?
1. Response
  Terry @teddyrised
  April 29, 2009 at 11:41 pm \ Permalink \ Reply
  That is not a problem with the glider script or CSS. It’s because you’re lacking a CSS reset. Specifically, the problem arises from a CSS propery called ‘outline’. Add the following lines to your stylesheet:
```
a {
  outline-style: none;
  outline-width: 0;
}
```
  That should fix it.
  
  Regarding CSS resets, they are highly recommended as they will even out the inconsistent default values assigned to various properties across all browsers. I recommend Eric’s reset stylesheet.
  
  I hope this helps!
  1. Ben Dobos
    April 30, 2009 at 2:10 am \ Permalink
    
    Awesome, you’re the best!
    Also thanks for the link, I didn’t know about that. I will surely look into this.
    
    Also, I think I’ll translate this tutorial into German as soon as my website and blog are done. Of course I will pay attention to Creative Commons and will link back to you :)
    
    Thanks again for the fast reply and the nice tip.
  2. Response
    
    Terry @teddyrised
    May 1, 2009 at 4:15 pm \ Permalink
    
    You’re welcome. Reset styles are extremely useful when cross-browser uniformity of your design’s appearance is in the spotlight. It helps to reset all the default styles applied to basic elements (e.g. body, headers etc).
    
    Feel free to translate the tutorial to a language you’re comfortable with, and thanks for helping me out to make this tutorial available to others whose English isn’t their primary language. Do send me the link when you’re done, and I’ll be more than happy to link it up.
Stefan
May 13, 2009 at 4:56 pm \ Permalink \ Reply

Hi,

Your tutorial really helped a lot!

I have one question: Is it possible to enable the glide effect by hovering over the section links? Maybe one just has to replace some “onclick” with “onmouseover”, but looking at the javascript file I could not find out where to change it. Unfortunately I don’t have any experience using javascript.

Any suggestions are highly appreciated!

Best regards,

Stefan
1. Response
  
  Terry @teddyrised
  May 13, 2009 at 7:17 pm \ Permalink \ Reply
  
  Thanks for the complements. To modify the glide effect, you will have to modify the glider.js file. I’m not well-versed in Javascript too (I only know how to implement them and not write them, heh), so I couldn’t tell you exactly how this can be achieved in the best, cleanest way.
  
  I’ve made a workaround that maybe some Javascript expert can chip in to improve, but so far, it works for me. It’s in the demo page, you can head over and scroll down to the Usage > Hover to navigate between slides section. There are detailed instructions there, and I’ve included a menu where a mouseover triggers a sliding event (see the red navigation bar on the demo page).
  
  I hope this helps! ;) You helped me too – in terms of expanding my knowledge of this glider script.
  1. Stefan
    May 13, 2009 at 9:47 pm \ Permalink
    
    Hi,
    
    Thanks a lot for your help! I am currently using the code you can find in this example: http://www.ajaxdaddy.com/demo-glider.html
    
    I added the goto function to glider.js and changed the section code as follows: Section 1 (goTo(’0′) for section 1, goTo(’1′) for section 2 and so on)
    
    Unfortunately “onmouseover” does not work, but “onclick” still does. I am sure I somewhere made a mistake, but I can’t figure out where.
Stefan
May 13, 2009 at 9:50 pm \ Permalink \ Reply

Sorry, I did not want the html part (now “Section 1″) to be encoded, but to be displayed as is.
Stefan
May 13, 2009 at 10:51 pm \ Permalink \ Reply

Hi, I made a mistake copying the goto function to glider.js before. Now every is working fine! Thank you so much for you kind help!
1. Response
  
  Terry @teddyrised
  May 13, 2009 at 11:21 pm \ Permalink \ Reply
  
  I’m glad that your problem has been solved :) you’re welcome!
Samuel
July 9, 2009 at 2:08 am \ Permalink \ Reply

Hi Teddy,

Thanks for the great web site. I would like to know how do you make the tabs/links active? Has anyone requested this yet?

Thanks,
Samuel
1. Response
  
  Terry @teddyrised
  September 20, 2009 at 6:00 am \ Permalink \ Reply
  
  This version of glider lacks active tabs highlighting function. You might want to consider other options, such as sliders powered by jQuery – Vandelay Designs published an excellent compilation of 25 jQuery-powered sliders.
Putra
July 28, 2009 at 8:44 am \ Permalink \ Reply

Hi Teddy thanks for the tutorial… helped me alot.

would like to know how to add 2 scroller window in page with 2 sets of different controls

tq
mauricio
September 4, 2009 at 4:15 am \ Permalink \ Reply

Hi,
Thanks for the tutorial, I was looking for something like this for a long time.
Now I have a more complex situation: Is it possible to have a glider like the one you describe here but with the difference that the slides are not loaded from the very beginning? They will only load once the user clicks on the next/previous button. If they don’t click, those slides will not load. I’m planning to have diverse contents on those slides (possibly a flash player, some forms, etc.).
If not, do you know of any scriptaculous/prototype component that I can use?
THank you so much!!
Olivier
September 20, 2009 at 5:39 am \ Permalink \ Reply

Hi Teddy

Great tutorial, so hard to find, really helps !
I’m trying to have to sliders to work on the same page.
Any clue ?

Thanks
Olivier
1. Response
  Terry @teddyrised
  September 20, 2009 at 5:58 am \ Permalink \ Reply
  Hi Olivier, thanks for the compliments! To have multiple sliders on the page, simply use a different id for the <div> container (instead of using ‘glider’ as stated in the tutorial). For example, you use ‘glider-1′ as the id instead:
```
<div id="glider-1">...</div>
```
  And after you close the <div> insert the javascript as stated in the tutorial, but change the id:
```
<script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider-1', {duration:0.5});</script>
```
Olivier
September 24, 2009 at 1:04 am \ Permalink \ Reply

Works like a charm !
Thanks so much for your help.

Olivier
Response

Jeff Starr @perishable
December 29, 2009 at 6:50 am \ Permalink \ Reply

An excellent tutorial, Teddy! Definitely bookmarking this one for future reference. Your thoroughness and attention to detail is inspiring. Keep up the good work!
Response

Jasper @jasperfrumau
January 29, 2010 at 2:02 am \ Permalink \ Reply

Following your great tutorial. As I have not got the glider to work yet I tried to download the demo. Unfortunately it leads me to a 404 page…
1. Response
  
  Terry @teddyrised
  January 29, 2010 at 2:09 am \ Permalink \ Reply
  
  Hi Jasper! Thanks for dropping by. I apologize for the confusion – it is not a download link per se, but you will have to click on it and it will bring you to a page which displays the demo website.
  
  I have checked the download link and it does lead to a functional page. Feel free to approach me if you need further assistance :)
Georges
November 28, 2010 at 10:40 pm \ Permalink \ Reply

Thanks a lot.
This matter is quite new for me but with this kind of tutorial, anybody can understand.

PS: I’m from Belgium
Response

snsd genie
December 18, 2010 at 1:01 pm \ Permalink \ Reply

Ideal report! I am only starting out in marketing and marketing and attempting to discover to perform it very well – assets just like this article are extremely precious. As our firm is based mostly in america, it is all a little new to us.
Lisa
July 7, 2011 at 3:54 am \ Permalink \ Reply

Thanks for this great tutorial. Any chance you might add a slider effect to the row of thumbnails above the content slider?
Response
Gabe @surfingwaves
July 12, 2011 at 5:15 pm \ Permalink \ Reply
I was looking for a slider and your tutorial and demo made things nice and easy.

What I’ve done is changed the links to thumbnails, and when the slider cycles through, the thumbnails are highlighted.
Using the “Click to trigger sliding” menu, added a new class for the alt_controls li and updated the glider.js moveTo: function, to set the class in the relevant alt_controls li

Here’s the code if anyone is interested.

Update glider.js: moveTo: function
add following code before Position.prepare();
```
for (i=0;i<this.sections.length;i++)
{                              $('showdiv'+i).removeClassName('on');
}
var selectOn = (this.current._index == null) ? 0 : this.current._index;
                        $('showdiv'+selectOn).addClassName('on');
<code>

Make sure you add a suitable style. This one will simply underline a link:
<code>
.alt_controls ul li.on span
{
        text-decoration:underline;
}
```
Set the class=”on” for the first display
<li id="showdiv0" class="on">

Thanks for taking the time to make your post Teddy
Response

Gabe @surfingwaves
July 12, 2011 at 5:18 pm \ Permalink \ Reply

Missed the backslash on the code tag above before the Make sure…
Sorry about that.

Leave a Response » Share your thoughts or Return to top

Name *

Your name is required. Why?

So that I can address you personally (which I'm more than happy to do).
Everyone loves their name to be called, right? Nobody wants to be referred to as 'a certain someone' or Mr X (X-Men members aside).
If your post too much spam, your name will be imprinted on a personalised voodoo doll, completely free of charge. I'm just joking!

Email *

Your email is needed. Why?

Your email is, and will, never be given out to any third party under any conditions (except for people sneaking up behind me when I'm on WP admin).
So that I can contact you personally in case of certain issues that I wish to address personally.
If you post too much spam, I'll email the same spam you've posted 10 times back to you, completely free of charge.

Website

You can always leave a personal URL behind

It can be anything - most people put their blog URL, their facebook page, their Twitter URL, their MySpace or etc.
I give love back by saying NO to no-follow. All of your webbie links are dofollows instead.

Twitter ID (What?) http://twitter.com/

Twitter. Twitter. Twitter.

What is Twitter?: Twitter is a social networking and micro-blogging service that enables its users to send and read other users' updates known as tweets. Tweets are text-based posts of up to 140 bytes in length.
What is my Twitter ID?: To get a Twitter ID, you simply have to sign up for an account at Twitter.com. Your ID will be in the format of your profile's URL - http://twitter.com/[userid].

Comment (Notes)

Comment notes

Gravatar: You can register for one at Gravatar.com
XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">
Codes: Wrap them up with <code></code> tags.

Cancel Reply

Authenticate this comment using OpenID.

Compacting contents using Glider script

What is glider.js?