Simple & Responsive jQuery Image Viewer Plugin - Smooth Products

Simple & Responsive jQuery Image Viewer Plugin - Smooth Products
File Size: 548 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.