Img Notes – jQuery plugin

UPDATE : A new version of this plugin has been released and can be found here

This was another one of 'want it now()' things. A simple way to display notes over images when you roll your mouse over the image - you got it right! Flickr has that...

There are a couple of similar javascript solutions out there but I wanted something using jQuery and simple. Well using jQuery and simple in same sentence is kind of redundant but if you see the plugin code you will realize what I mean.

Take a look at the demo

Usage:

#1 The plugin expects the notes data to be in in json fomat. To quote from the example

PLAIN TEXT
JAVASCRIPT:
  1. notes = [{"x1":"10","y1":"10","height":"150","width":"50","note":"This is note one"}, {"x1":"25","y1":"25","height":"70","width":"80","note":"<strong>This</strong> is a new note This is another note This is a new note"}];

To quickly go over the properties
x1 - The X co-ordinate of the top-left corner of the note area
y1 - The Y co-ordinate of the top-left corner of the note area
height -
width - self explanatory
note - The text of the note, it can have html but I recommend you keep it simple.

x1 and y1 are relative the position of the image on which the notes will be displayed, so when you move the image around in your page the the notes will move with it.

#2 The javascript code to initialize the notes

PLAIN TEXT
JAVASCRIPT:
  1. $(window).load(function () {
  2. $('#id_of_image').imgNotes(); //If your notes data is is not named notes pass it
  3. });

The zip file has an example

Download : here
Known issues: Internet Explorer has a buggy behavior while displaying the text of notes, any one having a solution please post a comment. - Fixed

About this entry

You’re currently reading “ Img Notes – jQuery plugin ,” an entry on SANIsoft – PHP for E Biz

Published:
5.26.08 / 11:54am
Category:
Javascript, jQuery
Author:
Tarique Sani
RSS for this Author