Need help with jquery.easypin?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

atayahmet
129 Stars 23 Forks MIT License 67 Commits 6 Opened issues

Description

Pinning clickable messages/notes to images

Services available

!
?

Need anything else?

Contributors list

No Data

jQuery easypin

Simple and fast image pinning plugin. There are dependencies with the library jQuery easing plugin. Supported lowest jQuery version 1.8

DEMO

Demo Page 1 (responsive)

Demo Page 2

Demo Page 3

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.

html



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
$('.pin').easypin();

To access the coordinates after pinning: ```javascript 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

html

$( ".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:

html
 

Note: If you want to get the width of the parent element's do not need define

Pin container and popover template: ```html

{[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:

javascript
$('.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.

javascript
$('.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

javascript
$('.pin').easypin({
    markerSrc: 'path/or/url/example-marker.jpg'
});

modalWidth

Change the default modal width

javascript
$('.pin').easypin({
    modalWidth: 300
});

editSrc

Change the default edit button image

javascript
$('.pin').easypin({
    editSrc: 'path/or/url/example-edit.jpg'
});

deleteSrc

Change the default delete button image

javascript
$('.pin').easypin({
    deleteSrc: 'path/or/url/example-delete.jpg'
});

popover

Set callback all template variables

javascript
$('.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)

javascript
$('.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

javascript
$('.pin').easypin({
    limit: 2
});

Set 0 for limitless pin

exceeded()

Limit exceeded event

javascript
$('.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

javascript
$('.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 ```javascript $('.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

javascript
$('.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)

javascript
$('.pin').easypinShow({
    data: {/*json object*/},
    responsive: true
});

variables

Reponsive canvas for mobile ```javascript $('.pin').easypinShow({ data: {/json object/}, responsive: true, variables: { content: function(canvasid, pinid, data) {

        // do something...
        // and return
        return data;
    }
}

}); ```

content is a template variable.

popover

There is two child element. show/animate (default: false) ```javascript $('.pin').easypinShow({ data: {/json object/}, responsive: true, variables: { content: function(canvasid, pinid, data) {

        // do something...
        // and return
        return data;
    }
},
popover: {
    show: true,
    animate: true
}

}); ```

each()

Each element works before replacing. ```javascript $('.pin').easypinShow({ data: {/json object/}, responsive: true, variables: { content: function(canvasid, pinid, 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 ```javascript $('.pin').easypinShow({ data: {/json object/}, responsive: true, variables: { content: function(canvasid, pinid, 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 ```javascript $('.pin').easypinShow({ data: {/json object/}, responsive: true, variables: { content: function(canvasid, pinid, 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() {

}

}); ```

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.