jQuery kGallery Plugin Demo

JavaScript

  1. $(document).ready(function() {
  2.         gallery = kGallery({
  3.                 wrapper: '#gallery-wrapper',
  4.                 url: 'files/gallery.json',
  5.                 startItem: 0
  6.         });
  7. });

HTML

  1. <div id="gallery-wrapper">
  2.  
  3. </div>

CSS

  1. #gallery-wrapper{
  2.         height: 400px; width: 400px; text-align: center;
  3. }
  4. .kSlideshowWrapper, .kSlideshowItemDiv{
  5.         width: 400px;
  6.         height: 267px;
  7. }
  8. .kThumbnailsInnerWrapper{
  9.         height: 80px;
  10.         width: 324px;
  11. }
  12. .kThumbnailsWrapper{
  13.         width: 324px;
  14.         height: 80px;
  15.         margin: 10px auto 0 auto;
  16. }
  17. .kThumbnailsPage{
  18.         width: 324px;
  19.         text-align: left;
  20. }
  21. .kThumbnailsPage img{
  22.         padding: 1px;
  23.         border: 1px solid black;
  24.         margin: 2px;
  25. }
  26. .kThumbnailsPage .selectedThumbnail{
  27.         border-color: #aaaaff;
  28. }
  29. .kSlideshowItemDiv img{
  30.         z-index: 400;
  31. }