ClassyPicozu
Image Editing for your website, via Picozu!

Picozu is an online drawing and photo retouching application based on HTML5 and CSS3. The application provides you with an easy yet complex way to edit your photos, draw using various brushes, filters, layers and explore a number of editing tools such as color fill, magic eraser or freehand selection.

ClassyPicozu is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that allows you to use Picozu's advanced image editing functions on images from your own website. Basically you get an awesome online image editor your visitors can use to play with.

Download it

Picozu Demo

Make sure you register a Picozu API key, which will be tied to your domain.

First you need to include the jQuery library, since ClassyPicozu is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyPicozu javascript and stylesheet file, which you can do it by adding the code below to your page.

Next, you create an anchor element on which you want to trigger the Picozu Editor. Make sure the href attribute points to the image you want to load into Picozu.

As the last step, you trigger the plugin on the element you just created. In this case, we trigger it on the element with the class picozu. Fill in correctly your Picozu API key.

$('.picozu').ClassyPicozu({
    key: 'YOUR_PICOZU_API_KEY'
});

• Parameters

  ---

• width - width of the Picozu Editor window in pixels, default is 1100
• height - height of the Picozu Editor window in pixels, default is 768
• move - whether to move the modal window when you scroll the page, default is true
• key - your Picozu API key, default is null
• image - the plugin loads the image specified in the anchor's href attribute, but you can override it with the image parameter, default is null
• workspace - defines the Picozu workspace, where 0 is minimal, 1 is the default one, 2 is educational and 3 is kids, default is 1
• theme - defines the Picozu theme, can be default, galaxy or kids, default is default

• Callbacks

  ---

• onOpen - callback function to be called when the modal window opens
• onClose - callback function to be called when the modal window closes

$('.picozu').ClassyPicozu({
    key: 'YOUR_PICOZU_API_KEY',
    image: 'http://www.yourdomain.com/image1.jpg',
    width: 900,
    height: 600,
    theme: 'galaxy',
    workspace: 2
});