Pixastic Editor 1.0

Created Saturday 18th of April 2009 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.

What it Does

This app/plug-in inserts a (completely stylable) toolbar next to any image in your document that allows the user to apply different Pixastic-effects to the image.

The modified image can be opened in a new window by clicking it.

I've recently stopped including pixastic on my site so I had to remove the example and downloads from this page. Instead, please have a look at the external example page and its source for what you need.

If you want more information about the plug-in then check out this article on exscale.se.

How to Use

$('#my-image').pixasticEditor(); would insert the editor in the #my-image-element and affect an img-element within #my-image.

Since it's not possible to append a list or div or any other element directly to an image, the plug-in should be run on a parent-element (preferably div) of the img-element.
If you have a list of images you could run it on each li of the list.

Example

Lamp and Mates

Example Code

HTML

<div id="jquery-pixastic-editor-example">
<
img src="/AndreasLagerkvist/Files/lamp-and-mates.jpg" alt="Lamp and Mates" />
</
div>

JS

// This is what the code could look like, since I no longer include pixastic.js on my site I've had to comment it
//$(function () {
//    var img = $('#jquery-pixastic-editor-example').find('img')[0];

//    if (img.complete) {
//        $('#jquery-pixastic-editor-example').pixasticEditor();
//    }
//    else {
//        img.onload = function () {
//            $('#jquery-pixastic-editor-example').pixasticEditor();
//        };
//    }
//});

Source Code

[code][/code]

Download

Plug-in

Requires

Random jQuery Plug-ins

  • Colour Picker

    Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in...

    Details

  • Pixastic Editor

    This app/plug-in inserts a (completely stylable) toolbar next to any image in your document that allows the user to apply different Pixastic-effects ...

    Details

  • Captcha Refresh

    If you use a so called CAPTCHA-image on your site then you can use this plug-in to allow users to click your CAPTCHA in order to generate a new random...

    Details

More Plug-ins

Recent Comments

  1. Coneelolo on "Phu Quoc, Sihanouk Ville, Koh Chang, Koh Wai & Koh Mak"

    For the help please use http://www.google.com

  2. AL on "Accessible, Stylish Modal Windows With Modern CSS"

    @Matt - What exactly isn't working? "Not working" ...

  3. roboteich on "Accessible, Stylish Modal Windows With Modern CSS"

    This is hardly accessible. Screen reader focus is...

Page cached. Loaded in: 0.0207 second(s).
Last DB change: 2010-09-08 19:34:43
Last file change: 2010-08-12 15:31:16
Cache created: 2010-09-08 23:59:59