Clean and Multi-Functional jQuery Gallery Plugin - kGallery
File Size: | 1.03 MB |
---|---|
Views Total: | 11833 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.