How to rotate with Pixastic jquery more than once?

Question

I try to rotate my image when I click (using Pixastic), but I can only rotate 1 time, how can I rotate every time I click on the image

$('#tok').click(function() { $("#tok").pixastic("rotate", {angle:90}); }); 

Answer 1

I have not used Pixastic before. But, I believe, every time the image is clicked, you should increase the angle of 90.

 First Click -> 90 Second Click->180 Third Click ->270 Fourth Click ->360 Fifth Click ->90..etc 

Updated:

It seems Pixastic first deletes the image and inserts it again. This is why the onClick handler runs once. Change it to live and it will work.

 $('#tok').live('click',function() { $(this).pixastic("rotate", {angle:90}); }); 

Check out the Demo: here.

Answer 2

If you want to rotate it more than 90 degrees, you can also use the HTML5 Range element (or a workaround for legacy browsers (like IE 9 and below ;-))

HTML (5)

 <input type="range" id="rotate" min="-180" max="180" value="0" step="1"> 

JQuery

 $('.rotate').live('change', function(){ $('img').pixastic("rotate", {angle: $(this).val() }); } 

Regards to Jacob Seidelin for his great plugin!