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.easypin
npm install
npm install jquery.easypin
Load libraries
First, include the jQuery and jQuery easing plugin javascript files.
Pin picture:
option | type | description |
---|---|---|
easypin-id | attribute |
It will be the default value if not defined |
Dialog window for pin contents
type something:
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
{[content]}
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;
To access the coordinates after pinning:
var $instance = ; // set the 'get.coordinates' event$instanceeasypinevent "get.coordinates" { console; };
Then you can run this event with a button click event
;
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:
Note: If you want to get the width of the parent element's do not need define
Pin container and popover template:
{[content]}
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:
;
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.
;
markerSrc
Change the default marker image
;
modalWidth
Change the default modal width
;
editSrc
Change the default edit button image
;
deleteSrc
Change the default delete button image
;
popover
Set callback all template variables
;
It content variable is form input name
popoverStyle
Popover styles (it just pass to jquery .css() method)
;
limit
Limited pin (default 0) 0 for limitless
;
Set 0 for limitless pin
exceeded()
Limit exceeded event
;
drop()
Pin dropped event
;
drag()
Pin dragging event
;
done()
Closing of the dialog window is depend to this function. Return true if the result dialog window will be closed
;
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
;
responsive
Reponsive canvas for mobile (dfault: false)
;
variables
Reponsive canvas for mobile
;
content is a template variable.
popover
There is two child element. show/animate (default: false)
;
each()
Each element works before replacing.
;
error()
Process error event
;
success()
Process success event
;