This repository has been archived by the owner on Nov 14, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 30
/
pin.html
76 lines (65 loc) · 4.53 KB
/
pin.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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<title>Laravel</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.min.js"></script>
</head>
<body>
<div style="width:100%;">
<div style="background-color:red;width:100%;height:50px;"> </div>
<img src="http://allwallpapersnew.com/wp-content/gallery/natural-green-wallpaper/green-natural-329594.jpg" class="pin" width="100%" easypin-id="1TNz0G7H_7" />
<br />
<div style="display:none;">
<h3>Easy Pin!</h3>
</div>
<div style="display:none;" easypin-tpl>
<popover>
<div style="width:140px;height:auto;background-color:orange;">
<h3 style="padding:0px;margin:0px;">Member Info</h3>
{[firstname]} {[surname]}
<br />
{[gender]}
<br />
{[check2]}
</div>
</popover>
<marker>
<div style="border:solid 1px #000;width:20px;height:20px;background-color:red;"> </div>
</marker>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('.pin').easypinShow({
data: '{"Vegyr8foSu":{"0":{"firstname":"ahmet","surname":"atay","check2":"cinema","city":"bursa","gender":"male","description":"açıklama","coords":{"lat":"1048","long":"357"}},"1":{"firstname":"arife","surname":"koç","check1":"music","city":"ankara","gender":"female","description":"açıklamaa","coords":{"lat":"787","long":"548"}},"2":{"firstname":"veli","surname":"küçükf","check1":"music","check2":"cinema","city":"istanbul","gender":"male","description":"veliiii","coords":{"lat":"1617","long":"661"}},"3":{"firstname":"test 1","surname":"testtt 1","check2":"cinema","city":"istanbul","gender":"male","description":"test 1 açıklama","coords":{"lat":"481","long":"243"}},"4":{"firstname":"test 2","surname":"testttt 2","check1":"music","check2":"cinema","city":"izmir","gender":"male","description":"test 2 açıklama","coords":{"lat":"486","long":"627"}},"5":{"firstname":"test 3","surname":"testtttt 3","check1":"music","city":"ankara","gender":"female","description":"test 3 açıklama","coords":{"lat":"440","long":"462"}},"6":{"coords":{"lat":"829","long":"-5"}},"canvas":{"src":"11495.jpg","width":"1920","height":"710"}},"hdhgddhgd":{"0":{"firstname":"hello","surname":"","city":"istanbul","description":"","coords":{"lat":"577","long":"215"}},"canvas":{"src":"http://allwallpapersnew.com/wp-content/gallery/natural-green-wallpaper/green-natural-329594.jpg","width":"1200","height":"750"}},"E0MzZeBVhY":{"0":{"firstname":"captan america","surname":"","city":"istanbul","gender":"male","description":"","coords":{"lat":"1029","long":"335"}},"1":{"firstname":"hulk","surname":"","city":"istanbul","gender":"male","description":"angry man","coords":{"lat":"72","long":"294"}},"2":{"firstname":"thor","surname":"","city":"istanbul","gender":"male","description":"adama kor","coords":{"lat":"1685","long":"243"}},"3":{"firstname":"","surname":"","city":"istanbul","description":"","coords":{"lat":"552","long":"367"}},"canvas":{"src":"https://i.ytimg.com/vi/48fKIXlxaXk/maxresdefault.jpg","width":"1920","height":"1080"}},"1TNz0G7H_7":{"0":{"firstname":"zarrrr","surname":"","city":"istanbul","description":"","coords":{"lat":"197","long":"76"}},"canvas":{"src":"http://www.intrawallpaper.com/static/images/colourful-dice-cubes.jpg","width":"400","height":"250"}}}',
responsive: true,
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('başarılı');
}
});
});
</script>