Slide Thumbs - vertical

I’m a totally JavaScript rookie, and I can’t really figure out how to do it. I want a ho开发者_Python百科rizontal slider or tab script with thumbnails and arrow indication which thumbnail current showing in the slider, like this:

*http://jqueryglobe.com/labs/slide_thumbs/*

But it needs to be horizontal vertical. Can someone maybe help me to solve that problem? Thanks in advance

Edit: Yes, I'm sorry. I mean vertical. My bad.

It is not that hard actually.

You just need to re-order the HTML so that the images appear on the right/left of the preview main image container. Then, if you look at the simple javascript involved, just modify everything that says "left" to "top" and "width" to "height" like so (this code is taken from the page itself -> view source):

$(document).ready(function() {
            // Save  the jQuery objects for later use.
            var outer       = $("#preview_outer");
            var arrow       = $("#arrow");
            var thumbs      = $("#thumbs span");

            var preview_pos;
            var preview_els = $("#preview_inner div");
            var image_width = preview_els.eq(0).height(); // Get height of imaages

            // Hook up the click event
            thumbs.click(function() {
                // Get position of current image
                preview_pos = preview_els.eq( thumbs.index( this) ).position();

                // Animate them!
                outer.stop().animate( {'scrollTop' : preview_pos.top},  500 );
                arrow.stop().animate( {'top' : $(this).position().top },    500 );
            });

            // Reset positions on load
            arrow.css( {'top' : thumbs.eq(0).position().top } ).show();
            outer.animate( {'scrollTop' : 0}, 0 );

            // Set initial width
            $("#preview_inner").css('height', preview_els.length * image_height);
        });