Search code examples
javascriptjquery-uicoffeescriptpixastic

Image editing with a slider and Pixastic library

I'm trying to edit an image using the Pixastic js library so that the image is automatically blurred to a certain value when the user moves a JqueryUI slider. I've already gotten this to work using a slider to adjust the opacity CSS value the image using this coffeescript:

#This works
$('.sliderop').slider
    min: 0
    max: 1
    value: 1
    step: 0.01
    range: "min"
    slide: (event, ui) ->
        $("#img_16").css('opacity', ui.value)

But when I try to do basically the same thing using the Pixastic library, no dice:

#This doesn't
$('.sliderbl').slider
    min: 0
    max: 5
    value: 0.5
    step: 0.1
    range: "min"
    slide: (event, ui) ->
        Pixastic.process($("#img_16"), "blurfast", { amount: ui.value})

The weird thing with this code is that it "freezes" the slider--when I load the page the slider stays stuck on the default value of "0.5" and can't be moved (but if I comment out the Pixastic.process($("#img_16"), "blurfast", { amount: ui.value}) code, it moves normally again).

Is this a problem with my code or with the way I'm using the Pixastic library?

Solution

  • Because you are using jquery version of Pixastic library. If you download Pixastic library without jquery plugins, then the previous code should work fine.