We will handle the client side of the cropping using Jcrop
, a plugin for jQuery written by Kelly Hallman.
Download Jcrop from http://deepliquid.com/content/Jcrop_Download.html, and extract so that the Jcrop
directory is in the root of your demo directories as usual.
We still have the rotation problem to consider, so there's a little bit of thinking involved in how this is done.
In the images.php
file, add these lines after the jQuery lines in the <head>
section:
<script src="../Jcrop/js/jquery.Jcrop.min.js"></script> <link rel="stylesheet" href="../Jcrop/css/jquery.Jcrop.css" type="text/css" />
Now, in the images.js
script, replace the images_showImage
function with this:
function images_showImage(){ var params='f='+image.url; for(var eff in image.effects){ if(image.effects[eff]!=undefined){ params+='&'+eff+'='+image.effects[eff]; } } var url='images_show.php?'+params; $('#image_holder').empty(); $('#image_url...