angular-annotorious
Version:
Angular directive for Annotorius to start drawing and commenting to images on your Web page.
202 lines (145 loc) • 6.61 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Igor Lino">
<title>Angular Annotorious Demo</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<style>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://rawgit.com/igorlino/elevatezoom-plus/master/css/jquery.ez-plus.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
<script src='https://rawgit.com/igorlino/elevatezoom-plus/master/src/jquery.ez-plus.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/igorlino/annotorious-bower/master/css/annotorious.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://rawgit.com/igorlino/angular-colorbox/master/themes/dark/colorbox-darktheme.css" media="screen" />
<script src='https://rawgit.com/igorlino/annotorious-bower/master/annotorious.min.js'></script>
<script src='https://rawgit.com/igorlino/angular-colorbox/master/js/angular-colorbox.js'></script>
<script src='https://rawgit.com/igorlino/angular-elevatezoom-plus/master/js/angular-ezplus.js'></script>
<!--
<script src='https://rawgit.com/igorlino/angular-annotorious/master/js/angular-annotorious.js'></script>
-->
<script src='../js/angular-annotorious.js'></script>
<!--
<script src='https://rawgit.com/igorlino/angular-annotorious/master/demo/controller.js'></script>
<script src='https://rawgit.com/igorlino/angular-annotorious/master/demo/app.js'></script>
-->
<script src='controller.js'></script>
<script src='app.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js'></script>
</head>
<body ng-app="annotoriousdemo"
ng-controller="AnnotoriousCtrl"
ng-init="setApproot('');">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Angular Annotorious</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Angular Annotorious Examples</h1>
<p class="lead">Use these examples as a way to quickly start any new web project that requires image annotation.</p>
<h2>Basic Annotation</h2>
<p>Hover the image and annotate to your heart contents</p>
<img
id="anno_0"
width="500px"
ng-src="{{approot}}images/large/image5.jpg"
annotorious-annotate
/>
<h2>Annotation with ColorBox</h2>
<p>Click the thumbnail image and annotate to your heart contents</p>
<img
id="zoom_01"
width="500px"
ng-src='{{approot}}images/large/image4.jpg'
/>
<colorbox
box-for="#zoom_01"
open="zoom01"
options="annotateColorbox01"/>
<hr/>
<h2>Annotation modal example with Width/Height 75%</h2>
<img
id="zoom_01a"
width="400"
ez-plus
ezp-model="zoomModel2"
ezp-options="zoomOptions"
/>
<colorbox
box-for="#zoom_01a"
open="zoom01a"
options="annotateColorbox01a"/>
<hr/>
<h2>Annotorious in Colorbox Gallery</h2>
<p>Click a thumbnail image then click over the large image.</p>
<div id="gallery_01">
<a ng-repeat="image2 in imagesForGallery"
class="img-group-01"
href="{{approot}}{{image2.large}}"
ng-click="setActiveImageInGallery('zoomModelGallery01',image2);"
data-image="{{approot}}{{image2.small}}"
data-zoom-image="{{approot}}{{image2.large}}">
<img ng-src="{{approot}}{{image2.thumb}}"/>
</a>
</div>
<img id="zoom_03"
ng-src="{{approot}}images/large/image2.jpg"
ng-click="setScopeValue('zoom03',true);"
ez-plus
ezp-model="zoomModelGallery01"
ezp-options="zoomOptionsGallery01"
/>
<colorbox
box-for=".img-group-01"
open="zoom03"
options="annotateColorbox03" />
<hr/>
</div>
</div>
<!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>