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