forked from atayahmet/jquery.easypin
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
53 lines (42 loc) · 2.28 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<title>jQuery easypin v1.0</title>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery.easing/js/jquery.easing.min.js"></script>
<script type="text/javascript" src="dist/jquery.easypin.js"></script>
</head>
<body>
<h1>jQuery easypin!</h1>
<img src="https://i.ytimg.com/vi/48fKIXlxaXk/maxresdefault.jpg" width="1000" class="pin" easypin-id="example_image1" />
<!-- dialog window -->
<div class="easy-modal" style="display:none;" modal-position="free">
type something: <input name="content" type="text">
<input type="button" value="save pin!" class="easy-submit">
</div>
<!-- popover -->
<div style="display:none;" width="130" shadow="true" popover>
<div style="width:100%;text-align:center;">{[content]}</div>
</div>
<br />
<input class="coords" type="button" value="Get coordinates!" />
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var $easyInstance = $('.pin').easypin({
init: '{"example_image1":{"0":{"content":"Captan America","undefined":"save pin!","coords":{"lat":"530","long":"179"}},"1":{"content":"Thor Odinson","undefined":"save pin!","coords":{"lat":"892","long":"109"}},"2":{"content":"Hulk","undefined":"save pin!","coords":{"lat":"56","long":"133"}},"3":{"content":"Black Widow","undefined":"save pin!","coords":{"lat":"717","long":"242"}},"4":{"content":"Hawkeye","undefined":"save pin!","coords":{"lat":"173","long":"221"}},"5":{"content":"Iron Man","undefined":"save pin!","coords":{"lat":"280","long":"161"}},"canvas":{"src":"https://i.ytimg.com/vi/48fKIXlxaXk/maxresdefault.jpg","width":"1000","height":"562"}}}',
done: function(element) {
return true;
}
});
$easyInstance.easypin.event( "get.coordinates", function($instance, data, params ) {
console.log( data, params);
});
$( ".coords" ).click(function( event ) {
$easyInstance.easypin.fire( "get.coordinates", {param1: 1, param2: 2, param3: 3}, function(data) {
return JSON.stringify(data);
});
});
});
</script>