Smoothproducts是一款跨浏览器的带放大镜效果的jQuery商品橱窗插件。该商品预览插件类似于淘宝和京东商城的商品预览效果，它带有内部放大镜，点击某个商品缩略图可以切换到全屏大图模式，非常实用。它的特点还有：
- 使用简单
- 可以自定义样式
- 响应式
- 可以处理不同尺寸的图片
- 在鼠标滑过图片时会在图片内部进行放大
- 同一个页面可以有多个实例
使用方法
使用该jQuery商品预览插件需要引入jQuery和smoothproducts.min.js，以及smoothproducts.css文件。
<link rel="stylesheet" href="css/smoothproducts.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
HTML结构
该jQuery商品预览插件的HTML结构使用一个带.sp-wrap的div元素作为包裹元素，在它里面放置需要的中等尺寸的图片缩略图，每个缩略图使用一个超链接来包裹，超链接的地址指向高质量大图所在的URL地址。缩略图的宽度最好是相同的，高度可以不同。
<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>
</div>
你还可以通过使用sp-loading class添加一个图片加载时的loading指示器容器，这个容器会在图片加载完成之后消失。
<div class="sp-loading"><img src="images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>
<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>
</div>
如果需要在页面加载时显示指定的商品缩略图，而不是第一张缩略图，可以在想要指定的图片的超链接上指定sp-default class。
<div class="sp-wrap">
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
<a href="images/2.jpg" class="sp-default"><img src="images/2_tb.jpg" alt=""></a>
</div>
初始化插件
在页面加载完毕之后，通过下面的方法来初始化该商品预览插件。
<script type="text/javascript">
/* wait for images to load */
$(window).load( function() {
$('.sp-wrap').smoothproducts();
});
</script>
