jQuery easypin

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

DEMO

Pinning side 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() {

    }
});