Another slideshow using Jquery Scrollable plugin

Did you see my previous posts on making a slideshow for blogspot ? Now I want to show you another plugin which has the same functions . With this plugin ,you can make a complete slideshow ,which can scroll in both of vertical and horizontal .
here is the screenshot :


Live demo

Here is the instruction :
To add an element to your blog ,you can insert it to Template file directly or insert in a HTML/Javascript widget . I personally insert into template file ,but I think use a widget is very useful because you don't need to encode the script and you can remove the script any time you want easily .
Now ,create a HTML /Javascript widget . Here is the HTML structure of this slideshow :

<!-- main navigator -->
<ul id="main_navi">

<li>[thumbnail #1]</li>
<li>[thumbnail #2]</li>
<li>[thumbnail #3]</li>
</ul>

<!-- root element for the main scrollable -->
<div id="main">

<!-- root element for pages -->
<div id="pages">

<!-- page #1 -->
<div class="page">

<!-- sub navigator #1 -->
<div class="navi"></div>

<!-- inner scrollable #1 -->
<div class="scrollable">

<!-- root element for scrollable items -->
<div class="items">

<!-- items on the first page -->
<div class="item"> [The Content] </div>
<div class="item"> [The Content] </div>
<div class="item"> [The Content] </div>

</div>

</div>

</div>

<!-- sub navigator #1 -->
<div class="navi"></div>

<!-- page #2 -->
<div class="page">
...

</div>

</div>

</div>
main navigator is the navigation on the left side .
sub navigator is small button on the top .
each page element in the code is controlled by an element in main navigator ,and each item in page element is controlled by sub navigator .
You can add as many and item as you want .
From the script ,you can see the elements of slideshow code .To display them as you want ,you can add CSS code for formatting these elements .
Basic CSS code here .

<style>

/* main vertical scroll */ 
#main { 
    position:relative; 
    overflow:hidden; 
    height: 450px; 
} 
 
/* root element for pages */ 
#pages { 
    position:absolute; 
    height:20000em; 
} 
/* root element for horizontal scrollables */ 
.scrollable { 
    position:relative; 
    overflow:hidden; 
    width: 510px; 
    height: 450px; 
} 
 
/* root element for scrollable items */ 
.scrollable .items { 
    width:20000em; 
    position:absolute; 
    clear:both; 
}
</style>

You can write more CSS code for other elements . This is the basic one .

You got a slideshow in HTML ,and now is the time we make it operate by adding javascript code. After CSS code ,add this code

<script type="text/javascript" src="http://dinhquanghuy.110mb.com/metal/jquery.js"></script>
<script type="text/javascript">
// main vertical scroll
$("#main").scrollable({

// basic settings
vertical: true,
size: 1,
clickable: false,

// up/down keys will always control this scrollable
keyboard: 'static',

// assign left/right keys to the actively viewed scrollable
onSeek: function(event, i) {
horizontal.scrollable(i).focus();
}

// main navigator (thumbnail images)
}).navigator("#main_navi");

// horizontal scrollables. each one is circular and has its own navigator instance
var horizontal = $(".scrollable").scrollable({size: 1}).circular().navigator(".navi");


// when page loads setup keyboard focus on the first horzontal scrollable
horizontal.eq(0).scrollable().focus();
</script>

After adding this script ,you can save your widget and see the result .
In this script ,instead of jquery and scrollable plugin , they packed them into one file name jquery ,so adding <script type="text/javascript" src="http://dinhquanghuy.110mb.com/metal/jquery.js"></script>
is enough . You can download js file at this address to know more .

Save template and see the result .
If you want to know more about the code ,or don't want to write the code from the beginning ,you can go to my live demo and save it to computer . Open it ,see how it work ,and copy ,paste . I think it's easier than coding from A to Z .
Hope you like this ! Enjoy it !