Clean and Multi-Functional jQuery Gallery Plugin - kGallery

kGallery is an easy-to-use jQuery plugin that enables you to create a clean photo gallery with thumbnails preview and some controls.  kGallery includes kSlideshow and kThumbnailPicker componnents that allow you to create a image slideshow only or a image carousel with a group of thumbnails.

Features:

• Vertical or horizontal thumbnail scrolling
• Auto play support
• Comes with 4 control buttons: play, pause, next, previous
• Has ability to work stable with hundreds of pictures or with big pictures
• Loads images from a JSON file
• Cross browser: supports all major browsers

Basic Usage:

1. Include jQuery library and jQuery kGallery on your web page

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/kGallery-full.min.js"></script>

2. Include kGallery CSS to style the gallery

<link rel="stylesheet" href="css/kGallery.css" />

3. kGallery

<div id="gallery-wrapper">

</div>

4. The CSS

#gallery-wrapper{
    height: 400px; width: 400px; text-align: center;
}
.kSlideshowWrapper, .kSlideshowItemDiv{
    width: 400px;
    height: 267px;
}
.kThumbnailsInnerWrapper{
    height: 80px;
    width: 324px;
}
.kThumbnailsWrapper{
    width: 324px;
    height: 80px;
    margin: 10px auto 0 auto;
}
.kThumbnailsPage{
    width: 324px;
    text-align: left;
}
.kThumbnailsPage img{
    padding: 1px;
    border: 1px solid black;
    margin: 2px;
}
.kThumbnailsPage .selectedThumbnail{
    border-color: #aaaaff;
}
.kSlideshowItemDiv img{
    z-index: 400;
}

5. The javascript

<script type="text/javascript">
$(document).ready(function() {
    gallery = kGallery({
        wrapper: '#gallery-wrapper',
        url: 'files/gallery.json',
        startItem: 0
    });
});
</script>

More examples:

• Basic Example
• Slideshow only Example
• Thumbnails only Example
• Vertical thumbnails scrolling Example

Change log:

v1.1.1 (2014-02-02)

• url option replaced to dataSource
• dataType: array option added

---

This awesome jQuery plugin is developed by andruhon. For more Advanced Usages, please check the demo page or visit the official website.