jquery.ut-image-panel

Image component for Urturn expressions

npm install jquery.ut-image-panel
2 downloads in the last week
4 downloads in the last month

Ut-Image

Image component for Urturn expressions

Build Status

Getting Started

Install with bower to get the dependencies

bower install git://github.com/urturn/jquery.ut-image-panel.git

In your expression.json file, add the following dependencies:

{
    ...,
    "dependencies": [
        { "path": "components/urturn-expression-css/css/style_full.css" },
        { "path": "components/jquery/jquery.js" },
        { "path": "components/jquery.ut-image-panel/dist/js/jquery.ut-image-panel.js" },
        { "path": "components/jquery.ut-image-panel/dist/css/jquery.ut-image-panel.css"    }
    ],
    ...
}

Component Usage

UT.Expression.ready(function(post) {
  jQuery("#myimage").utImage();
});

Parameters

Options

post

Type: UT.Post object

size

Type: object

{ width: 200px, height: 300px }

filter

Type: string

json filter, more info here: http://urturn.github.io/urturn-expression-api/Image%20Filters

autoSave

Type: boolean Default: true

Save in post.storage automatically when image added or remove

Required: the dom node should have an unique id attribute

autoAdd

Type: boolean Default: false

Trigger a post.dialog('image') during initialisation

autoCrop

Type: boolean Default: false

Crop image when added

flexRatio

Type: boolean Default: false

When the crop panel is displayed, can change the ratio of the crop zone

Events:

  • loaded
  • saved
  • added(image) ``UT.Image object```
  • recroped(image) ``UT.Image object```
  • removed
  • resized(size)

Examples

Basic:

jQuery("#myimage").utImage();

With options:

jQuery("#image,#image2").utImage({
    post: post,
    size: {
        width: 576,
        height: 300
    },
    filter: [{"filter":"sepia","parameters":{"strength":"0.86"}}]
})
.on('utImage:ready', function() {
    console.log("Let's go");
}),
.on('utImage:saved',function() {
    console.log("Image saved");
})
.on('utImage:added', function(e,image) {
    console.log("Image Recroped");
}),
.on('utImage:loaded', function(e,image) {
    console.log("Image Loaded");
}),
.on('utImage:removed', function() {
    console.log("Image Removed");
}),
.on('utImage:recroped', function(e,image) {
    console.log("Image Recroped");
}),
.on('utImage:resized', function(e,size) {
    console.log("Container size changed",size);
});

Dependencies

The dependencies are managed with Bower

Release History

0.8.4 - 2013/06/09

  • Refactor events trigger utImage:event
  • Fix crop edit issue

0.5.4 - 2013/04/19

  • Fixed bugs with sizing (refactored the way size is defined)
  • Added a loaded event
  • Improved unit tests with sizing tests

0.5.0 - 2013/04/13

  • rewrite events
  • add data('image')
  • lots of bugs fixes
  • better handling of differents devices / width
npm loves you