The context

This tutorial is quite simple, but since I spent some time to find out how to do it and found nothing around the web, I think it could be helpfull. I have no pretention: maybe it is not the right way to do it, but it works like I wanted to! The outline of this article is classical: we will successively present the HTML, CSS and Javascript trilogy that drives this slider. If you cannot wait to see what it looks like, watch a standalone working demo here: jQuery sliding navigator for jQueryTOOLS scrollable demo

HTML part: structure your data

So, the first step is to properly format your data to be used with the scrollable tool. Even if the DOM is quite classical, I invite you to read this tool documentation first. The principle is to have two wrappers: one for the navigator plugin containing clickable items that will be displayed in the second main wrapper that contains the scrollable images/content. Hence,The most interesting part of the document could be structured as:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<div id="main_nav_wrapper" class="span-11">

  <div id="main_nav">

    <div class="thumb active">
      <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" alt="thumb1" />
      <div class="span-7 right">
        <h3>Thumbnail 1</h3>
        <div class="span-7 short">Lorem ipsum ...</div>
      </div>
    </div>

    <div class="thumb">
      <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" alt="thumb2" />
      <div class="span-7 right">
        <h3>Thumbnail 2</h3>
        <div class="span-7 short">Lorem ipsum ...</div>
      </div>
    </div>

    ...
  </div>

</div>

<div id="main" class="span-13 last">

  <div id="pages">

    <div class="page">
      <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_z.jpg" alt="med1" width="490" height="345" />
      <div class="img_text">
        <h4>Thumbnail 1</h4>
        <p>...</p>
      </div>
    </div>

    <div class="page">
      <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_z.jpg" alt="med2" width="490" height="345" />
      <div class="img_text">
        <h4>Thumbnail 2</h4>
        <p>...</p>
      </div>
    </div>

    ...
  </div>

</div>

I used the div tag, but feel free to use lists or whatever you want to list your items.

CSS part: make this "showable"

I have the habit to use the blueprintcss framework for the comfort it brings to organize a page. Briefly, this framework is another 960 grid system, i.e. it defines 24 columns of 40px width (the total page width is 960px) to position elements. It pre-defines series of classes to define a particular width for an element, its position, etc. For example, see the span-13 or last classes in the HTML part. For more information about the project, see it in action. The most interesting part of the styling is defined in the following source code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

#main_nav_wrapper {
    float:left;
    height:375px;
    overflow:hidden;
    position:relative; /* Required for IE */
}

#main_nav {
    display:block;
    position:relative;
}

#main_nav .thumb {
    width:100%;
    height:75px;
    clear:left;
}

#main_nav .thumb.active { background-color:#d4d4d4; }

#main_nav img { float:left; }

#main_nav h3 {
    float:right;
    padding: 0 5px 0 5px;
}

#main_nav .short {
    float:right;
    font-size:8pt;
    padding: 0 5px;
}

#main {
    position:relative;
    overflow:hidden;
    height: 375px;
}

#pages {
    position:absolute;
    height:20000em;
}

.page { margin:15px 5px; }

.page img { z-index:0; }

The main idea is to define a huge height for the scrollable make only visible the current active par with a combination of properly choosen height and overflow:hidden property. The same principle is used for the navigator part to make visible n items (5 in this case). Note the active class. It is used to distinguish the current item of the navigator viewed in the scrollable part.

Javascript part: jQueryTOOLS hack

You know what I like about jQuery? It's really simple to do fantastic things with a small piece of code and the syntax is simply beautiful. And I think people that made the jQueryTOOLS respect this KISS philosophy, and they provide easy to integrate and expandable tools.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

$(function() {

    // duration of the animation in ms
    d = 500;

    // initialize scrollable
    var api = $("#main").scrollable({
     vertical: true,
     mousewheel: false, // disable mousewheel navigation since it fills too quickly the animation stack
     keyboard: true,
     circular: true,
     speed:d,
     onBeforeSeek: function( event, tabIndex ) {
         var max = this.getSize()
         if( tabIndex !=  max )
             $("#main_nav").animate({top:'-75'*tabIndex}, d, function(){/* Your callback function */});
     }
    }).navigator({navi:"#main_nav"}).autoscroll({
     interval:3000,
     autoplay: true,
     autopause: true
    });

});

Yes, I admit: the core part of this hack (upon which this article is based) only relies on 8 lines of javascript (lines 6 to 13)! All I had to do is to use the callback function correponding to the onSeek event. This event occurs at every scrolling time. Hence, once the scrolling occurs, we move up the navigator sliding window by 75px. When we have riched the slinding window end (last item), we restore the first position. To conserve the scrollable tool fuildity, this task is achieve thanks to the animate jQuery method. And ... that's all!

Demo

You can watch a standalone working demo here: jQuery sliding navigator for jQueryTOOLS scrollable demo

In conclusion

jQueryTOOLS UI is an elegant and flexible library that allows smart hacks. Please test this slider and if you think some points could be optimized, please give me your feedback in the comments!