jQuery add pin to image plugin – tooltip photos with jquery.easypin

Check this awesome jQuery add pin to image plugin. It allows to tooltip photos very easy.

jQuery add pin – simply pinning objects in pictures

Simple and fast image pinning plugin. There are dependencies: jQuery 1.8+ and easing plugin. Add valuable information as tooltips on your photos.

jQuery add pin to images
jQuery add pin to images

Usage

Load libraries:

<script src="jquery.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.easypin.min.js"></script>
[/html]


Pin the picture (and define easypin-id attribute):


<img src="example.jpg" class="pin" width="760"
  easypin-id="example_image1" />

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>

Popover:

<div style="display:none;" width="130" shadow="true" popover>
    <div style="width:100%;text-align:center;">{[content]}</div>
</div>

Initialize the pictures:

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

License: MIT

Demos:

Demo 1 (responsive)

Demo 2

Demo 3

jQuery add pin plugin homepage:

http://atayahmet.github.io/jquery.easypin

See also:

iPicture – tooltip your photos

HTML5 tutorial: a photo on the Canvas with clickable elements

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1