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.

<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;">&nbsp;</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() {

    }
});