aimg - Dokuwiki Annotated Image Plugin

• See also aimg on the dokuwiki site
• Git repository at http://github.com/itayd/aimg

I needed a Flickr-like annotated image viewer for this website. I found Fotonotes™, so I sat down and made this nice plugin.

From the original Fotonotes™ library I bundled with the plugin only the client-side annotations script along with its stylesheet. I also removed from the original source the code and styles that deal with client-side annotations editing. There may be some left-overs, feel free to do the cleanup yourself and contribute the source :)

I'll be happy if you let me know where the plugin is installed. Just add yourself in the dokuwiki's plugin page.

This plugin is released under the Open Source License v2.1 or later (due to Fotonotes™).

• As this is my first dokuwiki plugin I have ever written, I got inspiration and example from the image_map plugin
• Fotonotes™ for the source of the client-side image notes script.

You can either

• Download aimg-latest.zip and unzip it into /lib/plugins under the dokuwiki root
• Or point the Dokuwiki's Plugin Manager to

  http://itay.bazoo.org/_media/projects/aimg/aimg-latest.zip

{{aimg> image.png?320x240 |Image title}}

@10,30,60,60|Annotation title
the content is optional, as well as the title and author name.
coordinates format is:
top,left,width,height.
~author

... wash, rinse, repeat ...  

{{<aimg}}

The image

Itay Donenhirsch

Pay attention that the title is actually a link

itay

A Wii Nunchuck

See The Purple Cat!

itay

Led Matrix

See all projects

itay

is generated by

{{aimg> me.jpg?200x300 |Itay Donenhirsch}}

@10,30,60,60|[[/personal|Itay Donenhirsch]]
Pay attention that the 
title is actually a link
~itay

@245,100,40,40| A Wii Nunchuck
See [[projects/purplegingi|The Purple Cat]]!
~itay

@265,22,40,30| Led Matrix
[[projects/ledmatrix|{{ projects/ledmatrix/12.jpg?w=100 }}]]
See all [[/projects]]
~itay

{{<aimg}}

• The desired presented image size MUST be specified. Without it the image will be displayed in its original size and will float, which will make a lot of mess on your page. I'll be glad to get a correction for this as I am a CSS-newbie :)

• CSS references a non-existent image. Solution: remove reference
• A space between the last area coordinate and the pipe symbol renders the coordinate value to 0. Solution: fix parsing

~~DISCUSSION~~