Minimal Product Viewer Plugin For jQuery - Picture Viewer

File Size: 96.6 KB
Views Total: 3146
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 href="2.jpg" class="thumb active" title="Title">
      <img src="thumb-2.jpg" alt="Title">
    <a href="3.jpg" class="thumb active" title="Title">
      <img src="thumb-3.jpg" alt="Title">

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

<script src="//"></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;
} {
  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;
} { 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.