Simple & Responsive jQuery Image Viewer Plugin - Smooth Products

Smooth Products is a jQuery plugin that allows to showcase your product images in a flexible gallery interface with thumbnail previews. By clicking you can enlarge and pan an image to see the details of the product.

Basic Usage:

1. Load the required smoothproducts.css in the head section of your web page.

<link rel="stylesheet" href="css/smoothproducts.css">

2. Create the html for the product image viewer.

<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
<a href="images/3.jpg"><img src="images/3_tb.jpg" alt=""></a>
<a href="images/4.jpg"><img src="images/4_tb.jpg" alt=""></a>
</div>

3. Load the jQuery library and jQuery Smooth Products Plugin at the bottom of your web page. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>

4. Call the plugin.

/* wait for images to load */
$(window).load(function() {
  $('.sp-wrap').smoothproducts();
});

Changelog:

2018-06-18

• added function to clean the plugin on single-page websites

2017-04-14

• Fixed: Parent Offset Clipping Image Issue

2015-09-01

• CSS Fix for iOS

2015-03-26

• IE fix

2015-03-17

• New version.

2014-03-15

• Escape Key to close modal

2014-03-08

• Adding additional zoom level

2014-03-04

• Allow multiple instances

2014-03-01

• fixing closing semicolon

2014-01-25

• Fixes & Improvements

---

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