Simple & Responsive jQuery Image Viewer Plugin - Smooth Products
File Size: | 548 KB |
---|---|
Views Total: | 28579 |
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.