Typical usage of kGallery

JavaScript

$(document).ready(function() {
    gallery = kGallery({
        wrapper: '#gallery-wrapper',
        dataSource: 'files/gallery2.json',
        startItem: 0,
        thumbnailPickerOptions: {
            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{
    height: 517px;
    width: 640px;
    padding-bottom: 30px;
    margin: 0 auto;
    text-align: center;
}
.kSlideshowWrapper, .kSlideshowItemDiv{
    width: 640px;
    height: 427px;
}
.kThumbnailsInnerWrapper{
    height: 80px;
    width: 540px;
}
.kThumbnailsWrapper{
    width: 540px;
    height: 80px;
    margin: 20px auto 0 auto;
}
.kThumbnailsPage{
    width: 540px;
    text-align: left;
}
.kThumbnailsPage img{
    padding: 1px;
    border: 1px solid black;
    margin: 2px;
}
.kThumbnailsPage .selectedThumbnail{
    border-color: #aaaaff;
}
.kSlideshowItemDiv img{
    z-index: 400;
}