I. Methods of Use
<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>
Second, HTML structure
<div class= "Sp-wrap" >
<a href= "images/1.jpg" ></a>
<a href= "images/2.jpg" ></a>
</div>
You can also add a loading indicator container when a picture is loaded by using sp-loading class, which disappears after the picture is loaded.
<div class= "sp-loading" ><br>loading IMAGES</div>
<div class= "Sp-wrap" >
<a href= "images/1.jpg" ></a>
<a href= "images/2.jpg" ></a>
</div>
If you need to display the specified product thumbnail when the page loads, instead of the first thumbnail, you can specify the Sp-default class on the hyperlink for the picture you want to specify.
<div class= "Sp-wrap" >
<a href= "images/1.jpg" ></a>
<a href= "images/2.jpg" class= "Sp-default" ></a>
</div>
Third, initialize the plug-in
<script type= "Text/javascript" >
$ (window). Load (function () {
$ ('. Sp-wrap '). Smoothproducts ();
});
</script>
Keymob Mobile advertising platform for application developers and advertisers to provide application cross-promotion, mobile advertising optimization, such as one-stop mobile marketing solutions, so that the application developers and advertisers to maximize the value.
HTML5 Add a cross-browser product window with Magnifier effect tutorial