The Matt Gifford Show

The Matt Gifford Show http://www.mattgifford.co.uk The random notes from a random no-one Thu, 18 Mar 2010 17:02:26 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 The random notes from a random no-one Matt Gifford no Matt Gifford mattgiffordshow@gmail.com Image Cropping with ColdFusion & jQuery http://www.mattgifford.co.uk/image-cropping-with-coldfusion-jquery/ http://www.mattgifford.co.uk/image-cropping-with-coldfusion-jquery/#comments Wed, 10 Feb 2010 12:49:14 +0000 Matt http://www.mattgifford.co.uk/?p=894 http://www.mattgifford.co.uk/image-cropping-with-coldfusion-jquery/feed/ 3 ColdFusion 8 was an amazing release. The addition of the many image-related functions and cfImage tags certainly enhanced an already fantastic server-side language. They are fun to use, fun to write, and incredibly simple. I wanted to have a quick play around with some front-end code to create a user-interface to dynamically crop an image using ColdFusion. Todd Sharp, Mr. Slidesix.com himself, developed a fantastic ColdFusion custom tag called cfImageCropper a few years ago to handle image cropping within CF. Ive used this custom tag a few times in the past on various projects. If you havent seen it or given it a test run, make sure you do. Instead of creating a custom tag, my small demonstration example uses jQuery and in particular a supersweet plugin called Jcrop to handle the core of the user-experince code and creating the crop marker. Heres a short video of the code in action (it will open in a new window): The HTML The HTML for the page and demonstration is fairly simple. The page contains a form which holds the required image-related values (X and Y positions, width and height, and the original image file name) which will be sent to the crop.cfm page to perform the image manipulation. A thumbnail menu on the right hand side of the page contains the images available to load into the main view, from which you can perform the cropping. <html> <head> <title>coldfumonkeh : Jcrop and ColdFusion - image cropping</title> <script src="js/jquery.min.js"></script> <script src="js/jquery.Jcrop.js"></script> <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> <link rel="stylesheet" href="css/style.css" type="text/css" />  <script language="Javascript"> </script> </head> <body> <div id="outer"> <div class="imageContainer"> <h2>jCrop and ColdFusion</h2>  <form action="crop.cfm" method="post"> <input type="hidden" size="4" id="x" name="x" /> <input type="hidden" size="4" id="y" name="y" /> <input type="hidden" size="4" id="x2" name="x2" /> <input type="hidden" size="4" id="y2" name="y2" /> <input type="hidden" size="4" id="w" name="w" /> <input type="hidden" size="4" id="h" name="h" /> <input type="hidden" name="imageFile" id="imageFile" value="" /> <input type="button" name="imageCrop_btn" id="imageCrop_btn" value="Crop the image" /> <input type="button" name="revert_btn" id="revert_btn" value="Revert to original" /> </form>  <div id="croppedImage"> <img src="images/ZamakRobots1.jpg" id="cropbox" /> </div> <div id="thumbs"> <ul class="thumb"> <li><a href="images/ZamakRobots1.jpg"> <img src="images/thumbs/ZamakRobots1.jpg" alt="Image 1" /> </a></li> <li><a href="images/ZamakRobots2.jpg"> <img src="images/thumbs/ZamakRobots2.jpg" alt="Image 2" /> </a></li> <li><a href="images/ZamakRobots3.jpg"> <img src="images/thumbs/ZamakRobots3.jpg" alt="Image 3" /> </a></li> </ul> </div> <p>This demonstration uses the awesome <a href="http://deepliquid.com/content/Jcrop.html" title="Jcrop jQuery plugin" target="_blank">Jcrop jQuery plugin</a> from Deep Liquid.</p> <p>Robots designed by <a href="http://www.zamak.fr/" title="Oliver Bucheron at zamak.fr" target="_blank"> Olivier Bucheron</a>.</p> [...] ColdFusion 8 was an amazing release. The addition of the many image-related functions and cfImage tags certainly enhanced an already fantastic server-side language. They are fun to use, fun to write, and incredibly simple. I wanted to have a quick [...] The Matt Gifford Show Returns #1 http://www.mattgifford.co.uk/the-matt-gifford-show-returns-1/ http://www.mattgifford.co.uk/the-matt-gifford-show-returns-1/#comments Fri, 29 Aug 2008 16:58:24 +0000 Matt http://www.mattgifford.co.uk/blog/?p=24 http://www.mattgifford.co.uk/the-matt-gifford-show-returns-1/feed/ 0 Its coming back.. heres promo #1. Direct link to show Its coming back.. heres promo #1. Direct link to show The Matt Gifford Show 00:01:00 The Matt Gifford Show, comedy, music, bands, honey badger no Song of the week… http://www.mattgifford.co.uk/song-of-the-week/ http://www.mattgifford.co.uk/song-of-the-week/#comments Tue, 19 Aug 2008 15:12:52 +0000 Matt http://www.mattgifford.co.uk/blog/?p=20 http://www.mattgifford.co.uk/song-of-the-week/feed/ 0 I heard this song on Adam Currys Daily Source Code podcast a few weeks ago and loved it. I had to track it down and share it with the world. Awakening by Switchfoot Direct link to the mp3 I heard this song on Adam Currys Daily Source Code podcast a few weeks ago and loved it. I had to track it down and share it with the world. Awakening by Switchfoot Direct link to the mp3