Home
»
»
Personal License $6.99
1 site, unlimited servers No source distribution Commercial use allowed Can modify source Read full license | More Info
Support Provided $9.99
1 site, unlimited servers No source distribution Commercial use allowed Can modify source 6 months support Read full license | More Info
- Create an account
- Log-in
Starting from $ 6.99
Modal Annotations
Javascript Widget that adds transparent modal annotations over images within a web page.
Media
Description
Modal Annotations is a javascript/css widget that allows you to add transparent modal annotations over images within a web page. This widget is highly customizable, allowing users to easily change the color, size, and behavior of the annotations.
Features Include:
Modal Annotation div that can be applied to images on a page
Ability to change Annotation Color by adding a CSS class. Colors include gray, red, green, yellow, and blue.
Ability to change Annotation size by adding a CSS class. Sizes include (Big, Medium, and Small)
Ability to modify Annotation Opacity, Animation Speeds, and Animation Ratios via Javascript flags.
Modal Annotations has it's own css file which makes it highly extensible in terms of look and feel
Setup
It's easy get Modal Annotations up and running on your website.
1) Copy modal_annotations.js into your website's javascript directory
2) Copy modal_annotations_style.css into your website's css directory
3) Copy all image assets from the supplied images folder into your website's images directory
4) Now add the following into your HTML file's header
//****foo.html header****
<!-- The CSS -->
<link rel="stylesheet" href="css/modal_annotations_style.css" type="text/css" media="screen"/>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/modal_annotations.js"></script>
//****foo.html header****
And that's it, your site is now set up with Modal Annotations. Now lets say that you have 2 images of the same dimensions called image.jpg and image_annotation.jpg. You can apply the annotation using the following notation:
//****foo.html body****
<div class="modal_annotations">
<div class="annotation_item">
<div class="base_image">
<img src="images/image.jpg" />
</div>
<div class="overlay_image">
<img src="images/image_annotation.png"/>
</div>
</div>
</div>
//****foo.html body****
Starting from $ 6.99
Questions & Comments
Leave a comment
Log-in now or register for a free account.