HTML 5 plug-in tutorial-Add a product window with a browser magnifier

HTML 5 plug-in tutorial-Add a product window with a browser magnifier

The KeyMob Mobile Ad platform provides an all-in-one mobile marketing solution for application developers and advertisers, such as application cross-promotion and mobile advertising optimization, to maximize the value of application developers and advertisers.
I. Usage

The Code is as follows:
<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>

Ii. Html Structure

The Code is as follows:
<Div class = "sp-wrap">
<A href = "images/1.jpg"> </a>
<A href = "images/2.jpg"> </a>
</Div>

You can also use the sp-loading class to add a loading indicator container for image loading. This container disappears after the image is loaded.

The Code is as follows:
<Div class = "sp-loading">
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 loading the page, instead of the first thumbnail, you can specify the sp-default class on the hyperlink of the image you want to specify.

The Code is as follows:
<Div class = "sp-wrap">
<A href = "images/1.jpg"> </a>
<A href = "images/2.jpg" class =" sp-default "> </a>
</Div>

Iii. initialize the plug-in

The Code is as follows:
<Script type = "text/javascript">
$ (Window). load (function (){
$ ('. Sp-wrap'). smoothproducts ();
});
</Script>

The KeyMob Mobile Ad platform provides an all-in-one mobile marketing solution for application developers and advertisers, such as application cross-promotion and mobile advertising optimization, to maximize the value of application developers and advertisers.