How to use annotorious with angular

Question

I'm trying to best integrate annotorious with angular. The Annotorius library although described, it is particularly difficult to debug. (see what I mean at annotorious.debug.js )

So far, I created my own solution with angular-annotorious (free MIT open source project DISCLAIMER: i'm the maintainer of it.), that offers 2 directives for tag and attribute cases, also a service to access the anno object.

I'm facing problems with dynamic contents, like sliders. (note that I do know that for ng-src images special treatment may be needed due to the img src cycle)

The annotated images with an unique URL, once recreated in the DOM tree, it does not seem to get annotated once again if we call

anno.makeAnnotatable(img)

To reproduce it, see the colorbox example (colorbox is a free open source modal library)

Are there any interesting ideas how to integrate/annotate dynamic content that may reappear?

Answer 1

I found the solution, instead of doing a "shutting down" annotorious, we simply call the reset function in the onLoad and onCleanup events which is critical for dynamic content like colorbox or fancybox.

The code for dynamic integration with colorbox looks like this:

$scope.annotateColorbox03 = {
    rel: 'img-group-01',
    slideshow: false,
    open: false,
    onComplete: function () {
        console.log('03-complete');
        var photo = colorboxService.getCurrentPhoto();
        if (photo.src) {
            console.log('annotateColorbox03 ' + photo.src);
            annotoriousService.makeAnnotatable(photo);
            var annotations = annotoriousService.getAnnotations(photo.src);
            console.log(annotations);
            if (annotations && annotations.length > 0) {
                annotoriousService.showAnnotations(photo.src);
                colorboxService.resize();
            }

        }
    },
    onLoad: function () {
        console.log('03-onLoad');
        annotatableImage();
    },
    onCleanup: function () {
        console.log('03-cleanup');
        annotatableImage();
    }
};

function annotatableImage() {
    var photo = colorboxService.getCurrentPhoto();
    if (photo && photo.src) {
        //required
        annotoriousService.reset(photo.src);
    }
}

The working example is now at: Annotorious in Colorbox Gallery

This example relies on angular-annotorious using the annotoriousService.

DISCLAIMER: i'm the maintainer of angular-annotorious which is a free MIT open source project.