O'Reilly logo

jQuery 1.3 with PHP by Kae Verens

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Cropping

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.

Client-side code

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; ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required