One of the features on LocateADoc.com, is for doctors to showcase their before and after pictures of procedures they performed. All the cases publicly available are found on http://www.locateadoc.com/pictures

I worked on about 50% of the code responsible for this project, including the Uploader itself. This is version 2 of our uploader and I previously coded all the the first version. This version is coded in Coldfusion, JQuery and Javascript.

While another developer started on the uploader project, he eventually had to leave us for another opportunity. I ended up having to continue where he left off, which left me with about a months of work to get it ready for production.

One of the features I added was a way for the users to upload 2 images at one time. Using JQuery's AJAX method and AJAX's asynchonous properties, I was easily able to allow the user to start the upload of one picture, and continue uploading subsequent ones. At the same time, the user could fill in the information about their case, while the images were uploading.

The main new feature of the uploader, over the previous version, was that we coded it to allow the user to reposition and crop their images, within the Before and After windows shown in the screen shots below. In the first version, the users had to edit their photos before uploading them, and sometimes they weren't savvy enough to have the necessary software to do this. We also took care of optimizing the photos for them, using ColdFusion's image functions on the server side, so they would load quicker on the front end.

To help us achieve both the cropping and viewing of the images, we used the IViewer plugin.

Here are some screen shots, and some code snippets, for how the finished results were achieved:

 

 

 

 

Before and After Gallery Uploader Code Snippet for Saving An Angle

Code For Saving the Gallery Page and Any Angles Not Saved