kGallery with vertical thumbnails scrolling

JavaScript

$(document).ready(function() {
    gallery = kGallery({
        wrapper: '#gallery-wrapper',
        dataSource: 'files/gallery2.json',
        startItem: 0,
        thumbnailPickerOptions: {
            vertical: true,
            itemsOnPage: 5
        }
    });
});

HTML

<link rel="stylesheet" href="css/kGallery.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/kGallery-full.min.js"></script>

<div id="gallery-wrapper">
 
</div>

CSS

#gallery-wrapper{
    width: 640px;
    height: 427px;
    padding-bottom: 30px;
    text-align: center;
    position: relative;
}
.kSlideshowWrapper, .kSlideshowItemDiv{
    width: 640px;
    height: 427px;
}
.kSlideshowItemDiv img{
    z-index: 400;
}
.kThumbnailsInnerWrapper{
    width: 106px;
    height: 395px;
}
.kThumbnailsWrapper{
    width: 106px;
    height: 395px;
    position: absolute;
    top: 18px;
    right: -145px;
}
.kThumbnailsWrapper .kThumbnailsPrevPage{
    top: -26px;
    left: 40px;
    background: url("i/gtk-media-forward-up.png") no-repeat scroll 0 0 transparent;
}
.kThumbnailsWrapper .kThumbnailsNextPage{
    bottom: -24px;
    top: auto;
    left: 40px;
    background: url("i/gtk-media-forward-down.png") no-repeat scroll 0 0 transparent;
}
.kThumbnailsPage{
    width: 106px;
    height: 395px;
    text-align: left;
}
.kThumbnailsPage img{
    padding: 1px;
    border: 1px solid black;
    margin: 2px;
    background: white;
}
.kThumbnailsPage .selectedThumbnail{
    border-color: #aaaaff;
}