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

シンプルで高速な画像プラグイン。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);
});
});
 

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

  • LATEST
  • RELATED
  • POPULAR