jQuery Plugin For Automatic Thumbnail Navigation Gallery - PIGNOSE Gallery

PIGNOSE Gallery is a basic jQuery gallery plugin for generating an automatic gallery / slideshow with a thumbnail navigation which allows the visitor to navigate between images on mouse hover.

How to use it:

1. Add your images and thumbnails to the gallery as displayed below:

<div id="gallery-demo">
  <div class="gallery">
    <img src="https://unsplash.it/1200/800?image=456">
    <img src="https://unsplash.it/1200/800?image=856">
    <img src="https://unsplash.it/1200/800?image=855">
    <img src="https://unsplash.it/1200/800?image=854">
    <img src="https://unsplash.it/1200/800?image=853">
  </div>
  <div class="gallery-thumbnails">
    <a href="#"><img src="https://unsplash.it/300/200?image=456"></a>
    <a href="#"><img src="https://unsplash.it/300/200?image=856"></a>
    <a href="#"><img src="https://unsplash.it/300/200?image=855"></a>
    <a href="#"><img src="https://unsplash.it/300/200?image=854"></a>
    <a href="#"><img src="https://unsplash.it/300/200?image=853"></a>
  </div>
</div>

2. Load jQuery library and the jQuery PIGNOSE Gallery plugin at the end of the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="assets/js/pignose.gallery.js"></script>

3. Add the basic CSS styles to the gallery.

#gallery-demo {
  position: relative;
  width: 600px;
  height: 320px;
  border: 1px solid #d8d8d8;
  margin: 60px auto 0;
  overflow: hidden;
}

#gallery-demo .gallery img { width: 100%; }

#gallery-demo .gallery-thumbnails {
  position: absolute;
  padding: 10px;
  background-color: rgba(0, 0, 0, .6);
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#gallery-demo .gallery-thumbnails a { margin: 0 5px; }

#gallery-demo .gallery-thumbnails a img { height: 60px; }

4. Initialize the plugin and specify the jQuery selector of the thumbnail navigation.

$('#gallery-demo .gallery').pignoseGallery({
  list: $('#gallery-demo .gallery-thumbnails')
});

5. More configuration options.

// initial index of focused image.
focus: 0, 

// the gallery thumbnails for gallery views.
list: null,  

// line width for focus style.
lineWidth: 3, 

// line color for focus style.
lineColor: '#d81208',

// the millisecond time for change to animation.
time: 2400,

// auto play 
auto: true,

// pause on hover
hover: true

---

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