Image editing with a slider and Pixastic library

Question

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?

score 1 · Accepted Answer · answered Jan 29 '13 at 17:30

1

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

answered Jan 29 '13 at 17:30

Pixsansar Nepal

158
1
8

score 0 · Answer 2 · edited May 23 '17 at 12:27

Okay, I found an answer on another question Pixastic Blur not working - variable issue?

The code works when changed to:

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

Still, I'm curious why this works and the other code doesn't. On another page (not using a slider in this way) that Pixastic call worked fine.

Image editing with a slider and Pixastic library

2 Answers2