Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    nv_angular-annotoriouspublic

    Angular Annotorious

    Angular Annotorious is directive for the image annotation library Annotorious plugin.

    Features

    Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+

    • Image Annotation
    • Angular directives to annotate individual images or a selection.
    • Angular service to access all the annotarious API
    • Appearance is controlled through CSS so it can be restyled.
    • BETA OpenSeadragon integration. ( web-based viewer for high-resolution zoomable images )

    Installation

    Via Bower:

    bower install angular-annotorious

    Via npm:

    npm install angular-annotorious

    In a browser:

    <link rel="stylesheet" type="text/css" href="http://annotorious.github.com/latest/annotorious.css" media="screen" />
    <script src="http://annotorious.github.com/latest/annotorious.min.js"></script>
    <script src="angular-annotorious.js"></script>

    Getting Started

    Include the Annotorious plug-in and the directive on a page.

    Basic with attribute

    <img src="http://annotorious.github.io/img/splash-image-1.jpg" annotorious-annotate>

    Basic with dynamic src

    {{imgURL=http://annotorious.github.io/img/splash-image-1.jpg}}
     
    <img ng-src="{{imgURL}}" annotorious-annotate>

    Basic with tag

    <img id="anno1" src="http://annotorious.github.io/img/splash-image-1.jpg">
     
    <annotorious options="{annotationsFor:'#anno1'}" />

    Dynamic Query URLs

    Do the image URLs change somehow between page load? (E.g. differences im the query string?) You can add a "data-original" attribute to the image. Annotorious will then use the value of this attribute as the identifier/src used to re-associate annotations with images.

    <img  src="http://any.long.url/that-could-change.jpg?foo=randomtoken" 
          data-original="stable-identifier-for-image"
          annotorious-annotate>

    Multiple with tag

    <img class="group" src="http://annotorious.github.io/img/splash-image-1.jpg">
    <img class="group" src="http://annotorious.github.io/img/splash-image-1.jpg">
     
    <annotorious options="{annotationsFor:'.group'}" />

    For more information on how to setup and customise, check the examples.

    License

    Licensed under MIT license.

    install

    npm i nv_angular-annotorious

    Downloadsweekly downloads

    2

    version

    1.0.4

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar