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

シンプルで高速な画像プラグイン。jQueryのバージョン1.8以上が必要のようです。
<script src="jquery.min.js"></script> <script src="jquery.easing.min.js"></script> <script src="jquery.easypin.min.js"></script>
<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) |
<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); }); });