jQuery easypin
Simple and fast image pinning plugin. There are dependencies with the library jQuery easing plugin. Supported lowest jQuery version 1.8
DEMO
Quick Start
bower install
bower install jquery.easypinnpm install
npm install jquery.easypinLoad libraries
First, include the jQuery and jQuery easing plugin javascript files.
<script src="jquery.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.easypin.min.js"></script>Pin picture:
<img src="example.jpg" class="pin" width="800" easypin-id="example_image1" />| option | type | description |
|---|---|---|
| easypin-id | attribute |
It will be the default value if not defined |
Dialog window for pin contents
<div class="easy-modal" style="display:none;" modal-position="free">
<form>
type something: <input name="content" type="text">
<input type="button" value="save pin!" class="easy-submit">
</form>
</div>| option | type | description |
|---|---|---|
| easy-submit | class |
Class must be defined to close the dialog window |
| modal-position | attribute |
Dialog window free position (default: none) |
Popover
<div style="display:none;" width="130" shadow="true" popover>
<div style="width:100%;text-align:center;">{[content]}</div>
</div>| option | type | description |
|---|---|---|
| popover | attribute |
Popover initializer attribute (MUST) |
| width | attribute |
Popover width size (default: 200px) |
| shadow | attribute |
Popover show style (default: false) |
Initialize the pictures:
// Back-end pin process
$('.pin').easypin();To access the coordinates after pinning:
var $instance = $('.pin').easypin({
done: function(element) {
return true;
}
});
// set the 'get.coordinates' event
$instance.easypin.event( "get.coordinates", function($instance, data, params ) {
console.log(data, params);
});Then you can run this event with a button click event
<input class="coords" type="button" value="Get coordinates!" />$( ".coords" ).click(function(e) {
$instance.easypin.fire( "get.coordinates", {param1: 1, param2: 2, param3: 3}, function(data) {
return JSON.stringify(data);
});
});We pass parameters when calling the above coordinate the event. Before the callback to run.
Click for .easypin({}) options
.easypinShow()
We do first pin on the picture, now we show these pins to users on user interface.
Pin image:
<img src="example.jpg" class="pin" width="800" easypin-id="example_image1" />Note: If you want to get the width of the parent element's do not need define
Pin container and popover template:
<div style="display:none;" easypin-tpl>
<popover>
<div style="width:140px;height:auto;background-color:orange;">
{[content]}
</div>
</popover>
<marker>
<div style="border:solid 1px #000;width:20px;height:20px;background-color:red;"> </div>
</marker>
</div>| option | type | description |
|---|---|---|
| easypin-tpl | attribute |
Marker and Popover container element |
| popover | html tag |
Popover container element |
| marker | html tag |
Marker container element |
and run the .easypinShow() method:
$('.pin').easypinShow({
data: {
"example_image1":{
"0":{
"content":"Hello World!",
"coords":{
"lat":"530",
"long":"179"
}
},
"canvas":{
"src":"example.jpg","width":"800","height":"562"
}
}
}
});That's it!
.easypin({}) options
| option | type | description |
|---|---|---|
| init | object or json string |
initialize the pin coordinates |
| markerSrc | string |
Change the default marker image |
| modalWidth | string/numeric |
Change the default modal width (default: 200px) |
| editSrc | string |
Change the default edit button image |
| deleteSrc | string |
Change the default delete button image |
| popover | functions into object |
set callback all template variables |
| popoverStyle | object |
popover styles (it just pass to jquery .css() method of the object) |
| limit | integer |
limited pin (default 0) |
| exceeded | function |
limit exceeded event |
| drop | function |
pin dropped event |
| drag | function |
pin dragging event |
| done | function |
closing of the dialog window is depend to this function |
init
Initialize the pin coordinates.
$('.pin').easypin({
init: {
"example_image1":{
"0":{
"content":"Captan America",
"coords":{
"lat":"530",
"long":"179"
}
},
"canvas":{
"src":"example.jpg","width":"1000","height":"562"
}
}
}
});markerSrc
Change the default marker image
$('.pin').easypin({
markerSrc: 'path/or/url/example-marker.jpg'
});modalWidth
Change the default modal width
$('.pin').easypin({
modalWidth: 300
});editSrc
Change the default edit button image
$('.pin').easypin({
editSrc: 'path/or/url/example-edit.jpg'
});deleteSrc
Change the default delete button image
$('.pin').easypin({
deleteSrc: 'path/or/url/example-delete.jpg'
});popover
Set callback all template variables
$('.pin').easypin({
popover: {
content: function(value) {
return value.replace(/\s+/g, ' ');
}
}
});It content variable is form input name
popoverStyle
Popover styles (it just pass to jquery .css() method)
$('.pin').easypin({
popover: {
content: function(value) {
return value.replace(/\s+/g, ' ');
}
},
popoverStyle: {
'background-color': 'orange',
'color': 'black'
}
});limit
Limited pin (default 0) 0 for limitless
$('.pin').easypin({
limit: 2
});Set 0 for limitless pin
exceeded()
Limit exceeded event
$('.pin').easypin({
limit: 2,
exceeded: function(type) {
// do samething...
}
});drop()
Pin dropped event
$('.pin').easypin({
drop: function(x, y, element) {
console.log(x, y, element);
}
});drag()
Pin dragging event
$('.pin').easypin({
drop: function(x, y, element) {
console.log(x, y, element);
},
drag: function(x, y, element) {
console.log(x, y, element);
}
});done()
Closing of the dialog window is depend to this function. Return true if the result dialog window will be closed
$('.pin').easypin({
done: function(element) {
return true;
}
});Will return the form objects if the dialog box contains the form objects. Otherwise the dialog box will return the objects
.easypinShow({}) options
| option | type | description |
|---|---|---|
| data | object or json string |
Pin data and coordinates |
| responsive | boolean (default: false) |
Reponsive canvas for mobile |
| variables | functions into object |
Set callback all template variables |
| popover | object |
There is two child element. show/animate (default: false) |
| each | function |
Each element works before replacing |
| error | function |
Process error event |
| success | function |
Process success event |
data
Pin data and coordinates
$('.pin').easypinShow({
data: {
"example_image1":{
"0":{
"content":"Hello World!",
"coords":{
"lat":"530",
"long":"179"
}
},
"canvas":{
"src":"example.jpg","width":"800","height":"562"
}
}
}
});responsive
Reponsive canvas for mobile (dfault: false)
$('.pin').easypinShow({
data: {/*json object*/},
responsive: true
});variables
Reponsive canvas for mobile
$('.pin').easypinShow({
data: {/*json object*/},
responsive: true,
variables: {
content: function(canvas_id, pin_id, data) {
// do something...
// and return
return data;
}
}
});content is a template variable.
popover
There is two child element. show/animate (default: false)
$('.pin').easypinShow({
data: {/*json object*/},
responsive: true,
variables: {
content: function(canvas_id, pin_id, data) {
// do something...
// and return
return data;
}
},
popover: {
show: true,
animate: true
}
});each()
Each element works before replacing.
$('.pin').easypinShow({
data: {/*json object*/},
responsive: true,
variables: {
content: function(canvas_id, pin_id, data) {
// do something...
// and return
return data;
}
},
popover: {
show: true,
animate: true
},
each: function(index, data) {
// do something
// and return
return data;
}
});###Â error() Process error event
$('.pin').easypinShow({
data: {/*json object*/},
responsive: true,
variables: {
content: function(canvas_id, pin_id, data) {
// do something...
// and return
return data;
}
},
popover: {
show: true,
animate: true
},
each: function(index, data) {
// do something
// and return
return data;
},
error: function(e) {
// do something...
}
});###Â success() Process success event
$('.pin').easypinShow({
data: {/*json object*/},
responsive: true,
variables: {
content: function(canvas_id, pin_id, data) {
// do something...
// and return
return data;
}
},
popover: {
show: true,
animate: true
},
each: function(index, data) {
// do something
// and return
return data;
},
error: function(e) {
// do something...
},
success: function() {
}
});