A simple jquery image tagging effect with the source download _jquery

In order to improve the user experience degree, in some of the electronic business sites and home sites, we will see that a picture shows a variety of goods, click on each item can pop up a brief introduction of the corresponding merchandise, including prices, and so on, design very user-friendly, today we share the use of jquery plug-ins to achieve this effect.

First to show you the effect of the picture:

Effect Demo Source Download

Html

First, we load the jquery library and the Easypin plugin.

<script src= "Jquery.min.js" ></script> 
<script src= "Jquery.easing.min.js" ></script> 

Next, we prepare a picture, this is a display of a number of models clothing shoes bag inside the electric quotient picture, notice we give the picture a Easypin-id attribute, it is used to mark the current picture ID, used to be called by the back plug-in.

We also need to make a hidden layer that pops up the display of merchandise information, using attribute EASYPIN-TPL to mark the pop-up layer. The label PopOver is a pop-up layer element, and the label marker is a callout point element. And then with CSS to let the pop-up layer has a beautiful appearance.

<div style= "Display:none" easypin-tpl> 
<popover> <div class= " 
expopovercontainer" > 
<div class= "POPBG borderradius" ></div> <div class= "Popbody" 
> 
<div class= "Arrow-down" Style= "TOP:170PX;LEFT:13PX;" ></div> 
 
 

Jquery

The plugin provides the Easypin () and Easypinshow () Two methods, we use Easypinshow () to show the image annotation effect, it has a data option, support JSON format, it defines the point of reference data, including coordinates location, product name, description and Price, This data can be a background unified build. It also provides a number of other options and callback functions, see the code below.

$ (document). Ready (function () {$ ('. Pin '). Easypinshow ({data: ' {demo_image_1 '): {"0": {"name": "Product Name", "description": " Product description information. "," Price ":" $67 "," coords ": {" lat ":" A "," Long ":" 228 "}}," 1 ": {" name ":" Pierre Cardin "," description ":" Lorem ipsum dolor Sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut incididunt. "," Price ":" $98 "," coords ": {" lat ":" 597 "," Long ":" 357 "}," 2 ": {" name ":" Pierre Cardin "," description ":" Lorem ipsum dolor Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna Aliqua. "," Price ":" $ "," coords ": {" lat ":" 241 "," Long ":" 352 "}}," Canvas ": {" src ":" Fashion.jpg "," width ":" 1000 "," Height ":" 625 '}} ', Responsive:false, variables: {firstname:function (canvas_id, pin_id, data) {//console.log (canvas_id, Pin_ 
ID, data); 
return data; 
}, Surname:function (canvas_id, pin_id, data) {//console.log (canvas_id, pin_id, data); 
return data; 
}, PopOver: {show:false, animate:true}, Each:function (index, data) {return data; }, Error:function (e) {console.log (e); 
}, Success:function () {console.log (' OK '); 
} 
});  });

Easypin () can be used to achieve the image annotation effect, you can mark any position in the picture, and then the pop-up layer fill in the callout information to submit, support drag and so on

A simple jquery image tagging effect of the source download to this will give you all the introduction, I hope to help you!