annotating images in ZENphoto

 

- download FNClient-0.6.0 fotonotes at: http://www.fotonotes.net/
- untar it and rename the folder to 'fnclient'
- open the file fnclient.js in the directory fnclient/fnclientlib/js
- in this file change the folowing lines like this

var fnServerPath = "../";

to:

var fnServerPath = "/zenphoto/fnclient/";

(if zenphoto is in your root)

 

and:

var imageFileSrc = "src";

to:

var imageFileSrc = "id";

- open the file fnclient.css in the directory fnclient/fnclientlib/styles
and change:

.fn-canvas {
position: relative;
border: 0px solid #ddd;}

to

.fn-canvas {
position: relative;
margin:0px auto;
border: 0px solid #ddd;}

this has to be done because the fotonotes image is an image that is loaded after the original image
has been loaded but since it has it's own class it needs to be styled in the fotonotes css to keep the default theme layout

- now upload the fnclient folder in your zenphoto directory assuming zenphoto is installed in the folder 'zenphoto' on your server eg /zenphoto/fnclient

- put the following lines at the top in the head section of the default theme image php. Assuming zenphoto is installed in the folder 'zenphoto' on your server;

<script type="text/javascript" src="/zenphoto/fnclient/fnclientlib/js/fnclient.js"></script>
<link rel="stylesheet" type="text/css" href="/zenphoto/fnclient/fnclientlib/styles/fnclient.css" />

- replace the this line in the image php;

<div id="image"><a href="<?php echo getFullImageURL();?>" title="<?php echo getImageTitle();?>"><strong><?php printDefaultSizedImage(getImageTitle()); ?></strong></a></div>

with:

<div id="image"><?php printDefaultSizedImage(getImageTitle(),"fn-image",getDefaultSizedImage());?></div><div id="image"><a href="<?php echo getFullImageURL();?>" title="<?php echo getImageTitle();?>">view image</a></div>