1 | #jQuery Image Annotation Plugin
|
---|
2 |
|
---|
3 | A jQuery Image Annotation plugin that can create Flickr-like comments on images embedded in web pages.
|
---|
4 |
|
---|
5 | This plugin works with jQuery 1.7.1.
|
---|
6 |
|
---|
7 | Extract [this zip file] [7] into a directory on your web server and navigate to `demo-static.html` or view a [live preview][1].
|
---|
8 |
|
---|
9 | ###Usage:
|
---|
10 |
|
---|
11 | To use the plugin you first need to reference the jQuery and jQuery UI libraries in your page. Add
|
---|
12 | the `jquery.annotate.js` and `annotation.css` files to enable the plugin.
|
---|
13 |
|
---|
14 | <style type="text/css" media="all">@import "css/annotation.css";</style>
|
---|
15 | <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
|
---|
16 | <script type="text/javascript" src="js/jquery-ui-1.7.1.js"></script>
|
---|
17 | <script type="text/javascript" src="js/jquery.annotate.js"></script>
|
---|
18 |
|
---|
19 | Once you've added in the necessary scripts, hook up an image on the page by using the following syntax:
|
---|
20 |
|
---|
21 | <script language="javascript">
|
---|
22 | $(window).load(function() {
|
---|
23 | $("#toAnnotate").annotateImage({
|
---|
24 | editable: true,
|
---|
25 | useAjax: false,
|
---|
26 | notes: [ { "top": 286,
|
---|
27 | "left": 161,
|
---|
28 | "width": 52,
|
---|
29 | "height": 37,
|
---|
30 | "text": "Small people on the steps",
|
---|
31 | "id": "e69213d0-2eef-40fa-a04b-0ed998f9f1f5",
|
---|
32 | "editable": false },
|
---|
33 | { "top": 134,
|
---|
34 | "left": 179,
|
---|
35 | "width": 68,
|
---|
36 | "height": 74,
|
---|
37 | "text": "National Gallery Dome",
|
---|
38 | "id": "e7f44ac5-bcf2-412d-b440-6dbb8b19ffbe",
|
---|
39 | "editable": true } ]
|
---|
40 | });
|
---|
41 | });
|
---|
42 | </script>
|
---|
43 |
|
---|
44 | It is important to use the `$(function() { ... });` function as this will fire once the page and
|
---|
45 | all it's images have loaded. Failing to do so will result in the plugin executing before the image
|
---|
46 | dimensions have been determined.
|
---|
47 |
|
---|
48 | The HTML markup for the page looks like this:
|
---|
49 |
|
---|
50 | <html>
|
---|
51 | <head>
|
---|
52 | <title>Demo Page</title>
|
---|
53 | </head>
|
---|
54 | <body>
|
---|
55 | <div>
|
---|
56 | <img id="toAnnotate" src="images/trafalgar-square-annotated.jpg" alt="Trafalgar Square" />
|
---|
57 | </div>
|
---|
58 | </body>
|
---|
59 | </html>
|
---|
60 |
|
---|
61 | A copy of all this code is included in the release.
|
---|
62 |
|
---|
63 | ###History:
|
---|
64 |
|
---|
65 | ####Version 1.4 19th January, 2011
|
---|
66 | * Upgraded jQuery to version 1.7.1
|
---|
67 |
|
---|
68 |
|
---|
69 | ####Version 1.3 22nd June, 2009
|
---|
70 | * Fixed a bug when creating a new annotation via AJAX.
|
---|
71 | * The Id of the annotation is expected to be returned as a JSON object from the response of the save call, e.g.
|
---|
72 |
|
---|
73 | `{ "annotation_id": "000001" }`
|
---|
74 |
|
---|
75 |
|
---|
76 | ####Version 1.2 24th April, 2009
|
---|
77 | * Fixed jQuery UI 1.3.2 compatibility.
|
---|
78 | * Forked source for jQuery 1.2.x and 1.3.x
|
---|
79 | * Notes now fade in/out - be sure to add correct jQuery UI components.
|
---|
80 | * Tidied up CSS/positioning.
|
---|
81 |
|
---|
82 |
|
---|
83 | ####Version 1.1: 2nd April, 2009
|
---|
84 | * Fixed bug when annotating an image with no previous annotations.
|
---|
85 |
|
---|
86 |
|
---|
87 | ####Version 1.0: 11th March, 2009
|
---|
88 | * Initial release
|
---|
89 |
|
---|
90 |
|
---|
91 | ###Credits:
|
---|
92 |
|
---|
93 | Based on the Drupal extension:
|
---|
94 |
|
---|
95 | Image Annotations by Ronan Berder
|
---|
96 | [email protected]
|
---|
97 | [http://drupal.org/project/image_annotate] [2]
|
---|
98 | [http://drupal.org/user/49057] [3]
|
---|
99 | [http://teddy.fr] [4]
|
---|
100 |
|
---|
101 |
|
---|
102 | FamFamFam Icons by:
|
---|
103 | Mark James
|
---|
104 | [http://www.famfamfam.com/] [5]
|
---|
105 |
|
---|
106 |
|
---|
107 | Trafalgar Square image by:
|
---|
108 | Maurice
|
---|
109 | [http://www.flickr.com/photos/mauricedb/2742966709/] [6]
|
---|
110 |
|
---|
111 | ###Licence:
|
---|
112 |
|
---|
113 | Released under the GNU license.
|
---|
114 |
|
---|
115 | [1]: http://flipbit.co.uk/jquery-image-annotation.html "jQuery Image Annotation Plugin"
|
---|
116 | [2]: http://drupal.org/project/image_annotate
|
---|
117 | [3]: http://drupal.org/user/49057
|
---|
118 | [4]: http://teddy.fr
|
---|
119 | [5]: http://www.famfamfam.com/
|
---|
120 | [6]: http://www.flickr.com/photos/mauricedb/2742966709/
|
---|
121 | [7]: https://github.com/flipbit/jquery-image-annotate/zipball/master |
---|