We'll start off the manipulation by demonstrating rotation.
On the client, we need to add an effects selector. For the moment, it will include rotate and reset. When reset is chosen, the image will be reloaded, minus the effects.
Add this line to the end of the images_selectImage
function in the JavaScript file, images.js
:
That will rebuild the effect options section every time a new image is chosen. Here is the function itself, which should be added to that same file:
function images_setupOptions(){ var opts=['reset','rotate'],i; var html='<select id="image_options_select">'; for(i=0;i<opts.length;++i){ html+='<option>'+opts[i]+'</option>'; } html+='</select>'; $(html) .change(images_changeOption) .appendTo($('#image_options').empty()); $('<span id="effect_options"></span>').appendTo($('#image_options')); }
You can see that the actual chooseable effects are taken from...