jQuery Image Annotation Plugin

最新推荐文章于 2024-05-17 13:52:13 发布

wenjie847

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.4k

点赞数

分类专栏： Jquery 文章标签： jquery image annotations javascript function library

Jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery Image Annotation Plugin

Tuesday, 17 March 2009

Download Released: 2nd April, 2009

Flickr was the first site to widely introduce the concept of annotating images with user comments. This concept was first pioneered by the Fotonotes JavaScript library, and has since been further popularised by Web 2.0 sites like Facebook.

When my current client asked my to integrate simlar functionality into there site, I started to look around for a jQuery plugin that could provide this, but none was available. The Image Annotate library for Drupal is based upon jQuery UI however, so taking this for a base, I adopted it to just use jQuery 1.2.6.

You can see a live example here.

Using the plugin is straight forward, simply hookup the plugin an call the imageAnnotate function on the image you would like to annotate.

<html>
<head>
<style type="text/css" media="all">@import "/css/annotation.css";</style>
<script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.5.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.annotate.js"></script>
<script language="javascript">
$(window).load(function() {
$("#toAnnotate").annotateImage({
editable: true,
useAjax: false,
notes: [ { "top": 286,
"left": 161,
"width": 52,
"height": 37,
"text": "A read only annotation",
"editable": false },
{ "top": 134,
"left": 179,
"width": 68,
"height": 74,
"text": "An editable annotation",
"editable": true } ]
});
});
</script>
</head>
<body>
<div class="main-content">
<img src="/images/annotated.jpg" id="toAnnotate" />
</div>
</body>
</html>

<html>
    <head>

        <style type="text/css" media="all">@import "/css/annotation.css";</style>
        <script type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>
        <script type="text/javascript" src="/js/jquery-ui-1.5.3.min.js"></script>
        <script type="text/javascript" src="/js/jquery.annotate.js"></script>

        <script language="javascript">

            $(window).load(function() {

               $("#toAnnotate").annotateImage({
                    editable: true,
                    useAjax: false,
                    notes: [ { "top": 286, 
                               "left": 161, 
                               "width": 52, 
                               "height": 37, 
                               "text": "A read only annotation", 
                               "editable": false },
                             { "top": 134, 
                               "left": 179, 
                               "width": 68, 
                               "height": 74, 
                               "text": "An editable annotation", 
                               "editable": true } ]                    
                });

            });

        </script>

    </head>
    <body>

        <div class="main-content">
            <img src="/images/annotated.jpg" id="toAnnotate" />
        </div>

    </body>
</html>

The plugin requires jQuery 1.2.6 and jQuery UI with resiable and draggable options included. A saveAsHtml method is available in order to generate a dynamic HTML form with which to save the annotations back to the server.

AJAX Version

EDIT: see this post for server side code.

As well as operating in a static HTML mode, the plugin can load, update and delete annotations using AJAX calls. Specifying Get, Save and Delete URLs, plus setting the useAjax flag to true.

$(window).load(function() {
$("#toAnnotate").annotateImage({
getUrl: "get.rails",
saveUrl: "save.rails",
deleteUrl: "delete.rails",
useAjax: true
});
});

$(window).load(function() {
                $("#toAnnotate").annotateImage({
                    getUrl: "get.rails",
                    saveUrl: "save.rails",
                    deleteUrl: "delete.rails",
                    useAjax: true
                });
            });

The Get url expects data to be returned as an JSON stream.

[ { "top": 286,
"left": 161,
"width": 52,
"height": 37,
"text": "Small people on the steps",
"id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
"editable": false },
{ "top": 134,
"left": 179,
"width": 68,
"height": 74,
"text": "National Gallery Dome",
"id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
"editable": true } ]

[ { "top": 286,
    "left": 161,
    "width": 52,
    "height": 37,
    "text": "Small people on the steps",
    "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
    "editable": false },
  { "top": 134,
    "left": 179,
    "width": 68,
    "height": 74,
    "text": "National Gallery Dome",
    "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
    "editable": true } ]

Window Load Event

When calling the plugin it is important to use the $(window).load() event. This event fires after the page an all it's images have loaded. The $(document).ready() event fires after the page has loaded, but before the browser has retrieved all the images. Calling the plugin in this event will result in the plugin rending a blank DIV as the image hasn't loaded.

wenjie847

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Image Annotation Plugin

jQuery Image Annotation Plugin Tuesday, 17 March 2009Download Released: 2nd April, 2009 Flickr was the first site to widely introduce the concept of annotating images with user comments. This
复制链接

扫一扫