Minimal Product Viewer Plugin For jQuery - Picture Viewer

Picture Viewer is a jQuery image gallery / slideshow plugin used to create a minimal, clean product viewer where you can navigate between product images by clicking on the thumbnails. Supports asynchronous loading & caching images.

How to use it:

1. Add thumbnails with links pointing to the original images into the product viewer.

<div class="gallery">
  <div id="photo-viewer"></div>
  <div id="thumbnails">
    <a href="1.jpg" class="thumb active" title="Title">
      <img src="thumb-1.jpg" alt="Title">
    </a>
    <a href="2.jpg" class="thumb active" title="Title">
      <img src="thumb-2.jpg" alt="Title">
    </a>
    <a href="3.jpg" class="thumb active" title="Title">
      <img src="thumb-3.jpg" alt="Title">
    </a>
  </div>
</div>

2. Include jQuery library and the jQuery Picture Viewer's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/photo-viewer.js"></script>

3. A little CSS to style the product viewer.

/********** MAIN PICTURE **********/

#photo-viewer {
  position: relative;
  height: 300px;
  overflow: hidden;
}

#photo-viewer.is-loading:after {
  content: url('../img/load.gif');
  position: absolute;
  top: 0;
  left: 0;
}

#photo-viewer img {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
}

/********** THUMBNAILS **********/

#thumbnails {
  margin: 10px 5px 0 0;
  height: 60px;
}

a.active { opacity: 0.3; }

---

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