Creating a responsive, dimension independent and adjustable AJAX image uploader has never been made this simple.

It could be integrated into your dynamic PHP website effortlessly.

Here is how to convert a single line of HTML code into an elegant image upload container.

<div id="profile-container" height="200" width="200" />

Here is how you can Closify the above single tag using jquery Closify plugin, with padding a single option:

$('#profile-container').closify({circluarCanvas:true});

Two simple steps and now you will be having an elegant circular profile image container, that is uploadable and adjustable, in which user can drag n crop it as per his/her desire. For real experience, please visit the live preview.

Closify is a jQuery based plugin, that simplifies the developers task to create unlimited number of dynamic image containers; with different shapes (Rectangular, Oval & Circular), and, with different dimensions according to their website design. With closify the developers can easily create uploadable and adjustable (cover, profile, or any other custom image container) with a single line of code. Intelligently enough the Closify plugin would resize the uploaded image according to the size of the container set, with a respect of the image aspect ratio, and then it starts to generate a dynamic in the front-end, with a flixable slide menu for each container that has four different options: (Upload, Reposition, Save and Delete).

Upload: The user can click this button and upload the desired image to be processed and seamlessly returned to perfectly fit the container.

Reposition: The uploaded images might have either a longer hieght or a longer width in respect to the container, and conveniently the plugin gives the user the capability to position/reposition his image according to his taste at any time.

Save: Clicking this button will save the position offset (offsetX & offsetY) and then send it to server for post-processing. Developer need to handle the SQL Script on where to save this info, and re-apply it later.

Delete: Delete the image from the container, and send a POST request to the server with

Multiple progress-bar styles – It has more than one style for the progress bar, to help match your website.

Maximum limitation – You can define the maximum size of images through the plugin options.

Event outlet – It gives the developer the capability to listen to multiple events, such as (beforeSubmit, success, error and progress).

Define an initial default image – Developers can define an initial global photo for each container.

Customize loading image – Loading image could be overriden by the developers.

Container background image – Background image of the container can be globally redefined through plugin options.

Version Updates:

v20141005

Update Version: 1.1.5

- Added Safari ignore filter (To optimize the look for versions below 5.0)
- Removed offsetX/offsetY and replace them with left/top positions
- Updated theme folder
- Updated docs folder
- Added corner control option for the plugin
- Added position control option for the plugin
- Corner control option for the plugin (Soon will be illustrated with pictures)
- Added 'position' control option for the plugin, so that it can be used to set an already uploaded picture position from the server side.

Major update from version 1.5.1 into 2.0.

- Extra new features. closify-min.js
- Updated processupload.php
- position default: '{top:"0", left:"0"}' You can use this option either in conjuction with 'startWithThisImg' option or on demand, to pass saved top/left position for any picture, to be placed correctly as configured.
- circluarCanvas - Default: 'false' By enabling this option, the plugin will change the style of the container to have a circular type of edges.
- hardTrim - Default: 'false' By enabling this option the plugin will trim the extra image residue from outside image container.
- quality - Default: '1' It accepts [1,2, and 3] as values. You can use this option to change the image sampling and resolution to be 1x, or 2x, or 3x, whatever the developer found it to give sufficient quality for the image.
- dynamicStorage - Default: 'false' By enabling this option the plugin will intelligently starts to retrieve the last uploaded image and place it inside the container automatically. It works well with hardTrim option being enabled! Please read the documentation for further details.

- Remove the form dependency, which made the plugin able to be inserted inside of any form.
- Added two extra events and passing the returned JSON result passed from the server side: 1- finishUploading 2- finishCropping
- Performance enhancement
- More compact size
- Removed jquery.form.min.js dependency
- Updated processupload.php to comply with the enhancements
- Heavy realtime testing