jQuery

【jQuery】画像上のオブジェクトにピン。jQuery easypin

February 25, 2016

シンプルで高速な画像プラグイン。jQueryのバージョン1.8以上が必要のようです。

jQuery

<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

ピンの内容（ダイアログウィンドウ）

<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>

初期化

// Back-end pin process
$('.pin').easypin();

座標にアクセス

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);

});

ボタンクリックイベント

<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);
    });
});

Demo/Download